Set up Adobe Target with Platform Web SDK

Learn how to implement Adobe Target using Platform Web SDK. Learn how to deliver experiences and how to pass additional parameters to Target.

Adobe Target is the Adobe Experience Cloud application that provides everything you need to tailor and personalize your customers’ experience, so you can maximize revenue on your web and mobile sites, apps, and other digital channels.

Learning objectives

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

Prerequisites

To complete the lessons in this section, you must first:

Add flicker mitigation

Before starting, determine if an extra flicker handling solution is required depending on how the tag library is loaded.

Asynchronous implementation

When a tag library loads asynchronously, the page may finish rendering before Target has performed a content swap. This behavior can lead to what is known as “flicker” where default content briefly displays before being replaced by the personalized content specified by Target. If you want to avoid this flicker, Adobe recommends adding a special pre-hiding snippet immediately before the asynchronous tag embed code.

This snippet is already present on the Luma site, but let’s take a closer look to understand what this code does:

<script>
  !function(e,a,n,t){var i=e.head;if(i){
  if (a) return;
  var o=e.createElement("style");
  o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
  (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
</script>

The pre-hiding snippet creates a style tag in the head of the page with the CSS definition of your choosing. This style tag is removed when a response from Target is received, or the timeout is reached.

The pre-hiding behavior is controlled by two configurations at the very end of the snippet.

The pre-hiding snippet is also available within tags:

Synchronous implementation

Adobe recommends implementing tags asynchronously as demonstrated on the Luma site. However, if the tag library is loaded synchronously, then the pre-hiding snippet is not required. Instead, the pre-hiding style is specified in the Platform Web SDK extension settings.

The pre-hiding style for synchronous implementations can be configured as follows:

To learn more about how the Platform Web SDK can manage flicker, you can refer to the guide section: managing flicker for personalized experiences.

Configure the datastream

Target must be enabled in the datastream configuration before any Target activities can be delivered by Platform Web SDK.

To configure Target in the datastream:

Property token

Target Premium customers have the option to manage user permissions with properties. Target properties allow you to establish boundaries around where users can run Target activities. Refer to the Enterprise Permissions section of the Target documentation for details.

To setup or find property tokens, navigate to Adobe Target > Administration > Properties. The </> icon displays the implementation code. The at_property value is the property token you would use in your datastream.

Target environment ID

Environments in Target help you manage your implementation through all stages of development. This optional setting specifies which Target environment you are going to use with each datastream.

Adobe recommends setting the Target Environment ID differently for each of your development, staging, and production datastreams to keep things simple.

To setup or find Environment IDs, navigate to Adobe Target > Administration > Environments.

Target third-party ID namespace

This optional setting allows you to specify which Identity Symbol to use for the Target Third Party ID. Target only supports profile syncing on a single identity symbol or namespace. For more information, you can refer to the Real-Time profile syncing for mbox3rdPartyId section of the Target guide.

The Identity Symbols are found in the identities list under Data Collection > Customer > Identities.

For the purposes of this tutorial using the Luma site, use the Identity Symbol lumaCrmId set up during the lesson about Identities.

Render visual personalization decisions

First, you should understand the terminology used in the Target and tags interfaces.

Update the page load rule

Visual personalization decisions from Target are delivered by the Platform Web SDK, if Target is enabled in the datastream. However, they are not rendered automatically. You must modify the global page load rule to enable automatic rendering.

The render visual personalization decisions setting makes the Platform Web SDK automatically apply any modifications that were specified using the Target Visual Experience Composer or “global mbox”.

If you prefer to render or action on these decisions yourself using custom code, you can leave the Render visual personalization decisions setting disabled. The Platform Web SDK is flexible and provides this capability to give you complete control. You can refer to the guide for more information about manually rendering personalized content.

Set up a Target activity with the Visual Experience Composer

Now that the basic implementation portion is complete, create an Experience Targeting (XT) activity in Target to validate that everything is working correctly. You may refer to the Target tutorial for creating Experience Targeting activities if you need assistance.

Validate with the Debugger

If you set up an activity, you should see your content render on the page. However even if no activities are live, you can also look at the Send Event network call to confirm that Target is configured properly.

Set up and render a custom decision scope

Custom decision scopes (formerly known as “mboxes”) can be used to deliver HTML or JSON content in a structured fashion using the Target Form-based Experience Composer. Content delivered to one of these custom scopes is not rendered automatically by the Platform Web SDK.

Add a scope to the page load rule

Modify your page load rule to add a custom decision scope:

Process the response from Target

Now that you have configured the Platform Web SDK to request content for the homepage-hero scope, you must do something with the response. The Platform Web SDK tag extension provides a Send Event Complete event which can be used to immediately trigger a new rule when a response from a Send Event action is received.

Set up a Target activity with the Form-based Experience Composer

Now that you have a rule to manually render a custom decision scope, you can create another Experience Targeting (XT) activity in Target. This time use the Form-Based Experience Composer.

Validate with the Debugger

If you activated your activity, you should see your content render on the page. However even if no activities are live, you can also look at the Send Event network call to confirm that Target is requesting content for your custom scopes.

Pass additional data to Target

In this section, you will pass Target-specific data and take a closer look at how XDM data is mapped to Target parameters.

There are some data points that may be useful to Target that are not mapped from the XDM object. These special Target parameters include:

Create data elements for Target parameters

First you will set up a few extra data elements for a profile attribute, entity attribute, category value and then construct the data object which is used to pass non-XDM data:

Update the page load rule

Passing additional data for Target outside of the XDM object requires updating any applicable rules. For this example, the only modification you must make is to include the new data.content data element to the generic page load rule and product page view rule.

Validate with the debugger

Now that the rules are updated, you can validate if the data is being passed correctly using the Adobe Debugger.

Validate in the Target interface

Next, look in the Target interface to confirm that data was received and is available to use in audiences and activities. XDM data is automatically mapped to custom Target parameters. You can validate that XDM data was received by Target and is available by creating an audience.

Next, validate that the login state profile attribute was successfully passed.

If you have Target Premium, you can also validate that the entity data was passed correctly and the product data was written to the Recommendations product catalog.

Now that you have completed this lesson you should have a working implementation of Adobe Target using the Platform Web SDK.

Next: Implement Consent for Experience Platform Web SDK