Article summary

Summary

This development article discusses how to integrate Target with Adobe Experience Manager

Digital Marketing Solution(s) Adobe Experience Manager 6.2
Audience Developer
Required Skills HTML, JavaScript
Version 6.2

Introduction

You can create Adobe Experience Manager (AEM) solutions that integrate with Adobe Target. Adobe Target is a personalization solution that lets you easily identify content through tests that are easy to execute. Therefore, you can deliver the best experience to your web visitors. By using these products together, you can build engaging solutions that let you deliver the best content to a given web site visitor. That is, you display content from AEM DAM that meets the interest of the visitor. This development article walks you through how to build a solution that uses AEM, Target, and Dynamic Tag Manager.

CoreClient
Custom components displayed in the Experience Manager Side Rail

Configure Dynamic Tag Management

DTM uses rule-based scripts that consist of user interaction and associated data. When the criteria specified in your rule is met, the rule triggers the tool, script, or HTML you identified. A rule consists of two parts:

  • identifier
  • trigger

An identifier is what the rule looks for:

An event-­based rule is dependent on user interaction with the page. A page load rule is dependent on the URL, site section, or on the user’s site visit length.

A direct call rule is dependent on a specific call that is initiated by a custom script.
You can define rules in DTM web interface and use them within AEM web pages. In this development article, a page load rule is created that is invoked when a page is opened.

To configure DTM, perform these tasks: 

1. Login to DTM at https://dtm.adobe.com/sign_in

2. Create a web property by clicking on the Add Property button within the Company page. A Property is defined per domain basis.

DTMProp1
The Add Property button

3. Add the following:

  • Name - AEM_TARGET 
  • URL - http://localhost:4502/content/geometrixx-outdoors
     
Prop2
Creating a DTM property

4. Click Create Property and then at home page you will see this property. Click it to configure it.

5. From the left hand menu, select Page Load Rules and then click Create New Rule. This action opens the Create New Page Load Rule screen.

Prop3
Create New Rule button

7. Name the Activation rule AlertJS.

8. Under the Conditions section, select Onload from the Trigger rule at drop-down. 

9. Under the Javascript /Third Party Tags section, select the Non-­‐Sequential tab then click on the Add New Script button.

Prop5
Setting conditions for a rule

10.  From the editor popup, enter the following code:

alert("This is a DM rule");

11. Click on Save Code.

12. Click on Save Rule.

Activate the rule

After you create the rule, you have to activate it before you can use it. To activate the rule, go to the Approvals tab and select Approve for the rule. Once you perform this task, you can use it within an AEM web page.

Prop6
Approve the Rule

Note:

You need administrative privileges to approve a rule.

Configure the deployment options

Click the Embed tab and select one of the available deployment options in the left sidebar. In this example, select the Akamai option.

Embed
Deployment options

Save Header Staging Embed code, Header Production Embed code, Footer Staging Embed code and Footer Production Embed code in notepad.  Go to Right-hand side top of the screen and click profile Icon:
Click the DTM Account Settings,
Also save API Token found on the page:-

Prop67png
The DTM Token

Set up Dynamic Tag Management Cloud Service

Cloud services are the Experience Manager mechanism to configure integrations between Experience Manager and other cloud services such as Adobe Target. Cloud Services typically hold the parameters for connecting with an external service such as credentials or API endpoints.

Setup an Experience Manager cloud configuration connection to DTM. To connect from AEM to DTM, you will require these values:

  • API Token - The value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.
  • Company - The company with which your login ID is associated. (this value appears when you enter the API Token value)
  • Property - The name of the Web Property that you created for managing the tags for your AEM site.
  • Header code - the Header code that you created in Activation.
  • Footer code - the Footer code that you created in Activation.

Perform these tasks: 

1. Open the AEM Navigation by clicking on the solution title. Click Tools and navigate to Deployment, Cloud Services” as shown below. 

conf
Experience Manager Cloud Services

2. Under Dynamic Tag Management, click the + icon next to Available Configurations, as shown below.

DTM1
Add Configuration

Note:

Connection information to Adobe Target is done by using Dynamic Tag Management, as discussed in this article.

3. In the Create Configuration dialog, enter the following information:

  • Title - AEM_TARGET
  • Name - aem_target

4. Click the Create button. 

DTM2
The Create Configuration dialog

