DTM Integration with AEM

This article covers how to integrate dynamic tag manager with AEM, the DTM is a tag management system that allows marketing people or agencies to quickly create and publish tags without depending on any JavaScript developer, with the help of dynamic tag manager you can connect to Adobe Analytics or google analytics or some other third party analytics server

Without DTM, if you want to track page views or clicks of particular button then you need to inject small piece of JavaScript code  while developing page, but the problem is in future if you want to change then you need to dependent on JavaScript developer

I am not going to cover much about DTM out here,the concept is almost same for DTM and Google Tag Manager so,  I would recommend you to read this article Google Tag Manager, here I am going to cover how to connect to DTM  using Adobe Experience Manager and how to track page views using data layer objects

Cloud Service Configuration

In the author instance go to the Tools -> Operations -> Cloud -> Cloud Service

Click on Dynamic Tag Management and click on configure now

The below values are used to authenticate to the Digital Marketing cloud and pull in the correct values to be used when configuring frameworks.

dtmimage

You must enter token in the API Token field and this should be provided by your client or if you have access you can get it by logging into DTM and by clicking on Account Settings, the API Token is located near the bottom of the page, then  click on “Connect to DTM” to make a connection to DTM server

The company and property values will be populated automatically, based on the provided values, the content author or admin must select those in respective drop-down list

In the stag­ing and pro­duc­tion set­tings use the “self hosting options”

Once you click on “Ok “button a node, based on the DTM Configuration will be created at /etc/cloudservices/dynamictagmanagement/keysandstrokes. This node will hold the DTM configuration and it  contains 3 configuration values:

  • Company
  • Property
  • API Token

Include Cloud Services Configuration

We must include DTM related servicelibs and service components in the head.html and body.html of the templates

Update head.html

<meta data-sly-include=”/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp” data-sly-unwrap></meta>

Update body.html

<div data-sly-resource=”${ ‘cloudservices’ @ resourceType=’cq/cloudserviceconfigs/components/servicecomponents’}”></div></body>

Once the configuration is completed then the next step is go to the page properties and select the cloud services tab and choose the keysandstrokes account which was already created

Validate settings

In the publish mode you must see below settings in the view source of the configured page

//assets.adobedtm.com/1sdaddwe42345/satelliteLib-be4d9175c8999993c5e12e0ada2e31321.js

<div class=“cloud­ser­vice dtm”>
_satellite.pageBottom();
</div>

Track Page Views

We need to call below json object on load of the page , from dtm dashboard side we need to create a separate page load rule  called CQ_Analytics.PageDataMgr.Data.pageName

You can test this by setting up Adobe Debugger Tool