This blog­post guides you through the steps to enable the DTM (http://​dtm​.adobe​.com) inte­gra­tion on your cus­tom tem­plates.

If you don’t have an account yet for DTM, then you can request that here: https://​dtm​.adobe​.com/​r​e​q​u​e​s​t​_​a​c​c​ess

In this blog­post I assume you have a DTM-account that we can use.

All the sam­ples use the HTML Tem­plate Lan­guage (HTL), as this is the pre­ferred and rec­om­mend­ed serv­er-side tem­plate sys­tem for HTML in AEM6.

Let’s get started

For the DTM-inte­gra­tion to work you need to add the cloud ser­vices in your head-sec­tion as well as at the end of your body, just before the clos­ing body-tag.

head.html

<!--/** needed for the DTM integration **/-->
<meta data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap></meta>

body.html

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

It is always good/handy to have the ref­er­ences to the cloud­ser­vices in your tem­plate, because it enables you to use the cloud­ser­vices with­in AEM.

CloudService-setup

For you to use the DTM-cloud­ser­vice you need to know your DTM API-token. You can ask Adobe Client Care for your token by email­ing clientcare@​adobe.​com.

Cloudservice setup in AEM

Now in AEM go to the cloud­ser­vices Tools -> Oper­a­tions ->Cloud -> Cloud Ser­vices ( /libs/cq/core/content/tools/cloudservices.html).

Under the sec­tion Adobe Mar­ket­ing Cloud you can con­fig­ure your DTM con­nec­tion.

DTM cloudservice

When you select the con­fig­ure now option, you can add a DTM-con­fig­u­ra­tion. As you can see you need the DTM API token, this is explained in the pre­vi­ous sec­tion in this post.

1410594615604

Enter your API token, and click on Con­nect to DTM. This will cre­ate the con­nec­tion and load all of your avail­able sites into AEM.

1410594835932

In both the stag­ing and pro­duc­tion set­tings I have dis­abled the ‘self host­ing’ option. This way I am using the host­ed-option of DTM, this is the most sim­ple set­up to start with.

Self hosting disabled

After this, you can click ‘ok’ to save your con­fig­u­ra­tion.

Troubleshooting

When you use a brand new DTM account with AEM6, so you are able to get this error-mes­sage: “Could not save con­fig­u­ra­tion on the DTM serv­er.”

To over­come this error, we must enable the “Library Down­load” option inside the “Embed” tab of DTM.

You can just enter some dum­my val­ues to enable this option, in the end we only do this to be able to save the cloud­ser­vice-con­fig­u­ra­tion in AEM.

DTM library download

Configure the cloudservice to your content-tree

Now the last step is to enable the cloud­ser­vice con­fig­u­ra­tion of your con­tent tree to point to the DTM-cloud­ser­vice.

This is done via the cloud­ser­vice-tab of the page-prop­er­ties, as shown below.

Screen Shot 2015-03-15 at 1.29.08 PM

Done!

When you have com­plet­ed this, then you have com­plet­ed the AEM-DTM inte­gra­tion of your web­site, and you can lever­age the pow­er of DTM onto your web­pages.

When you look in HTML-source you will find the ref­er­ences to the DTM-host­ed libraries.

//assets.adobedtm.com/1db1059f962be25/satelliteLib-be4d9175c8999993c5e12e0ec503e5.js

and some­thing like this near the clos­ing body-tag:

<div class="cloudservice dtm">
    _satellite.pageBottom();
</div>

References:

AEM-DTM inte­gra­tion

DTM guide

@heervisscher