5. When you configure DTM, you need an API Token from your DTM account to successfully connect from Experience Manager to DTM. You can also test the connection from the DTM dialog by clicking Connect to DTM, as shown in this illustration. Ensure that you unclick the Include Production Code on Author checkbox.

DTMConnect2
The DTM Connection dialog

6. Select the Company, and then select the Property that you are using to track your AEM site. If you are using staging code on the author instance, deselect Include Production Code On Author. Notice that the script values for the properties on the Staging Settings tab and the Production Settings tab (make sure the self hosting checkbox is un-checked), then click OK.

Prop8
AEM_TARGET view

Configure Adobe Target

Configure Adobe Target by performing these tasks: 

1. Login to Marketing.adobe.com, Select Target, launch it.

Target1
Launch Adobe Target

2.   Go to Setup tab, Implementation, Edit mbob.js Settings.

Target2
Adobe Target

3. Locate the Client Code value and save this value for later use.

Target3
Client code value

Add the Client Code to DTM

The next step is to add the client code to DTM. Perform these tasks:

1. Open the AEM_TARGET property in DTM. 

2. Click the Overview Tab, Add Tool.

Target4
The Add Tool button in DTM

3. In the Add a Tool dialog, select Adobe Target from the Tool Type drop-down field, enter a name in the Tool Name field, and the Adobe Target client code in the Client code field. Click the Create Tool button.  

Target6
The Add a Tool dialog

In the Adobe Target Setting Page, click Save Changes. Congratulations Adobe Target Is configured.

Create a new DTM rule

The next step is to go the AEM_TARGET property in DTM. Perform these tasks: 

1. Click the Rules Tabs.

2. Click on Page Load Rules, Create a New Rule.

DTM5
Create new Rule

3. Name the Rule TSMBox

4. Click on Adobe Target and perform these sub-tasks: 

  • In the Create a Mbox Around field, specify .cq-dd-image (CSS selector where you want to target)
  • In the Mbox Name field, specify tsbanner (this can be any name but it would be used later)

5. Keep the rest of the values the same and click Save Rule.

DTM6
Specifying Target values in the new DTM rule

Create an Activity in Adobe Target

Create an Activity in Adobe Target by performing these tasks: 

1. In Target Under the Activities tab, Click Create Activity, A/B Test. Form-based.

Target7
New Activity

2. Click Next. 

3. In Experience A, under Location 1 type tsbanner [this must be same name as mentioned in DTM page-load rule’s Mbox Name.

4. Add an experience by clicking Add experience (Left column).

5. Click Refinements, Add rules. 

6. Add a query rule with the following values:

  • Query (left drop-down field)
  • In the Query parameter field, specify test
  • In the choose evualter field, select is (case senstiive). 
  • In the last field, specify 1. 

The Query here is if we have query parameter in URL with test=1 then only Target will work, it can show us experience A or B, and would decide later with its algorithm which amongst A or B is the winner.

 

Target8
Setting up an Activity Query

7. Under the Content section, select HTML Content and your HTML code there. Also select the HTML Content and add the new image source code:-

<img src=”https://helpx.adobe.com/content/dam/help/images/Marketing_Cloud/ATCE/TS2.jpg” alt=”imahe2” height=”291” width=”700”>

We have query parameter in URL with test=1 then only Target will work, it can show us experience A or B, and would decide later with its algorithm which amongst A or B is the winner.

8. Click Next.

Target9
Experience A and Experience B

9. Here all users will be targeted to Experience A and Experience B with 1-99% chances. We can configure any on them. Click NEXT.

10. Select the Primary Goal as Engagement, measure as Page Views. Click Save.

Target10
Reporting Settings

11. Click to Activate to activate the target activity.

View the Results in Experience Manager

In Experience Manager, depending upon the result, the user sees one of the following images. 

Client
Views based on Target rules

Perform these tasks:

1. Go to Geometrixx-outdoors Men’s page and add query paremeters:
Link: - http://localhost:4502/content/geometrixx-outdoors/en/men.html?test=1

Open the link in many incognito windows because the experience will have 50% chance to come up in new windows. This is the Result/Confirmation that Target is working properly.

2. Now you can see the image request of Analytics and Target is going from the page.
We can see this using Adobe Debugger tool


Report
The debugger tool

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy