{"id":5270,"date":"2018-10-01T17:01:26","date_gmt":"2018-10-01T11:31:26","guid":{"rendered":"\/?p=5270"},"modified":"2020-01-06T14:01:39","modified_gmt":"2020-01-06T08:31:39","slug":"aem-dtm-target-integration-simplified-part1","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/","title":{"rendered":"AEM-DTM-Target Integration. Simplified! – Part1"},"content":{"rendered":"

AEM-DTM-Target integration takes advantage of the tremendous extensibility of AEM. The primary aim is to integrate AEM with Adobe Target to enable the creation and delivery of personalized experiences<\/u><\/a> for specific audiences. However, using DTM as a technology bridge will facilitate the integration of AEM with Target.<\/p>\n

Let\u2019s start by introducing the three solutions in Adobe Experience Cloud.<\/p>\n

    \n
  1. AEM<\/b> \u2013 Adobe Experience Manager (AEM) is a web content management system with powerful features to manage, organize and deliver enterprise content with best-in-class experience. AEM came to Adobe with the acquisition of Day Software in 2010, earlier it was known as Day CQ (Communique). For this article, we are using AEM 6.3 version.<\/li>\n
  2. DTM<\/b> \u2013 Dynamic Tag Management(DTM) is a solution that offers tools to integrate Adobe Experience Cloud solutions as well as third-party solutions like Google Analytics etc. DTM used to be known as \u2018Satellite\u2019 before Adobe acquired it in 2013.<\/li>\n
  3. Target<\/b> \u2013 Adobe Target is a personalization solution of the Adobe Experience Cloud suite, which delivers the personalization of content based on different type rules. Target came to Adobe with the acquisition of Omniture in 2009. In this article, we are going to demonstrate the Target VEC (Visual Enhanced Composer) capabilities.<\/li>\n<\/ol>\n
    Architecture<\/b>:<\/b><\/h5>\n

    <\/b>AEM can be integrated with Target directly without using DTM. However, it\u2019s recommended to use DTM in between due to listed benefits:<\/p>\n

      \n
    1. Efficiency<\/strong> \u2013DTM\u00a0allows you to optimise the loading time of multiple\u00a0tools\u00a0and marketing tags.<\/li>\n
    2. Reduced Cost<\/strong> \u2013\u00a0Minimise the development cost as once Data Layer is in place multiple solution can leverage the same.<\/li>\n
    3. Flexibility<\/strong> \u2013 DTM allows you to quickly test and optimise tags without being bound by release cycles.<\/li>\n
    4. Multiple Sites<\/strong> \u2013 Using DTM you can manage multiple sites from the single console.<\/li>\n<\/ol>\n

      AEM is usually connected with DTM using AEM Cloud Services and Target is connected to DTM using Experience Cloud configuration. Here is the relevant diagram for AEM-DTM-Target integration.<\/p>\n

      \"\"<\/p>\n

       <\/p>\n

      Request Flow for AEM-DTM-Target Integration:<\/b><\/h5>\n

      How a request flows from AEM to Target via DTM:<\/p>\n

        \n
      1. AEM starts rendering a site page.<\/li>\n
      2. Site has a DTM script attached along with Data Layer. DTM script is associated with a relevant\u00a0property.\u00a0Data Layer discussed below.<\/li>\n
      3. DTM Property has Target added to it, which raises\u00a0a request to Target and share required data.<\/li>\n
      4. Target pushes its response back to AEM instance using\u00a0mbox\u00a0js.\u00a0Note: Now mbox.js has a newer and updated alternative which is known as at.js<\/li>\n
      5. AEM\u00a0page got\u00a0Target response\u00a0which gets rendered on the page.\u00a0\u00a0\u00a0\u00a0\u00a0<\/b><\/li>\n<\/ol>\n
        \"request
        Fig: Diagram of the request flow in AEM-DTM-Target Integration.<\/figcaption><\/figure>\n
        Data Layer:<\/b><\/h5>\n

        As you might have noticed in request flow that AEM site has got the DTM Script and Data Layer associated. Data layer is a W3C standard to store values in javascript object. Data layer is created at AEM and consumed by DTM to get the required data from AEM instance and push to any solution like Analytics, Target, etc. We are going to create a sample data layer below in DTM Rules section.<\/p>\n

        DTM Setup:<\/b><\/h5>\n

        To get the access of DTM, one has to raise the request with Adobe Client Care with proper information. Once the access is granted, go to https:\/\/dtm.adobe.com<\/a>\u00a0and login with the credentials provisioned by Client Care.<\/p>\n

        To start with DTM, create a new property with the URL of the website. Thereafter add the required tools in the property like Adobe Analytics or Adobe Target. In AEM configuration, we are going to use same DTM Property\u00a0in order to\u00a0integrate the AEM with Analytics,\u00a0Target, etc.<\/p>\n

        For this article, we are going to add Adobe Target as we need to carry out AEM-DTM-Target integration. To do this, we need Client Code which will be provided by the Client Care or alternatively you can try adding using Experience Cloud membership.<\/p>\n

         <\/p>\n

        \"DTM
        Fig: DTM property creation.<\/figcaption><\/figure>\n
        \"adding
        Fig: Addition of relevant tool or solution to DTM property.<\/figcaption><\/figure>\n
        \"Adding
        Fig: Adding Target as a tool in DTM Property.<\/figcaption><\/figure>\n
        DTM Rules:<\/b><\/h5>\n

        In above steps you have created a new DTM property, added Target as a tool in the same property. Now you need to know how to play with data, DTM uses data layer to get the data from AEM instance. For example, using Target you need to render the homepage of your website based on the browser, location, devices, etc or you can also get user-specific details like age, gender, interests, etc. Hence you need to get all such information from AEM in data layer. For example, here is the data layer:
        \n<\/i><\/p>\n

           var dataLayer = {}\r\n   dataLayer.page = {\r\n        pageInfo: {\r\n            pageName: document.title,\r\n            url: document.location\r\n        }\r\n   }<\/pre>\n
        Once the data-layer is all set,\u00a0fetch the values from data layer and set it in DTM data elements.\u00a0We use\u00a0these data elements in different types of rules.\u00a0DTM has got three type of rules:
        \n1. Event Based Rule<\/strong>\u00a0\u2013 Rules executed when visitor interacts with on-page elements.
        \n2. Page Load Rule<\/strong>\u00a0\u2013 Rules executed when visitor loads the page.
        \n3. Direct Call Rule<\/strong>\u00a0\u2013 Rules executed when you want to tell DTM to do something specifically.<\/p>\n
         <\/p>\n
         <\/p>\n
        \"DTM<\/p>\n
        Fig: DTM Rules<\/p>\n
        Creating a data element using data layer is quite straight forward.\u00a0<\/span><\/span>Y<\/span><\/span>ou can see the below screenshot, he<\/span><\/span>re<\/span><\/span>\u00a0we have create<\/span><\/span>d a new data element Page Title which is mapped with\u00a0<\/span><\/span>pageName<\/span><\/span>\u00a0field of data layer<\/span><\/span>\u00a0created above<\/span><\/span>.\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n
        \"data<\/p>\n
        Fig: Data Elements<\/p>\n
        DTM Workflow:<\/b><\/h5>\n
        Every property in DTM follows a standard workflow. Workflow has got three steps:<\/p>\n
          \n
        1. Creation of property and rules.<\/li>\n
        2. Approve the newly added and modified rules.<\/li>\n
        3. Publish the property to make the changes live.<\/li>\n<\/ol>\n
          AEM-DTM Integration:<\/b>
          \nThere are two ways to integrate DTM with AEM:<\/h5>\n
            \n
          1. Using Cloud Services<\/li>\n
          2. Embed JS<\/li>\n<\/ol>\n
              \n
            1. Using Cloud Services:<\/b><\/li>\n<\/ol>\n
              Using AEM admin console, go to Tools >\u00a0Deployment\u00a0> Cloud Services. Find\u00a0\u2018Dynamic Tag Management\u2019\u00a0and click on\u00a0\u2018Configure now\u2019.\u00a0Provide a Title and Name of the configuration keeping Parent Configuration field intact.\u00a0Enter the details as below:<\/p>\n\n\n\n\n\n\n\n
              Property<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
              API Token<\/td>\nThe value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.<\/td>\n<\/tr>\n
              Company<\/td>\nThe company with which your login ID is associated.<\/td>\n<\/tr>\n
              Property<\/td>\nThe name of the Web Property that you created for managing the tags for your AEM site.<\/td>\n<\/tr>\n
              Include Production Code on Author<\/td>\nSelect this option to cause the AEM author and publish instances to use the production version of the Dynamic Tag Management libraries.<\/p>\n
              When this option is not selected, the Staging Settings apply to the author instance, and the Production Settings apply to the publish instance.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
              There is an option to self-host the DTM libraries which means AEM will host the DTM libraries if this option is checked, if we want to use the libraries from the cloud then we should uncheck this option. Here we are using later one.<\/p>\n
                \n
              1. <\/b>Embed JS<\/b>:<\/b><\/li>\n<\/ol>\n
                Go to the DTM Console using\u00a0https:\/\/dtm.adobe.com<\/a>\u00a0and click on the relevant property.
                \nGo to Embed tab,\u00a0copy the Header\u00a0and Footer staging script, go to the\u00a0AEM\u00a0author instance\u00a0and copy the script in header and footer of the website respectively. Similarly, copy the header and footer production script and put in the AEM publish instance.<\/p>\n
                Let\u2019s say you have integrated\u00a0DTM with AEM using\u00a0one of the\u00a0above-mentioned\u00a0method, assign the DTM config to the root of your site using AEM Sites console.<\/p>\n
                DTM<\/b>-AEM<\/b>\u00a0Connection Test:<\/b><\/h5>\n
                Now you need to test whether DTM script is getting loaded with your website. In browser, try to open any page of your website where you have assigned the DTM config and open browser console. If \u201c_satellite\u201d object exists then it means DTM script is getting loaded. You can also try retrieving the data elements that you have created in DTM using \u201c_satellite.dataElements\u201d. If you are able to find all the details, you are good to go.<\/p>\n
                If _satellite object doesn\u2019t exist, it means page doesn\u2019t have the DTM header\/footer script. You can view the source of the page to confirm the same.<\/p>\n
                 <\/p>\n
                \"satellite<\/p>\n
                Fig: Satellite Object<\/p>\n
                 <\/p>\n
                \"\"<\/p>\n
                Fig: Satellite Data Elements<\/p>\n
                 <\/p>\n
                 <\/p>\n
                DTM Debugging Tools:<\/b><\/h5>\n
                In DTM we play with different types of scenarios and scripts, hence we might need to check if the scripts are working fine and order they are getting executed.
                \nThere are a couple of browser plugins which proved to be quite useful for debugging.<\/p>\n
                Launch Switch:<\/b><\/h5>\n
                It enables the logging in console and as well as we can test the changes using staging script, before making the changes live.<\/p>\n
                There are two\u00a0button\u00a0available\u00a0on the plugin console. Tweaking them will do the following:
                \nDebug<\/b>: It enables the logging of the rules, you\u00a0can also add the logs using _satellite.notify(\u201cinfo\u201d).
                \nStaging<\/b>: It will enable the changes you have made in property which you have not published. This is used for testing the changes before making them live.<\/p>\n
                Download\u00a0URL\u00a0for Chrome:\u00a0https:\/\/chrome.google.com\/webstore\/detail\/launch-and-dtm-switch\/nlgdemkdapolikbjimjajpmonpbpmipk<\/a><\/p>\n
                \"launch
                Fig: Launch Switch Plugin.<\/figcaption><\/figure>\n
                 <\/p>\n
                Tagtician:<\/strong><\/h5>\n
                It <\/span><\/span>shows the detailed information about all the DTM Rules<\/span><\/span>.<\/span><\/span>\u00a0<\/span>
                <\/span>Download\u00a0<\/span><\/span>URL<\/span><\/span>\u00a0Chrome<\/span><\/span>:\u00a0<\/span><\/span>                https:\/\/chrome.google.com\/webstore\/detail\/tagtician-for-adobe-dtm\/hiaoiehpkillodoeillmodjcadmfmcbg<\/span><\/span><\/a>\u00a0<\/span><\/span>\u00a0<\/span><\/span><\/p>\n
                \"Tagtician
                Fig: All the DTM rules detailed in Tagtician.<\/figcaption><\/figure>\n
                Refe<\/b>rence:<\/b><\/h5>\n
                Adobe DTM Documentation: https:\/\/marketing.adobe.com\/resources\/help\/en_US\/dtm\/<\/a><\/p>\n
                This is the first part of \u201cAEM-DTM-Target Integration. Simplified!\u201d where you have learned how to setup DTM, create DTM property and data elements, integrate DTM with AEM and debug DTM. In Part 2, you will learn how to create different types of rules in DTM, use these rules to share the information to Target, Target activities, Target audience and how to use Target VEC (Visual Enhanced Composer) along with the Target debugging tweaks.<\/p>\n","protected":false},"excerpt":{"rendered":"
                AEM-DTM-Target integration takes advantage of the tremendous extensibility of AEM. The primary aim is to integrate AEM with Adobe Target to enable the creation and delivery of personalized experiences for specific audiences. However, using DTM as a technology bridge will facilitate the integration of AEM with Target. Let\u2019s start by introducing the three solutions in … Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":7280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[66],"tags":[271,1749,101,1754],"yst_prominent_words":[985,534,1753,1597,867,1596,1592,1594,1755,1603,1601,1593,986,1600,1220,1595,1598,1751,1750,1752],"acf":[],"yoast_head":"\nAEM-DTM-Target Integration. Simplified! - Part1 - Argil DX<\/title>\n<meta name=\"description\" content=\"The nuances of Adobe AEM-DTM-Target integration is explained in this article. Learn how to setup DTM, create\u00a0DTM property and data elements,\u00a0and debug it.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AEM-DTM-Target Integration. Simplified! - Part1 - Argil DX\" \/>\n<meta property=\"og:description\" content=\"The nuances of Adobe AEM-DTM-Target integration is explained in this article. Learn how to setup DTM, create\u00a0DTM property and data elements,\u00a0and debug it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/\" \/>\n<meta property=\"og:site_name\" content=\"Argil DX\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-01T11:31:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-06T08:31:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/AEM-DTM-Target-Integration.png\" \/>\n\t<meta property=\"og:image:width\" content=\"431\" \/>\n\t<meta property=\"og:image:height\" content=\"233\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.argildx.us\/#website\",\"url\":\"https:\/\/www.argildx.us\/\",\"name\":\"Argil DX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.argildx.us\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/10\/AEM-DTM-Target-Integration.png\",\"width\":431,\"height\":233,\"caption\":\"AEM-DTM Target Integration\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/#webpage\",\"url\":\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/\",\"name\":\"AEM-DTM-Target Integration. Simplified! - Part1 - Argil DX\",\"isPartOf\":{\"@id\":\"https:\/\/www.argildx.us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/#primaryimage\"},\"datePublished\":\"2018-10-01T11:31:26+00:00\",\"dateModified\":\"2020-01-06T08:31:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/969a377a8d70cf16bc97973f2e4b29f9\"},\"description\":\"The nuances of Adobe AEM-DTM-Target integration is explained in this article. Learn how to setup DTM, create\\u00a0DTM property and data elements,\\u00a0and debug it.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.argildx.us\/technology\/aem-dtm-target-integration-simplified-part1\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/969a377a8d70cf16bc97973f2e4b29f9\",\"name\":\"Ankur Mittal\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b53770858509aaced3853b72ddcab92c?s=96&d=mm&r=g\",\"caption\":\"Ankur Mittal\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/5270"}],"collection":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/comments?post=5270"}],"version-history":[{"count":0,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/5270\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media\/7280"}],"wp:attachment":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media?parent=5270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/categories?post=5270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/tags?post=5270"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/yst_prominent_words?post=5270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}