Article summary

Summary
Discusses how to integrate AEM with DTM, Target, Adobe Analytics. 
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ), Adobe Analytics, Target, DTM
Audience
Developer (beginner - intermediate)
Required Skills
JavaScript, HTML
Tested On Adobe Experience Manager 6.2
 

Note:

To follow along with this article, you require accounts for these Digital Marketing products: 

  • AEM Instances (Author At least)
  • DTM User login
  • Adobe Analytics User login
  • Adobe Target User login
     

Introduction

You can create Adobe Experience Manager (AEM) solutions that integrate with these Ditigal Marketing products: Adobe Analytics, Adobe Target, and Dynamic Tag Manager (DTM).

Adobe Analytics is the industry-leading solution that lets digital marketers analyze and optimize integrated data from all online initiatives across multiple marketing channels. It provides marketers with actionable, real-time web analytics intelligence about digital strategies and marketing initiatives.

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. In this article, personalization of the landing page is driven by Target. AEM will import Audiences from Target so that they can be used right within AEM to create activities to personalize our page. AEM then synchronizes the activity to Target.

DTM is a Digital Marketing cloud service that allows a marketer to manage Adobe and third-party tags used for tracking or other analytic purposes. It is done through client-side scripting that injects tag related code throughout the pages of the site.

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, Analytics, Target, and DTM. 

The following illustration provides an overview some of the Marketing Cloud solutions (AEM, DTM, Analytics, and Target) used in this article.

OverView
Overview of the Digital Marketing Solutions

Create the DTM rule

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 create a DTM rule, perform these steps:

1. Log into DTM at http://dtm.adobe.com.

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. Complete the property form using these values:

  • Name  - AEM_TARGET_ANALYTICS_VIA_DTM
  • URL- http://localhost:4502

 

DTMProp2
Create Property View

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

5. The new property requires approval from an Admin. Once approved it will go to Active state, which means you’re now ready to start configuring the Property.

5. From the Web Properties tab, click on the AEM property, as shown here.

DTM_WebProps
DTM Setup

6. Click the Rules tab, then 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. 

RulesA
Rules tab

7. Name the rule AlertJS. Also select Onload for the Trigger rule at drop-down, as shown in the following illustration. 

RulesB
Defining a rule named AlertJS

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

9 From the editor popup, enter HelloDTM for the Tag Name and enter the following code:

alert("DTM Activation");

10. Click Save Code, Save Rule.

Activate the AlertJS rule

After you create the AlertJS rule, you have to activate it before you can use it. To activate the rule, select Activate Rule from the Actions drop-down as shown in the following illustration. Once you perform this task, you can use it within an AEM web page.

ActivateRUle
Activate the DTM Rule

Note:

You need administrative privileges to activate 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.

Akamai
Akamai DTM options

Copy the Staging Embed Code for Header and Footer code. For example:

<script src="//assets.adobedtm.com/7c68bab3ce5325ab4d473d0d2e2636009ea4e676/satelliteLib-be13ff3f85e6df5cdaaa1704cbf6be4813f42ae8-staging.js"></script>

This is the script that is referenced when you configure AEM (in the next step). This script value is required for this rule to be used in an AEM web page. 

FooterHeaderCode
DTM Header and Footer code

Note:

When you configure AEM to connect to DTM, you will notice that the Staging Header/Footer script is added in staging tab of AEM and the production Header/Footer script is added in production tab.
 

Configure AEM to use DTM Rules

Digital Marketing cloud services are the AEM mechanism to configure integrations between AEM and cloud services such as Adobe Marketing Cloud , Adobe Creative Cloud or third-party cloud services. Cloud Services typically hold the parameters for connecting with an external service such as credentials or API endpoints. This section describes how to configure connections to DTM. 

CloudServices
Adobe Cloud Services

Note:

Connection information to Target and Adobe Analytics is done by using DTM, as discussed in this article. 

Setup a connection to DTM by using Cloud Services.

DTMSetup
Dynamic Tag Management using Cloud Services

When setting up a DTM connection within AEM, you have to specify a title of the connection, as shown below. 

AEM-DTM-Title
The title of the AEM/DTM connection

When you configure DTM, you need an API Token from your DTM account to successfully connect from AEM 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

Note:

Notice in the Property drop-down, the AEM_TARGET_ANALYTICS_VIA_DTM is displayed. This is the Property that you created in the previous section. 

You can retrieve the API Token from DTM by clicking on Account Settings. The API Token value is located near the bottom of the screen, as shown in this illustration.  

APIToken
API token required to connect to DTM from AEM

Note:

If you have issues with retrieving your API Token, please contact Customer Care.

To configure an AEM connection to DTM, perform these steps.

  1. From the side rail in AEM 6.2, click the Hammer icon, Deployment, and then Cloud Services.
  2. Under Dynamic Tag Management, click Show Configurations.
  3. Click Configure Now if this is the first configuration. Click Show Configurations and then click the + link beside Available Configurations if one or more configurations have been created.
  4. Type AEM-DTM-Connection as the title for the configuration and then click Create.
  5. In the API Token field, enter the value of the API Token property of your Dynamic Tag Management user account.
  6. Click Connect to DTM. AEM authenticates with Dynamic Tag Management and retrieves the list of companies that your account is associated with.
  7. Select the Company, and then select the Property (AEM_TARGET_ANALYTICS_VIA_DTM).
    If you are using staging code on the author instance, deselect Include Production Code On Author.
  8. Provide 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.

Note:

At this point, you have created a connection from AEM to DTM named AEM-DTM-Connection. This connection references the DTM Property that you created named AEM_TARGET_ANALYTICS_VIA_DTM.

Embed DTM rules in AEM web pages

Embed DTM rules into an AEM web page by using Page properties that belong to the AEM site. In this example, embed DTM rules into the Geometrix Media site. First, login to the AEM author instance and go to

http://localhost:4502/siteadmin#/content/geometrixx-media

as displayed in this illustration.

GeoMedia
The Geometrixx Media example site

Right click on the page (in this example, English) and select properties. Next, select the Cloud Services tab. Then click the Add Service button. This brings up a list of Digital Marketing Cloud Services, as shown in this illustration.

cloudservices2
A list of Ditigal Marketing Cloud Services

Select Dynamic Tag Management and click Ok. In the Dynamic Tag Management drop-down, select the AEM/DTM connection that you setup (AEM-DTM-Connection). Now rules associated with this configuration will show up in the AEM site. 

AEM-DTM-SiteAdmin
Cloud Services dialog

Note:

In this example, page inheritance was broken to configure DTM. 

Now rules defined in DTM appears in the Geometrixx Media sample site. When you open a geometrixx-media page, an alert box is displayed, as shown in the following illustration. 

AEMDTMTest
An AEM page displaying a message box based on a DTM rule

Setup Adobe Target

Setup  Target by performing these steps:

1. Login to Marketing Cloud at marketing.adobe.com.

2. Select Target and launch it, as shown in the following illustration. 

 

TargetApp
Launch Target

3.  Click Setup in the top menu. 

SetupTarget

4. Click Implementation from the side rail.

5. Click Edit mbob.js Settings. Notice the client code value shown in the following illustration. Copy this to notepad (or another text editor) as this value will be used in DTM at a later step.

TArgetClientCode
Target client code

Integrate Target into DTM Rules

You can integrate Target into the DTM rule that you created. Perform these steps: 

1. Go to the AEM_TARGET_ANALYTICS_VIA_DTM property that you created in DTM.

2. From the Overview, click Add one now?

DTMTools
Add Tools

3. Select Adobe Target.

4. Enter the following information in the Adobe Target Setting Page: 

  • Tool Type - Adobe Target
  • Tool Name - Adobe Target
  • Library retrieval method - automatic
  • Client code retrieval method - manual
  • Client code - enter the client code from Target

5. Click Save Changes.

6. Activate and publish the new tool.

Congratulations Target is configured through use of DTM.

Create the Target Activity

Activities enable you to test page designs and target content to specific audiences. Create an Activity in Adobe Target by performing these steps.

1. Click Activities from the menu.

TargetActivies
Activites tab

2. Click Create Activity, A/B Test, Form-based.

3. Under Experience A, Select target-global-mbox.

TargetBOX1
Adobe target-global-mbox

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

6. Go to Refinements,  Add rules.

7. Add a query rule, as mentioned in the image below. The query here specifies that if there is a query parameter in the givenURL with K=1, then Target responds. It displays either experience A or B based on the Target algorithm.
 

TargetBox2
Target Query Rules

8. Under the Content section, select HTML Content and add your HTML code there.

9. Click NEXT.
 

TargetBox3
Target settings

Note:

Here all users will be targeted to Experience A and Experience B with 50-50% chances. You can configure any of them.

10. Click Next

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

TargetBox4
Target Configuration Settings

12. Click Activate to activate the target activity. You will see the following message. 

TargetBox5
Activating the Target activity

Test the Target Activity in AEM

Go to Geometrixx-outdoors English page (where you setup DTM integration) and add query parameters:

http://localhost:4502/content/geometrixx-outdoors/en.html?test=1

Open the link in some 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.

AEMTarget
Target results in AEM

Integrate Adobe Analytics

You can integrate Adobe Analytics into this Digital Marketing Cloud example. To integrate Adobe Analytics, perform these steps: 

1. Login to Adobe Analytics at sc.omniture.com.

2. Go to Admin, User Management, Users, Search for you name, Edit the profile.

3. Now search for Web Service Credentials. These are required for setting up Analytics by using DTM. Save User name and Shared Secret.

AnBox1
Analytics User Manager Settings

Note:

Under Access, Make sure Web Service Access is added (only then are credentials visible).

Note:

Under Access,ensure Web Service Access is added (only then credentials are visible).

Integrate Analytics into DTM

Integrate Adobe Analytics into DTM by performing these steps: 

1. Go to the AEM_TARGET_ANALYTICS_VIA_DTM property in DTM.

2. Click Overview, Add Tool.

3. Add Web User Credentials that you saved in Adobe Analytics.

AnBox2
Analytics settings in DTM

4. Click Create tool.

Note:

Web Username is different than Adobe Analytics User Name. Use the username and Shared Secret which was saved from Analytics Step 2. Use these values here.

5. Add the Report Suit where you would like the data to be present. Add for both Production and Staging.
In General Section add:

  • Char Set:  UTF-8
  • Currency code:  USD

6. In the Library Management section:

  •  Code Configuration:  Managed by Adobe
     
anbox4
DTM settings

7. Click Save Changes.

Note:

This is done. Analytics is also configured here. Now you can see the reporting of “Geometrixx page” in adobe analytics under the the reporting suit mentioned. It usually take some time to get data to the reports (1-2 hrs).

Test using AEM

The final task is to test everything in AEM.  Go to geometrixx-media  English page and specify the following query:

http://localhost:4502/content/geometrixx-media/en.html?test=1

You can see the image request of Analytics and Target is going from the page.
You can see this using the Adobe Debugger tool.

ANBox99
Output of AEM Debug tool

See also

Congratulations, you have configured Adobe Analytics and Target by using DTM. Then you used DTM within AEM. Please refer to the
AEM community page for other articles that discuss how to build AEM services/applications.

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