Add Adobe Target with tags | Adobe Experience platform (2023)

In this lesson we willAdobe Target-extensiewith a page load request and custom parameters.

Adobe goalsis the Adobe Experience Cloud solution that provides everything you need to tailor and personalize your customers' experience to maximize revenue across your web and mobile sites, apps, social media and other digital channels.

Learning Objectives

At the end of this lesson you will be able to:

• Add the pre-hide snippet used to control flickering when using Target with asynchronous tag embeds
• Add the Target v2 extension
• Trigger the request to load the page (formerly called "global mbox")
• Add parameters to the request to load the page
• Explain how profile and device parameters can be added to the page load request
• Activate the order confirmation request with the required parameters
• Explain how to add advanced configurations such as library header and library footer code
• Validate a Target implementation

Claim

To complete the lessons in this section, you must first enter the lessonsConfigure labelsIAdd the identity service.

Add the snippet to the previous hide target

Before we get started, we need to make a small update to the tag embed codes. When the tag embeds are loaded asynchronously, the page may finish rendering before the target library is fully loaded and has performed the content switch. This can lead to what is called "flickering" where standard content is displayed briefly before being replaced by the personalized content specified by Target. To avoid this flickering, we strongly recommend that you hardcode a special snippet to be hidden just before the asynchronous tag embed codes.

This has already been done on the Luma page, but let's go ahead and do it on the example page so you understand the implementation. Copy the following lines of code:

Open the example page and paste it just before your tag's embed code as shown below (don't worry if the line numbers are different). In this screenshot, the previously hidden snippet has been reduced in size:

Reload your sample page. You will notice that the page will be hidden for three seconds before showing up. This behavior is temporary and will disappear after you deploy Target. This pre-hide behavior is controlled by two configurations at the end of the clip, which can be changed, but are usually best left with the defaults:

• body {opacity: 0 !important}specifies the css definition to use for pre-hide until the Target is loaded. By default, the entire body is hidden. For example, if you have a consistent DOM structure with an easily recognizable container element that wraps all content under your navigation, and you've never wanted to test or personalize your navigation, you can use this option to limit pre-hiding to that container element.
• 3000which specifies the setting of the timeout before hiding. If the Target does not load within three seconds, the page will default. This should be extremely rare.

For more details and to get the unreduced pre-hidden fragment, seeThe Adobe Target extension with an asynchronous implementation.

Add the target extension

The Adobe Target extension supports client-side implementations with Target's JavaScript SDK for the modern web, at.js. Customers still use Target's legacy library, mbox.js,need to upgrade to at.js 2.xto use tags.

The Target v2 extension consists of two main parts:

1. The extension configuration which manages core library settings
2. Arrange actions to do the following:
   1. Load target (at.js 2.x)
   2. Add parameters to page load requests
   3. Add parameters to all requests
   4. Request to start page loading

In this first exercise, we'll add the extension and look at the configurations. In later exercises we will use the actions.

To add the extension

1. Go toExtensions > Catalog

2. Typegoalin the filter to quickly find the Adobe Target extensions. There are two extensions: Adobe Target and Adobe Target v2. This tutorial uses the v2 version of the extension, which uses the latest version of at.js (currently 2.x), which is ideal for both traditional websites and single page applications (SPA).

3. Clickto install

   

4. When you add the extension, it imports many, but not all, of your at.js settings from the Target interface, as shown below. One setting that is not imported is timeout, which is always 3000ms after adding the extension. For the tutorial, leave the default settings. Note that on the left is the at.js version that comes with the current version of the extension.

5. ClickSave to library

   

Right now, Target isn't really doing anything, so there's nothing to validate.

Load the target and enable the request to load the page

Marketers use Target to control the experience of site visitors when testing and targeting content. Because of this important role in page rendering, you should load Target as early as possible to minimize the impact on page visibility. In this section, we load the target JavaScript library - at.js - and start the request to load the page (referred to as "the global mbox" in previous versions of at.js).

You can useAll pages - Library loadedrule you made in class"Add data elements, rules and libraries” to implement Target because it is triggered as early as possible on page load.

Load target

1. Go toRegulationsin the left navigation, and then clickAll pages - Library loadedto open the rule editor

   

2. Under Actions, clickto add a new action

   

3. chooseExtension > Adobe Target v2

4. chooseAction Type > Load Target

5. ClickKeep changes

   

WithLoad targetadded action loads at.js on the page. However, no Target requests will be triggered until we releaseRequest to start page loadinghandling.

Request to load the page

1. Under Actions, clickagain to add another action

   

2. chooseExtension > Adobe Target v2

3. chooseAction Type > Home Page Load Request

4. There are some configurations available for the page load request as to whether or not to hide the page and CSS selector. These settings work in conjunction with the pre-hidden snippet hardcoded into the page. Leave the default settings.

5. ClickKeep changes

   

6. The new action is added sequentially afterLoad targetaction and the actions are performed in this order. You can drag and drop the actions to rearrange the order, but in this scenarioLoad targetmust be earlierRequest to start page loading.

7. ClickSave to library and build

   See Also

   Manage Users and Products | Adobe Experience Cloud ServicesIntegration with Adobe Target using IMS | Adobe Experience Manager

   

Confirm the request to load the page

Now that you have added the Target v2 extension andLoad targetIRequest to start page loadingactions, a page load request must be made on all pages that use your tag property.

To validate the Load Target and Fire Page Load Request actions

1. Reload your sample page. You should no longer see a three second delay before the page is visible. If you load the sample page withduration://protocol, you must perform this step in Firefox or Safari browsers, as Chrome does not trigger a Target request when you run itduration://protocol.

2. openLuma-site

3. Make sure Debugger maps the tag propertyFROMDevelopment environment, as described inprevious lesson

   

4. Go to the Summary tab of the debugger

5. I denLaunchsection, confirm itGoalshown belowExtensionscolumn

6. I denGoalsection, confirm that your at.js library version is listed

   

7. Finally go toGoaltab, expand your customer code and confirm that your page load request is displayed:

   

Congratulations! You have implemented Target!

Add parameters

Passing parameters in the Target request adds powerful capabilities to your targeting, testing, and personalization activities. The tag extension offers two actions for passing parameters:

1. Add page load request parameters, which adds parameters to page load requests (equivalent totargetPageParams()method)

2. Add parameters to all requests, which adds parameters to all Target requests, e.g. the request to load the page plus additional requests made via custom code actions or hardcoded into your site (equivalent totargetPageParamsAll()method)

These actions can be usedtoofLoad targetaction and can set different parameters on different pages based on your rule configurations. Use the line order function you used when setting up customer IDs with the identity service to set additional parameters onThe library is loadedevent before the rule triggers the page load request.

Query (mbox) parameters

Parameters are used to pass custom data to Target, enriching your customization options. They are ideal for attributes that change frequently during a browser session, such as page name, template, etc., and do not persist.

Let's addSidenavndata element we mentioned earlier iAdd data elements, rules and librarieslesson as a request parameter.

To add the request parameter

1. Go toRegulationsin the left navigation, and then clickAll pages - Library loadedto open the rule editor.

   

2. Under Actions, clickto add a new action

   

3. chooseExtension > Adobe Target v2

4. chooseAction Type > Add Page Load Request Parameters

5. EntersidenavnasName

   (Video) Data Prep and Ingestion in Adobe's Experience Platform (AEP) | Softcrylic

6. click onto open the data item modal

7. click onSidenavndataelement

8. click onchooseknob

   

9. ClickKeep changes

   

10. Click and drag on the left edge of itAdd page load request parametersaction to see the actions forRequest to start page loadingaction (it can be before or afterLoad target)

11. ClickSave to library and build

    

Validate request parameters

For now, custom parameters sent with at.js 2.x requests are not easily visible in the Debugger, so we use the browser's developer tools.

To validate the pageName request parameter

