Article summary

Summary
Discusses how to use Activation rules (formally Dynamic Tag Management) in AEM 6.1 web pages. 
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ), Activation
Audience
Developer (intermediate)
Required Skills
JavaScript, HTML
Tested On Adobe Experience Manager 6.1
 

Introduction

You can integrate Adobe Experience Manager (AEM) with Adobe Marketing Cloud Activation Core Services (formerly named Dynamic Tag Management). Activation is an Adobe Marketing Cloud Core Service that allows a digital marketer to manage Adobe and third-party tags used for tracking or other analytics purposes. It is done through client-side scripting that injects tag related code throughout the pages of the site. 

You define rules in the Activation web client, as shown in this illustration. 

aemchromeprop

The previous illustration shows an Activation rule named TestOnLoadChrome. This rule is basically an event handler that is fired when a web page page is opened. The condition is defined so that this rule fires only when the browser is Chrome. The logic that is defined is simply JavaScript that creates a pop-up message.

alert("Hello Chrome"); 

Once you define and approve Activation rules using the Activation web client, you can embed these rules into AEM web pages. When this rule is embedded into an AEM web page, this rule is fired when an AEM web page is opened in Chrome, as shown in this illustration. 

 

webAEM

This development article walks you through these tasks:

  • how to defines rules using the Activation web client
  • how to set-up an Activation connection from within AEM
  • how to embed Activation rules in AEM web pages

Note:

To follow along with this development article, you need a Marketing Cloud Account.

Note:

To learn more about Activation (formally Dynamic Tag Management), see Dynamic Tag Management Product Documentation

Note:

In this artilce, a cloud-hosted solution is used. For more information, see https://docs.adobe.com/docs/en/aem/6-1/administer/integration/marketing-cloud/dtm.html.

Create an Activation Rule

Activation is a rule-based system. It looks for 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 what is 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 Activation and use them within AEM web pages. In this development article, an page load rule is created that is fired when a page is opened and the browser is Chrome. JavaScript is fired that displays an alert message.  For more information, see Rules

Create the OnLoadChrome rule

To create an Activation rule, perform these tasks:

1. Log into Activation 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.

3. Complete the Property form then click Create Property. The required fields are Name and
URL. Name the Property AEM and specify the URL to the AEM server. 

4. 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. 

webprops

6. 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. 

AEMRules

7. Name the Activation rule TestOnLoadChome.

8. Under the Conditions section, select Onload from the Trigger rule at drop-down. Then select Browser from the Criteria drop‐down list then select Add Criteria. Once selected, check the Chrome option.

conditions

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

10. From the editor popup, enter Hello Chrome for the Tag Name and enter the following code:

alert(“Hello Chrome”);

JavaDTM

11. Click on Save Code.


12. Click on Save Rule.
 

Activate the OnChromeLoad rule

After you create the OnLoadChrome 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 OnLoadChrome rule. Once you perform this task,  you can use it within an AEM web page. 

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. 

deploymentDTM

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

 <script src="//assets.adobedtm.com/7c68bab3ce5325ab4d473d0d2e2636009ea4e676/satelliteLib-3437b563f95b966be3b97b58308c7814dd39a05b-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. 

header

Configure AEM to use Activation

Setup an AEM cloud configuration connection to Activation. To connect from AEM to Activation, 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.

To connect to Activation, you require an Activation API token value that is specific to your Activation account, as shown in this illustration. 

Settings

In the Staging Settings and Production Settings tab, enter the required values, as shown here (ensure that the self hosting checkbox is un-checked).

 

stateSettings

To retrieve the API Token value, contact Customer Care.

Then click on click on Account Settings. The API Token value is located near the bottom of the screen, as shown in this illustration. 

APIToken

To configure an AEM connection to Activation, perform these tasks. 

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. From the rail, select Tools, Operations, Cloud, Cloud Services.
  3. Under Dynamic Tag Management, click Show Configurations.
  4. Click Configure Now if this is the first configuraiton that you are adding.Click Show Configurations and then click the + link beside Available Configurations if one or more configurations have been created.
  5. Type a title for the configuration and then click Create. 
  6. In the API Token field, enter the value of the API Token property of your Dynamic Tag Management user account.
  7. Click Connect to DTM. AEM authenticates with Dynamic Tag Management and retrieves the list of companies that your account is associated with.
  8. Select the Company, and then select the Property that you are using to track your AEM site.
  9. If you are using staging code on the author instance, deselect Include Production Code On Author.
  10. 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.

 

Embed Activation rules in AEM web pages

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

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

as showin in this illustration. 

 

mediaAEM

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. 

 

DTM11

Select Dynamic Tag Management and click Ok. In the Dynamic Tag Management drop-down control, select the AEM configuration that you setup. Now rules associated with this configuration will show up in the AEM site. (In this example, the name of the configuration is ScottTest.)  

scottTestDTM

Now rules defined in Activation appears in the Geometrixx Media sample site (as shown in the illustration at the start of this article). When you open a page in Chrome, an alert box is displayed. 

See also

Congratulations, you have just used Activation rules in AEM web pages. 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