Integrating Dynamic Tag Management with Adobe Experience Manager

Solution:
Advantages of DTM:

• Use Dynamic Tag Management web properties to track AEM sites.
• Dynamic Tag Management enables marketers to manage tags for collecting data, and distribute data across digital marketing systems.
• For example, use Dynamic Tag Management to collect usage data for your AEM website and distribute the data for analysis in Adobe Analytics or Adobe Target.

Assuming you have an author instance of AEM running, there are the three majors steps you need to perform to add the DTM code on your site via the cloud-hosted services integration:

1. Create web property in DTM
2. Configure AEM DTM Integration
3. Embed DTM code in a specific AEM site

1. CREATE DTM WEB PROPERTY
To create a web property in DTM, login to dtm.adobe.com and click on ‘Add Property check the first two options to enable approving and publishing multiple rules at once:

• Allow Multi-Rule Approvals
• Enable Selective Publish

Leave the rest to defaults. DTM is flexible enough to let you change the settings later on.

Navigate to your company page, then click Add Property.




2. Fill in the fields:

Element	Description
Name	The name of your property.
URL	The base URL of the property.
This site spans multiple domains	You can add and remove domains if you want visitor data to persist between domains.
	This setting lets you specify how you would like to track traffic moving between your associated subdomains or domains.
	Note: If you do not intend to integrate an analytics tool, this step is unnecessary and does not affect processing.

3. (Optional) Configure Advanced Settings.

Element	Description
Allow Multi-Rule Approvals	Allows multiple rules for this property to be approved at one time. (The default approval allows only single-rule approval.)
Enable Selective Publish	Specifies whether to allow users to selectively publish approved rules. (This is the default option.)
Tracking Cookie Name	Overrides the default tracking cookie name. You can customize the name that dynamic tag management uses to track your opt-out status for receiving other cookies.
Tag Timeout	Specifies how long dynamic tag management waits for a tag to fire before timing out.
Anchor Delay	Specifies how long dynamic tag management waits for tags to fire on clicked links before moving to the next page. The default value is 100 milliseconds.
	Longer delays improve tracking accuracy. Adobe recommends a delay of 500 milliseconds or less, which the user will not perceive.

Delete a web property
Delete a web property from dynamic tag management.
Note: Property removal cannot be reversed. The requestor must be an admin-level user. This request cannot be undone.
Navigate to the Overview page for the desired property.

Click Edit Property > Remove Property, then confirm the removal of the property.

2. SETUP DTM CONNECTION FROM AEM
In your AEM instance, go to Tools > Operations > Cloud > Cloud Services. Look for Dynamic Tag Management.
For adding the first configuration, click configure now

If one or more configurations are already added, Click Show configurations then go on to add a new or modify the existing one.

To create a configuration, provide an appropriate title and name (optional) and hit create.

Once a configuration is created, there are three types of settings you need to configure:
General Settings –

• API Token: AEM requires this property to authenticate with DTM. This is provided by Adobe/DTM client care.
• Company – It appears when you provide the API token and hit ‘Connect to DTM’. Simply select it from the drop-down.
• Property – Select the DTM property you created for analytics implementation on AEM
• Include Production Code on Author – It is recommended to uncheck this option. This allows you to have the staging code on Author and test the DTM rules before publishing.

Staging Settings –

• Use self-hosting – Uncheck this option. For the purpose of this blog, I am using the cloud-hosted solution, which is recommended and simplest to use.
• Header Code – If you have entered the API token, this will be auto populated with staging header code of the selected DTM property.
• Footer Code – This code is same irrespective of the DTM property you select and is pre-populated for you even before making the DTM connection.

Production Settings –
For cloud-hosted solution, these are same as the Staging settings. Just make sure, there is no ‘-staging’ suffix in JS for Header code.

NOTE: Even though, Header and Footer code for both staging and production are auto-populated once you connect to DTM but it is pretty easy to retrieve them from DTM in case you want to verify. Simply navigate to the Embed tab of your DTM property.

3. EMBED DTM CODE IN A SPECIFIC SET OF AEM WEBPAGES
Once you have configured the AEM DTM connection, it is simply a matter of selecting the right configuration from the list.
Login to AEM author instance; navigate to the site/set of pages where you want to embed the DTM code, and then right click to select Properties –

Go to Cloud Services > Add Service > Select ‘Dynamic Tag Management’
Configuration created in step 2 will be available in the drop-down. Select the configuration to embed the DTM property code to the site and hit ‘OK’ to save.

References: 

• https://helpx.adobe.com/experience-manager/6-3/sites/administering/using/dtm.html#DeploymentOptions
• https://marketing.adobe.com/resources/help/en_US/dtm/web_property.html
• https://marketing.adobe.com/resources/help/en_US/dtm/c_overview.html
• https://marketing.adobe.com/resources/help/en_US/dtm/get_started.html