1. Reload the Luma site and make sure it is linked to your own tag property
2. Open your browser's developer tools
3. Click the Network tab
4. Filter the requests bytt.omtrdc(or your CNAME domain for Target requests)
5. FoldHeadings>Request payload>execute.pageLoad.parameterssection to validatesidenavnparameter and value

Profilparametre

Like request parameters, profile parameters are also passed through the target request. However, profile parameters are stored in Target's visitor profile database and persist forthe duration of the visitor profile. You can place them on one page of your site and use them in Goal Activities on another page. Here is an example of a car website. When a visitor goes to a vehicle page, you can pass a profile parameter "profile.lastViewed=sportscar" to capture their interest in that vehicle. When the visitor browses to other pages outside of vehicles, you can target content based on the last vehicle viewed. Profile parameters are ideal for attributes that rarely change or are only available on specific pages

You won't be passing profile parameters in this exercise, but the workflow is almost identical to what you just did when you passedsidenavnparameter. The only difference is that you must specify profile parameter names aprofile.prefix. This is what a profile parameter called "userType" would look like inAdd page load request parametershandling:

Device parameters

Entity parameters are special parameters used inImplementation recommendationsfor three main reasons:

1. As a key to trigger product recommendations. If you e.g. uses a recommendation algorithm like "People who saw product X also saw Y", then "X" is the "key" in the recommendation. This is usually the product's SKU (entiteit.id) or category (entity.categoryId), which the visitor is currently viewing.
2. To collect visitor behavior to drive recommendation algorithms, such as "Recently Viewed Products" or "Most Viewed Products"
3. To fill the catalog with recommendations. Recommendations contain a database of all products or articles on your website so that they can be displayed in the recommendation offer. For example, when recommending products, you want to display attributes such as the product name (device.name) and image (entity.thumbnailUrl). Some customers populate their catalog using backend feeds, but they can also populate with entity parameters in Target requests.

You don't need to pass device parameters in this exercise, but the workflow is identical to what you did before when you passedsidenavnrequest parameter - just give the parameter a name prefixed with 'entity'. and assign it to the appropriate data element. Note that some generic entities have reserved names that must be used (eg entity.id for the product SKU). This is what setting device parameters looks like inAdd page load request parametershandling:

Add Customer ID parameters

Collecting customer IDs with Adobe Experience Platform Identity Service makes it easy to import CRM data into Target usingCustomer characteristicsfeature in Adobe Experience Cloud. It also makes it possiblevisit stitching across units, so you can maintain a consistent user experience when your customers switch between their laptops and their mobile devices.

It is absolutely necessary to set up the customer ID in the identity serviceSet up customer IDsaction before triggering the request to load the page. So make sure you have the following properties on your site:

• The Customer ID must be available on the page before the Embed Code tags
• The Adobe Experience Platform Identity Service extension must be installed
• You needSet up customer IDsaction in a rule that fires on the "Library Loaded (Page Top)" event.
• UseRequest to start page loadingaction in a line that shootsalreadythe "Set Customer IDs" action.

In the previous lessonAdd the Adobe Experience Platform Identity Service, you madeAll pages - Library loaded - Approved - 10rule to trigger the "Set Customer ID" action. Because this line aOrdersetting of10, the client IDs are set before our page load request is firedAll pages - Library loadedrule with hisOrdersetting of50. So you've already implemented customer ID collection for Target!

Validate Customer ID

For now, custom parameters sent with at.js 2.x requests are not easily visible in the Debugger, so we use the browser's developer tools.

To validate customer ID

1. openLuma-site

2. Make sure Debugger maps the tag propertyFROMDevelopment environment, as described inprevious lesson

   

3. Log in to the Luma website with the credentialstesten@adobe.com/try

4. Go back toLousy website

5. Open your browser's developer tools

6. Click the Network tab

7. Filter the requests bytt.omtrdc(or your CNAME domain for Target requests)

8. FoldHeadings>Request payload>id.customerIds.0section to validate the Customer ID settings and value:

Add the property token parameter

The property token is a reserved parameter used with Target PremiumPermissions for business usersfunction. It is used to define different digital properties so that different members of an Experience Cloud organization can have different permissions for each property. For example, you want one group of users to be able to set up Target activities on your website, but not on your mobile application.

Metric properties are analogous to roof properties and Analytics report packs. A business with multiple brands, websites, and marketing teams can use a different Target property, tag property, and Analytics report pack for each website or mobile app. Label properties are distinguished by their embed codes, Analytics report packs are distinguished by their report suite ID, and measure properties are distinguished by their property token parameter.

The property token must be implemented using a custom code action in tags withtargetPageParams()function. If you deploy multiple sites that use different at_property values ​​with a single tag property, you can control the at_property value through a data element.

Here's an optional exercise if you're a Target Premium customer and want to implement a property token in your tutorial property:

1. Open the Target user interface in a separate tab

2. Go to **Manage > Properties**

3. Identify the property you want to use and click ** ** (or create a new property)

4. Copy the code snippet intoto your clipboard

   

5. On the Tags tab, go toRegulationsin the left navigation, and then clickAll pages - Library loadedto open the rule editor.

   

6. Under Actions, clickCore - Custom codehandling forAction configuration

   

7. Open the code editor and paste the code from the Target interface withtargetPageParams()function

8. click onReddenknob

   

9. CheckPerform worldwideso boxtargetPageParams()is explained in the global scope

10. ClickKeep changes

    

11. ClickSave to library and build
    

Validate has the ownership token

For now, custom parameters sent with at.js 2.x requests are not easily visible in the Debugger, so we use the browser's developer tools.

To validate the property token parameter

1. openLuma-site

2. Make sure Debugger maps the tag propertyFROMDevelopment environment, as described inprevious lesson

   

3. Open your browser's developer tools

4. Click the Network tab

5. Filter the requests bytt.omtrdc(or your CNAME domain for Target requests)

6. FoldHeadings>Request payload>property.tokensection to validate the value
   

Add custom requests

Add an order confirmation request

The order confirmation request is a special type of request used to send order data to Target. The inclusion of three specific request parameters - orderId, orderTotal and productPurchasedId - turns a normal Target request into an order request. In addition to reporting revenue, the order request also does the following:

1. Deduplicates accidental resubmitted orders
2. Filters outlier orders (any order whose total was more than three standard deviations from the mean)
3. Behind the scenes uses a different algorithm to calculate statistical confidence
4. Creates a special downloadable audit report with individual order details

The best practice is to use an order confirmation request in all order funnels, even on non-retail pages. For example, lead generation websites usually have lead funnels with a unique "lead ID" at the end. These sites must implement an order request with a static value (eg "1") for orderTotal.

Customers using Analytics for Target (A4T) integration for the majority of their reporting may also implement order requests if they use automated personalization activities that do not support A4T. Additionally, the order request is a critical element in recommendation implementations where algorithms are driven based on purchase behavior. For the latest information on A4T support, seethe documentation.

The order confirmation request must be triggered from a rule that is only triggered on your order confirmation page or event. Often it can be combined with a rule that sets the Adobe Analytics purchase event. It must be configured using the Core extension's Custom Code action, using the appropriate data elements to set the orderId, orderTotal, and productPurchasedId parameters.

Let's add the data elements and rules we need to trigger an order confirmation request on the Luma website. Since you have already created several data elements, these instructions are abbreviated.

To create the Order ID data element

1. ClickData elementsin the left navigation
2. ClickAdd data item
3. Give the data element a nameOrder ID
4. chooseData element type > JavaScript variable
5. UsedigitalData.cart.orderIdasJavaScript variable name
6. CheckPlain textchoice
7. ClickSave to library
   (We only build the library after making all changes to the order confirmation request)

To create the cart quantity data element

1. ClickAdd data item
2. Give the data element a nameShopping cart amount
3. chooseData element type > JavaScript variable
4. UsedigitalData.cart.cartAmountasJavaScript variable name
5. CheckPlain textchoice
6. ClickSave to library

Create the cart SKU (measure) data element

1. ClickAdd data item

2. Give the data element a nameShopping Cart SKUs (Target)

