Article summary

Summary Discusses how to use Activation rules (formally Dynamic Tag Management) in AEM 6.2 web pages.  
Digital Marketing Solution(s) Adobe Experience Manager 6.2
Audience Developer
Required Skills JavaScript, HTML
Version 6.2
Video https://youtu.be/OBWI6n2S_-c

Introduction

You can integrate Adobe Experience Manager 6.2 (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 analytic 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.

An Activation Rule

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 - this is a DM rule");

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.

An Activation rule invoked within an AEM web page

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

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

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.

An Activation Property

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.

Create New Rule button

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.

Setting conditions for a rule

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 - this is a DM rule");

JavaScript Editor

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.

Activation deployment options

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.

Activation Header and Footer code

Configure Experience Manager 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.  

The General Settings dialog

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

The Staging Settings dialog

To retrieve the API Token value, contact Customer Care.

To configure an Experience Manager 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. Click the upper left AEM Icon, then click on Tool icon. 

3. Click Deployment, Cloud Services

4. Under Dynamic Tag Management, click Show Configurations.

Cloud Services

5. Click Configure Now if this is the first configuraiton that you are adding.

6. Click Show Configurations and then click the + link beside Available Configurations if one or more configurations have been created.Type a title for the configuration and then click Create. 

7. In the API Token field, enter the value of the API Token property of your Dynamic Tag Management user account.

8. Click Connect to DTM. AEM authenticates with Dynamic Tag Management and retrieves the list of companies that your account is associated with.

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

Embed Activation rules in Experience Manager 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.

geometrixx-media 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. 

 

Cloud Services

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

Cloud Services dialog

In addition, you can also add the script tag (obtained from the Activation Web UI) into the AEM JSP, as shown in this illustration. 

Adding the Activation script to an AEM web page

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

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