2. Tag Configuration

Welcome back to Part 2 of our blog series on Implementing Adobe Target with Adobe Experience Platform Web SDK. In this implementation, we’ll dive into Tag Configuration.

Tag configuration is a crucial aspect of implementing Adobe Target. It allows you to track user activities and target specific experiences to different segments of your audience. According to the Adobe documentation, follow these steps to configure tags for Adobe Target using the Adobe Experience Platform Web SDK

Learn how to install and configure the Platform Web SDK tag extension in the Data Collection interface.

Requirements

You must have completed the following step

· Configure permission

· Configure an XDM schema

· Configure an identity namespace

· Configure a data stream

A. Install Experience Platform Web SDK Extension

Add Property

To begin, you need to have a tag property. A tag property serves as a container for JavaScript, rules, and other necessary components that collect information from a web page and transmit it to different destinations.

New property creation

1. Open the data collection interface

2. Select Tags in the left navigation

3. Select the New Property button

4. As the Name, enter Web SDK Course (add your name to the end, if multiple people from your company are taking this tutorial)

5. As the Domains, enter enablementadobe.com

6. Select Save

Add the Web SDK extension

1. Open your new tag property

2. Go to Extensions > catalog

3. Search for Adobe Experience Platform Web SDK

4. Select Install

Link Platform Web SDK to your data stream

1. Under DataStream, select the Choose from list input method

2. select the DataStream you created earlier, Luma Web SDK

3. Select Save

Now that you have installed Platform Web SDK and associated it to the data stream, you are ready to start mapping data elements to an XDM object with the schema you created.

B. Create a data element

To create the essential data elements needed to capture data with Experience Platform Web SDK. Capture both content and identity data on the Luma demo site

Requirement

· Configure permission

· Configure an XDM schema

· Configure an identity namespace

· Configure data stream

· Web SDK extension installed in tag property

Create data elements to capture the data layer

Step for data elements mapping to the Luma demo site data layer

1. Go to Data Elements and select Add Data Element

2. Name the data element page.pageInfo.pageName

3. Use the JavaScript Variable Data Element type to point to a value in Luma’s data layer: digitalData.page.pageInfo.pageName

4. Check the boxes for Force lowercase value and clean text to standardize the case and remove extraneous spaces

5. Leave None as the Storage Duration setting since this value is different on every page

6. Select Save

Follow the same steps to create these four additional data elements:

page.pageInfo.server mapped to

digitalData.page.pageInfo.server

page.pageInfo.hierarchie1 mapped to

digitalData.page.pageInfo.hierarchie1

user.profile.attributes.username mapped to

digitalData.user.0.profile.0.attributes.username

user.profile.attributes.loggedIn mapped to

digitalData.user.0.profile.0.attributes.loggedIn

cart.orderId mapped to digitalData.cart.orderId

Create Identity Map Data Element

create the Identity Map data element

1. Go to Data Elements and select Add Data Element

2. Name the Data Element identityMap.loginID

3. As the Extension, select Adobe Experience Platform Web SDK

4. As the Data Element Type, select Identity map

5. As the Namespace, select the Luma CRM Id namespace that you previously created in the Configure Identities lesson

6. After the Namespace is selected, an ID must be set. Select the user.profile.attributes.username data element created earlier in this lesson, which captures an ID when users are logged into the Luma site.

7. As the Authenticated state, select Authenticated

8. Select Save

Map data elements to XDM objects

Every data element you generate needs to be associated with an XDM object. This object should align with the XDM schema you established in the Configure a schema lesson.

Create an XDM object to capture content data:

1. In the left navigation, select Data Elements

2. Select Add Data Element

3. Name the data element xdm.content

4. As the Extension select Adobe Experience Platform Web SDK

5. As the Data Element Type select XDM object

6. Select the Platform Sandbox in which you created the XDM schema in during the Configure an XDM Schema lesson, in this example DEVELOPMENT Mobile and Web SDK Courses

7. As the Schema, select your Luma Web Event Data schema

8. Scroll down until you reach the web object

9. Select to open it

10. Map the following web XDM variables to data elements

· web.webPageDetials.name to %page.pageInfo.pageName%

· web.webPageDetials.server to %page.pageInfo.server%

· web.webPageDetials.siteSection to %page.pageInfo.hierarchie1%

11. Next, find the identityMap object in the schema and select it

12. Map to the identityMap.loginID data element

13. Select Save

C. Create tag rule

Discover the process of transmitting an event to the Platform Edge Network utilizing your XDM object through a tag rule. A tag rule is a combination of events, conditions, and actions that instructs the tag property on what actions to perform

To create a tag rule:

1. Open the tag property you are using for this tutorial
2. Go to Rules in the left navigation
3. Select the Create New Rule button
4. Name the rule all pages - library load - AA & AT
5. In the Events section, select Add

6. Use the Core Extension and select Library Loaded (Page Top) as the Event Type.

7. Select Keep Changes to return to the main rule screen

8. In the Conditions section, select the Add button

9. Select Logic Type Exception, Extension Core, and Condition Type Path Without Query String

10. Enter the URL path /content/luma/us/en/user/cart.html in the path equals field, and name it Core — cart page

11. Select Keep Changes

12. Add three more exceptions for the following URL paths

· Core — checkout page for /content/luma/us/en/user/checkout.html

· Core — thankyou page for /content/luma/us/en/user/checkout/order/thank-you.html

· Core — product page for /products/ with the Regex switch turned ON

13. In the Actions section, select Add

14. Select Adobe Experience Platform Web SDK as the Extension

15. Select Send Event as the Action Type

16. Select web.webpagedetails.pageViews as the Type.

17. As the XDM data, select the xdm.content data element created in the previous lesson

18. Select Keep Changes to return to the main rule screen

19. Select Save to save the rule

Publish the rule in a library

To create a library:

1. Go to Publishing Flow in the left navigation

2. Select Add Library

3. or the Name, enter Luma Web SDK Tutorial

4. For the Environment, select Development

5. Select Add All Changed Resources

6. Select Save & Build for Development

D. Validate Web SDK implementations with Experience Platform Debugger

The Experience Platform Debugger is a browser extension that can be installed on Chrome and Firefox. It provides visibility into the Adobe technology integrated within your web pages.

The Experience Platform Debugger allows you to easily replace an existing tag library with a different one, saving time and simplifying the validation process.

Steps:

1. Make sure you have the Luma site open and select the Experience Platform Debugger extension icon

2. The Debugger will open and show some details of the hardcoded implementation, which is unrelated to this tutorial

3. Confirm that the Debugger is “Connected to Luma” as pictured below and then select the “lock” icon to lock the Debugger to the Luma site.

4. Select the Sign In button and sign into Adobe Experience Cloud using your Adobe Id.

5. Now go to Experience Platform Tags in the left navigation

6. Select the Configuration tab

7. To the right of where it shows you the Page Embed Codes, open the Actions dropdown, and select Replace

8. Since you are authenticated, the Debugger is going to pull in your available tag properties and environments. Select your Web SDK Course property automatically

9. Select the Apply button

The Luma website will now reload with your tag property

Validate your implementation in Experience Platform Debugger

1. Go to Summary in the left navigation, to see the details of your tag property

2. Now go to Experience Platform Web SDK in the left navigation to see the Network Requests

3. Open the event’s row

4. Note how we can see the web.webpagedetails.pageView event type we specified in our Send Event action, and other, out-of-the-box variables adhering to the AEP Web SDK ExperienceEvent Mixin format

5. Scroll down to the web object, select to open it and inspect the webPageDetails.name, webPageDetails.server, and webPageDetails.siteSection. They should match the corresponding digitalData data layer variables on the homepage

Congratulations on completing the second part of our blog series on Implementing Adobe Target with Adobe Experience Platform Web SDK! In the next part, we’ll dive into Application Setup. Stay tuned for Part 3: Application Setup and level up your Adobe Experience Platform skills.

Click here to access Part 3 :- https://implementadobetarget.blogspot.com/2023/06/3-set-up-adobe-target-with-platform-web_21.html

and continue your journey towards adobe Target Implementation. Happy reading!