3. chooseData Element Type > Custom Code

   (Video) Adobe Target: Test and Optimize Every Experience, Every Time

4. For Target, the SKUs must be a comma-separated list. This custom code reformats the data layer array to the correct format. In the custom code editor, paste the following:

   var targetProdSkus=""; for (var i=0; i0) { targetProdSkus = targetProdSkus + ","; } targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;}retur targetProdSkus;

5. CheckForce lower casechoice

6. CheckPlain textchoice

7. ClickSave to library

Now we need to create a rule to trigger the order confirmation request with these data elements as parameters on the order confirmation page.

To create the order confirmation page rule

1. ClickRegulationsin the left navigation
2. ClickAdd rule
3. Name the ruleOrder Confirmation Page - Library Loaded - 60
4. ClickEvents > Add
   1. chooseEvent Type > Library Loaded (page up)
   2. underAdvanced settings, changeOrderUnpleasant60so it will fire afterLoad targetaction (as in ourAll pages - Library loadedrule trueOrderset to50)
   3. ClickKeep changes
5. ClickConditions > Add

   1. chooseCondition Type > Path without query string

   2. ToThe path is rightentertak.html

   3. Enable the Regex option to change the logiccorresponding toUnpleasantcontains(you can useTryfunction to confirm that the test passes with the URLhttps://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html

      

   4. ClickKeep changes

6. ClickActions > Add

   1. chooseAction Type > Custom Code

   2. ClickOpen editor

   3. Paste the following code into itEdit codemodal

      adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Winkelwagenbedrag'), "productPurchasedId " : _satellite.getVar('Cart SKU's (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, " fout": functie(status, fejl) { console.log('Fout', status, fejl); }});

   4. ClickReddento save the changed code

   5. ClickKeep changesto keep the action

7. ClickSave to library and build

Validate order confirmation request

For now, custom parameters sent with at.js 2.x requests are not easily visible in the Debugger, so we use the browser's developer tools.

1. openLuma-site

2. Make sure Debugger maps the tag propertyFROMDevelopment environment, as described inprevious lesson

   

3. Browse the site and add different products to your shopping cart

4. Go to checkout

5. Below the box are the only mandatory fieldsFirst nameILast name

   

6. On the Review Order page, clickplace orderknob

7. Open your browser's developer tools

8. Click the Network tab

9. Filter the requests bytt.omtrdc(or your CNAME domain for Target requests)

10. Click on the second request

11. FoldHeadings>Request payload>run.mboxes.0section to validate the request name and order parameters:

Custom Requests

There are rare cases where you need to make target requests other than page load and order confirmation. For example, important data that you want to use for personalization is not defined on the page before the tag embed codes. These can be hardcoded at the bottom of the page or returned by an asynchronous API request. This data can be sent to Target with an additional request, although it is not optimal to use this request for content delivery since the page is already visible. This data can be used to enrich the visitor profile for later use (using profile parameters) or to fill out the Recommendation Catalogue.

In these circumstances, use the Custom Code action in the Core extension to initiate a request using thegetOffer()/applyOffer()ItrackEvent()methods. This is very similar to what you just did inRequest order confirmationexercise, but you just use a different request name and don't use the special order parameters. Make sure to useLoad targetaction before making target requests from custom code.

The Edit at.js screen in the Target UI contains places where you can insert custom JavaScript that runs immediately before or after the at.js file. The library header is sometimes used to override at.js settings via
targetGlobalSettings()function or disclose data from third parties usingData providersfunction. The library footer is sometimes used to addat.js custom eventlisteners.

To replicate this functionality in tags, simply use the Custom Code action in the Core extension and place the action before (Library Header) or after (Library Footer) the Load Target action. This can be done along the same lines asLoad targetaction (as shown below) or in separate event rules or sequence settings that fire reliably before or after the rule withLoad target:

For more information on custom headers and footers use cases, see the following resources:

• Use data providers to integrate third-party data into Adobe Target
• Implement data providers to integrate third-party data into Adobe Target
• Use response tokens and at.js Custom Events with Adobe Target

Next "Add Adobe Analytics" >