TL4: Integrating Experience Manager with Adobe Analytics, Target and DTM

Transcription

1 TL4: Integrating Experience Manager with Adobe Analytics, Target and DTM TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 1

2 Table of Contents Lab Overview... 4 Objectives... 4 Lesson 1 Start your engines... 5 Objective... 5 Task Start your AEM instances... 5 What solutions will we use?... 7 Adobe Experience Manager... 7 Core Services... 8 Adobe Target... 8 Adobe Analytics... 8 Lesson 2 - Review setup... 9 What are Cloud Services... 9 Objective... 9 Task Login to AEM... 9 Task Review DTM cloud service Task Find and open landing page Task Verify DTM on landing page Task ReOpen the landing page Optional Task Review Cloud Services Lesson 3 Inspect Context Hub Objective What is Context Hub Task Inspect Context Hub Optional Task Inspect Context Hub Donation-store configuration Optional Task Inspect Context Hub include Lesson 4 Setup Marketing Cloud ID and Target Objective Task Login to DTM Task Setup Marketing Cloud ID Service Task Setup Adobe Target Tool TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 2

3 Lesson 5 Build an activity Objective Task Create new activity Lesson 6 Publish and verify experiences...44 Objective Task Publish content from AEM Author Optional Task Simulate different audiences Lesson 7 Setup Analytics Objective Task Login to DTM Task Setup Analytics Tool Task Setup conversion tracking for your activity Lesson 8 Use your optimized page Objective Task Open and review your page Task Verify experience for authenticated user Task Track a conversion Lesson 9 Use Content Insight to understand page performance Objective What is Content Insight Task - Find and open Content Insight Appendix 1: Lab setup and prepared configurations Analytics Setup Target Setup Appendix 2: AEM and Analytics Page Names Appendix 3: Extending Content Insights Appendix 4: DTM Scripts Appendix 5: Asynchronous mbox calls Links and Resources TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 3

4 Lab Overview In this lab we step through the process to set up the latest AEM 6.2 integrations with Adobe Analytics, Adobe Target and Dynamic Tag Management to build, deliver and measure personalized experiences. We also examine how to leverage Context Hub to use your data for personalizing experiences and AEM Content Insights to visualize content KPIs. Objectives For the lab exercise we assume a scenario in which our sample company - Geometrixx Outdoors - plans to collect donations to support water supply in emerging regions. Geometrixx Outdoors runs such campaigns on a yearly basis to support good causes. We assume that we have already sent out a mail blast to our customers asking them if they are willing to donate. We also have a landing page in place which provides more background and allows to place a donation. We are seeing that people are actually going to the landing page, but the conversion rate is not a good as we had hoped. This is where the lab will start. Using Adobe Marketing Cloud Technology, we will optimize the landing page with the goal of increasing donations. For the purpose of the lab we will personalize the landing page experience based on data about previous donations that we have about our customers. Lastly we will take a look at how KPIs that are tracked for our landing page can be made available to content creators to support further improvements of the experience. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 4

5 Lesson 1 Start your engines Objective Start AEM and learn what Marketing cloud solutions we will be using. Task Start your AEM instances At your workstation you should have a paper with your participant number, e.g. 1. This number is used for many purposes during the lab (DTM web property name, logins). Wherever you see YOUR NUMBER in this lab manual, replace it with your participant number. On the desktop of your lab machine you will find a folder called L302. Open this folder. Within this folder you will find 3 folders with the following names: author (this contains your AEM author instance) publish (this contains your AEM publish instance) dtm (this contains some scripts that we will later use with DTM) The DTM scripts provided in this lab are examples that likely require adaption to your requirements when applied to your own setups. Open the author folder and double click the contained JAR file cq-author-p4502.jar. This will start your AEM author instance. You should now see a window like shown below, which indicates that your AEM author instance is starting up. Once the AEM author was started, it will open the login screen in a browser automatically as shown in the next image. But while we wait for the author instance to be started, let s start our publish instance as well. Go back to your L302 folder and open the publish folder. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 5

6 In the publish folder double click the contained JAR cq-publish-p4503.jar which will start your AEM publish instance. You should see a window like shown below, which indicates that your AEM publish instance is starting up. Note the different ports between the AEM author and publish instance. The author instance will use port 4502 and the publish instance will use port Once the AEM publish was started, it will open Geometrixx Outdoors homepage automatically. You should see the below after the browser was opened. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 6

7 What solutions will we use? While your AEM instances are starting up, we will tell you a bit more about what solutions from the Adobe Marketing Cloud we are going to use in this lab. While this will be covered by the lab instructors, you can also find an overview in this section for later reference. We also prepared configurations for some of the solutions. Fore more details see Appendix 1: Lab setup and prepared configurations. The diagram below shows an overview of the Marketing Cloud solutions used in this lab and how they connect with each other. We will quickly describe the purpose of each solution and how it will be used in the lab scenario. Adobe Experience Manager Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites, mobile apps and forms. And it makes it easy to manage your marketing content and assets. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 7

8 In this lab we will use AEM to deploy the landing page for our campaign. We will use AEMs integration with Adobe Target to create a new activity that will be used to optimize our landing page for different audiences. In addition, we will use AEMs capability to pull reports from Analytics to make performance data about our landing page available to content editors. Core Services The following Core Services are used in the lab. Activation Activation, powered by Dynamic Tag Management (DTM), gives you intuitive tools to manage an unlimited number of Adobe and third-party tags. DTM will be used in this lab to activate and configure Analytics, Target and Marketing Cloud ID service for our landing page. Profiles and Audiences The Profiles and Audiences core service gives you a complete and actionable view of your customers. It provides a common ID service (Marketing Cloud ID Service) to identify audiences across Adobe solutions so insights taken from one solution can be applied in another. Note that Profiles and Audiences also has the ability to import 3 rd party data via Adobe Audience manager which can then be used for building audiences. We will not use this in the lab, but it was added to the architecture overview for completeness. Adobe Target Adobe Target (Target) is a personalization solution that makes it easy to identify your best content through tests that are easy to execute. It allows you to easily deliver the right experience to the right customer. In this lab, personalization of the landing page will be driven by Target. AEM will import Audiences from Target so that they can be used right within AEM to create activities to personalize our page. AEM will then synchronize the activity to Target. Adobe Analytics Adobe Analytics (Analytics) is the industry-leading solution for applying real-time analytics and detailed segmentation across all of your marketing channels. Use it to discover high-value audiences and power customer intelligence for your business. In this lab we will use Analytics to track page views and conversion for the activity that we will create in the lab. Tracking conversion leverages the integration between Analytics and Target called Analytics for Target (A4T). We will also retrieve reports from Analytics and make it available to content editors in AEM. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 8

9 Lesson 2 - Review setup What are Cloud Services Cloud Services are the AEM mechanism to configure integrations between AEM and services available in the cloud such as 3 rd party cloud services, Adobe Creative Cloud or in our case Adobe Marketing Cloud. Cloud Services typically hold the parameters for connecting with an external service such as credentials or API endpoints. But they can also provide additional configuration, for example which data should be made available to the service. This is typically done in a so called Framework which is associated with a Cloud Service. For Target or Analytics, the frameworks for example define which data to send under which parameter. But in our scenario the Analytics and Target Cloud Service configurations will not use frameworks as the activation of those solutions will be done via DTM. The required Cloud Services for this lab have been preconfigured on the lab machines. Just the DTM web property for each lab machine needs to be adjusted to prevent conflicts between lab participants. We will quickly review the pre-configured settings. Additional resources about Cloud Services can be found in the Links and Resources section. Objective Familiarize yourself with the setup & complete configuration Task Login to AEM In the tab that contains the AEM Author login page from the previous chapter, log in using the following credentials. If you have closed the tab already, you can also use the AEM Author bookmark in Chrome. Username: admin Password: admin TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 9

10 Task Review DTM cloud service Open the AEM Navigation by clicking on the solution title, switch to Tools and navigate to Deployment -> Cloud Services as shown below. Find the Dynamic Tag Management section and click the Show Configurations link. Click AEM Summit Lab 2016 (Dynamic Tag Management Configuration) to open it. Open Edit dialog TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 10

11 The dialog should look like (do not change the settings): Task Find and open landing page Switch to Sites section via Global Navigation as shown below. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 11

12 Navigate to the site Summit AEM Integrations Lab by clicking the corresponding item in the column. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 12

13 Select the landing page Summer is coming by clicking the page icon on the left side of the page title and click the open action now visible in the white selection bar on top. The page will open in a new tab, /sites.html tab should stay open as we need it later. When the page editor is opened for the first time a tour to guide you through the touch UI editor will be shown. You can skip this tour by clicking Skip and selecting Don t show again. The page should now have completely rendered as shown below. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 13

14 Task Verify DTM on landing page Open Chrome Developer Tools by either pressing CMD+ALT+I or using Chromes menu and selecting View > Developer > Developer Tools. Make sure you have the Console tab selected in Chrome developer tools. Next: Change the url from to (remove /editor.html) You will see that the Adobe DTM in Chromes menu becomes highlighted: TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 14

15 Click the DTM icon and select Debug and Staging Reload the page, during reload you will see a lot of debug messages in Chromes console tab. To filter only those generated by DTM, type satellite in the filter of Chromes developer tool If DTM loaded, you will see the following output in the console log: The console log indicates that the visitorid service, Analytics and Target are loaded. Task ReOpen the landing page Repeat Task Find and open lading page TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 15

16 Optional Task Review Cloud Services Feel free to go through optional tasks if time allows. Don't worry if you can't. The steps taken in optional tasks are not a requirement for the rest of the lab. In this task we will review the pre-configured Cloud Services. Switch to the tab where the Sites browser is open and turn off selection mode by clicking on the x on the right side of the action bar. Go back to the Cloud Services overview via the global navigation by clicking on the solution title, switch to Tools and navigate to Deployment -> Cloud Services as shown below. In the Cloud Services overview, find the Adobe Analytics section, click Show Configurations and open Provisioned Analytics Account (Analytics Configuration) by clicking on it. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 16

17 By clicking edit you can open the integration settings and familiarize yourself with them. Property Description Settings used in Lab Setup Company your Analytics Login Company Our Login Company Username the Analytics API user Our API user Password the Analytics password Password of our lab user Data Center the Analytics data center your account is associated with Our data center Do not add tracking tag to page Do not track the page load event Use AppMeasurement select this option when you use a tag manager like DTM Select this option to prevent the initial page load event. This only applies if you don t use a tag manager and previous option is Off. Use this if you want to fire your tracking call yourself via Javascript. Use the new AppMeasurement.js library instead of s_code.js. Only applies if you don t use a tag manager. On Off Off TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 17

18 Property Description Settings used in Lab Setup Use ClientContext Do not import page impressions nightly (author) Do not import page impressions nightly (publish) Additional context data Segment Option to force usage of ClientContext. If not enforced CQ_Analytics.DataProvider tries to evaluate which data layer is available. Only applies if you don t use a tag manager. If checked, the impressions polling importer will no longer import the page impressions on an author instance If checked, the impressions polling importer will no longer import the page impressions on a publish instance. The option is checked by default. Additional static Analytics context data (s.contextdata). Only applies if you don t use a tag manager. Option to use an Analytics segment defined in the current reporting suite. The Analytics reports will be filtered based on the segment Off Off Off None None After closing the settings dialog by clicking on Cancel, open the available framework Provisioned Analytics Framework (Analytics Framework). Check that no mapping is defined as those will be defined in DTM later. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 18

19 Switch back to Cloud Services via the breadcrumb navigation. Find the Adobe Target section and click the Show Configurations link. Then click Provisioned Target Account (Target Configuration) to open it. Again you can click edit and familiarize yourself with the settings. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 19

20 Property Description Settings used in Lab Setup Client Code The client code that is associated with your Target account Our client code The address that you use to authenticate your Target account API user Password The password that is associated with your address Password of our API user API Type A4T Analytics Cloud Configuration Use accurate Targeting Synchronize segments from Adobe Target Use mbox.js delivered by DTM -Custom mbox.js Utilized Target API REST (default) XML (legacy, for backwards compatibility) Reference to the Analytics configuration utilized for the A4T (Analytics for Target) integration If checked all mboxes using this cloud service configuration will wait for the context to load before loading their content If checked Audiences defined in Adobe Target get automatically synchronized to AEM If selected the injection of mbox.js by AEM is prevented to avoid overlap with injection via DTM By default, none is specified so that the default mbox.js file is used. Upload a custom mbox.js file if necessary. Only applies if you don t use a tag manager. REST Our Analytics cloud config Off On On None A4T Analytics Cloud Configuration is a link to the raw Analytics framework that was reviewed before. This is a precondition to have Target report directly back to Analytics. In our case DTM is used to activate Analytics and Target on the pages and the mbox.js that is delivered by DTM is used. Close the dialog with Cancel and open the available framework Provisioned Target Framework (Target Framework). TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 20

21 Check that no mapping is defined as those will be defined in DTM later. Now go back to Cloud Services via the breadcrumb navigation to finish the task. Lesson 3 Inspect Context Hub Objective Inspect how Context Hub is integrated in your page template and review its configuration. What is Context Hub Context Hub is the implementation of AEMs pluggable Data Layer. It provides features such a plugging additional stores to load data on the page, a fine grained event mechanism that can be used to get updates as soon as data is available, timeouts for data calls and much more. It provides an optional UI for inspecting and manipulating data. In AEM the Context Hub UI is only active on author instances. Another important point to note is that in Context Hub the UI is configured independently of the stores that manage data. We will see this later when we inspect the Context Hub configuration used in the lab. Context Hub allows other solutions deployed via DTM or another Tag Management solution to retrieve context specific data, such as profile data or browser data through a unified mechanism and consistent API. More information about Context Hub can be found in the Links and Resources section. Task Inspect Context Hub Let s take a look at Context Hub to understand how you can use it as data layer and utilize its UI. Select Preview in the landing page as shown in the screenshot below. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 21

22 This will take you into AEMs page preview mode that allows you to see the page as it will be rendered on the publish instance. The Context Hub UI is only available in preview mode in AEM. After switching to preview mode you will notice a new action in the upper left corner as highlighted in the next screenshot. This action will open the Context Hub UI. Once you clicked on it, Context Hub UI will open and you can inspect the stores that are defined for the Context Hub configuration used in this lab. We are using a stripped down configuration that provides a minimal set of data. Throughout the lab we will only use the Donation store that loads data about a user s previous donations. As shown in the next image, currently there are no donations as we are logged in with the admin user. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 22

23 You can play a bit with Context Hub, maybe open the second store that allows you to provide geo location information about the current user. The 2 stores, Donation and Geo Location that you see initially are part of what is called the Persona UI mode. Context Hub allows to group UI modules for stores into different modes. If you click the Device icon as shown in the next image, you will find additional UI modules that expose device data being handled by Context Hub. Optional Task Inspect Context Hub Donation-store configuration Next let s take a look at the configuration of the Donation store that we will be using for our exercise. Go back to the tab where your Sites browser or Cloud Services (if you did the optional review tasks in Lesson 2) is open. If the black top bar is not visible you may be in selection mode and need to unselect the page. Click on the (x) of the selection marker in the upper right corner. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 23

24 After this you can open the Context Hub configuration by performing the following steps 1. Open the main navigation 2. Select Tools 3. Select Sites 4. Click on ContextHub card Next click the Summit 2016 AEM Integrations Lab configuration container. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 24

25 And subsequently open ContextHub Configuration. What you are seeing now are the configuration items for Context Hub. As mentioned previously, stores are independent of the UI modules. Individual store configurations can be found in the list as ContextHub Store Configuration items. UI module configurations can be found within the UI mode configurations. In our configuration you can find the 2 different UI modes Persona and Device as well as all the stores that are configured to be part of the data layer. For more details on Context Hub features please refer to the Links and Resources section. Now identify the Donation store configuration and click on it to open the store configuration. The first screen of the wizard that is started shows the basic store configuration. These include: The Configuration Title of the store configuration. The Store Type that will be used. In our case we are using the generic JSONP store which allows to load data from standard JSON(P) endpoints. For the purpose of the lab, we created a JSON endpoint that is provided by your local AEM instance and which provides donation data about the current user. The Required checkbox tells Context Hub that this store is required and needs to be loaded. You can register several implementations for a store type with a priority. Each implementation comes with that indicates if a store can be used in a given environment or not. If enabled Context Hub will check that at least one corresponding store implementation is available and will pick the one with the highest priority. If no implementation is available, Context Hub will throw an error in the browser console. In future this may also be used to indicate that all required stores are loaded via a separate event. The Enabled checkbox tells Context Hub that this store is enabled. Stores can be disabled temporary if required. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 25

26 Click Next to go to the next screen of the configuration wizard which provides the store type specific configuration. The following settings are used for our example: jsonp set to false because we are using a standard JSON endpoint and not JSONP We specified a timeout of 1000 millisecond, which means if the data is not loaded after 1 second, the store will interrupt the request and provide a default value. This is useful to not block the page load too long depending on other settings. Secure was set to false since we are not using SSL. Synchronous was set to true. The synchronous setting is new in 6.2 and was introduced to ensure that data is there when we need it. By default, stores are loaded asynchronously. Path points to the JSON endpoint provided by AEM to load the data for the current user. Note that can also be a fully qualified URL. For our sample implementation this is /bin/donation/data.json. Loading data synchronously can affect page performance. However some services require the data to be available very early during page load. Context Hub was designed to provide the tools to handle the challenges of data availability while allowing your AEM pages to be designed for maximum cacheability. Typically Context Hub stores should load very fast. So you can consider the synchronous loading as one additional tool to plan your data strategy with regards to caching and data availability. Click Save in the upper right corner of the wizard to close it. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 26

27 Optional Task Inspect Context Hub include In your Chrome browser you will find a bookmark called CRXDE Author. Open a new browser tab and click the bookmark, which will open CRXDE Lite for your local author instance. You should see CRXDE Lite as shown below. Next navigate to /apps/summitaemintegrationlab/components/pages/outdoors/head.jsp and open head.jsp. Scroll down and inspect the Context Hub include highlighted in the image below. Note the request parameter com.adobe.granite.contexthub.path which points to /etc/cloudsettings/summitaemintegrationlab/contexthub from where our Context Hub configuration will be pulled. Currently selecting another Context Hub configuration that the default requires adding this parameter. In the final release of AEM 6.2 this will be configurable via a UI. For this lab we will use a modified Context Hub configuration that was simplified to only include a minimal set of Context Hub stores and data required for this lab. It is generally a good idea to adjust the default configuration and only enable the data that you really need to make sure your page and data loads as fast as possible. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 27

28 Underneath the Context Hub include, you can find an include for the servicelibs.jsp. This will include the required code for the Cloud Service configurations that you reviewed in the previous lesson and which are attached to our page. The include order in your template is important to consider for data availability and page performance. In our setup Context Hub will load the data that is then used by DTM, so it needs to be loaded before the DTM library. Since DTM should be loaded as early as possible, it is best to include Context Hub first in the page followed by the Cloud Services include which will load the DTM library. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 28

29 Lesson 4 Setup Marketing Cloud ID and Target You can skip this. Provided for information purpose only. DTM scripts and other configuration values required for this lab can be found in the L302 folder on your desktop which contains a folder named dtm. We will reference the exact path within this folder throughout the DTM related exerices. All Scripts are also listed in Appendix 4: DTM Scripts. Objective Configure Visitor ID and Adobe Target in DTM. Task Login to DTM Open a new tab in your browser and open the DTM login page by clicking the DTM bookmark. To login use the following username: seat- YOUR NUMBER@adobe.com. The password should be PasswordYOUR NUMBER! (e.g. Password99!). Note the exclamation mark at the end of the password! After you logged in, select your web property which you have linked earlier in AEM. You web property should be named seat-your NUMBER-YOUR ITERATION. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 29

30 You can skip this. Provided for information purpose only. Since there are many web properties created for this lab, the best way to find your web property is using the search field at the top of the screen. Enter seat-your NUMBER into the search field and click apply which will reduce the list to your personal web property as shown in the next image. Task Setup Marketing Cloud ID Service The Marketing Cloud ID Service provides a unified method of anonymously identifying visitors across the solutions of the Adobe Marketing Cloud. It allows us later to share segments or audiences between Adobe Analytics and Adobe Target for example. For the exercises in this lab, we don t necessarily need the Marketing Cloud ID service, but as a rule of thumb, new setups should always use the Marketing Cloud Visitor ID Service. To add the Marketing Cloud ID service, click the Add a Tool button as shown in the next image. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 30

31 You can skip this. Provided for information purpose only. In the Tool Type drop down at the top of the window that opens, select Marketing Cloud ID Service. Leave the Marketing Cloud Organization ID as is and enter the following into the Tracking Server field: aemlab2016.or1.sc.omtrdc.net. The tracking server URL can also be copied and pasted from DESKTOP/L302/dtm/tools/Analytics-API.txt. Now click Create Tool. In the following screen, expand the General section. Copy the Tracking Server value into the Tracking Server Secure field and make sure that Library Version points to most recent version. Also verify that Automatically request Visitor ID is checked. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 31

32 You can skip this. Provided for information purpose only. Scroll down if required and click Save Changes to save your settings. You have now successfully configured the Marketing Cloud ID Service. Task Setup Adobe Target Tool Next we setup the Target tool. We start by creating a data element which will be used to get profile data about our visitor out of Context Hub and make it available for use in DTM. Go to the Rules tab and then click Data Elements in the left menu. Then click the Create New Data Element button at the top right. A form will open that allows you to configure your data element. First give the data element a name by entering the value TotalDonation into the name field. In the Type drop down select Custom Script which will enable a button called Open Editor. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 32

33 You can skip this. Provided for information purpose only. Click Open Editor and copy and paste the script from DESKTOP/L302/dtm/dataelements/TotalDonation.js into the editor as shown in the next image or enter the following manually: return ContextHub.get("/donation/total"); The script will retrieve the value for the total previous donations previously made by a user from the respective Context Hub Store that we reviewed earlier. Click Save and Close, then scroll to the bottom of the page if required and click Save Data Element to save your new data element. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 33

34 You can skip this. Provided for information purpose only. Next we set up the Adobe Target Tool. The Target Tool adds Adobe Target to our pages. It will automatically inject a global mbox into every page. Go back to the Overview tab and click Add a Tool again. This time select Adobe Target as tool type, enter Target in the name field, leave the other values unchanged and click Create Tool. On the next screen find and expand the Global Parameters section and add a new global mbox parameter. Enter profile.donation as name. Then in the value field start typing % which will open a drop down from which you can select your previously created data element TotalDonation and confirm by clicking the add button next to the value field. Click "Save Changes" to save the changes you made to the tool. We have now created a global mbox parameter that is sent with every global mbox request for the pages where our tool is active. This means if Context Hub is present on the page and contains a value for the current user, the data element will pick up this value and make it available to the Target tool, which then sends this value as profile.donation for the current session. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 34

35 You can skip this. Provided for information purpose only. Finally, we need a page load rule to connect events about updates in Context Hub stores with DTM. We will use this later when we manipulate data in Context Hub from the AEM author instance. Page Load Rules are run by DTM when pages load. They can be used to inject things like Javascript into pages. Click the Rules tab again, then select Page Load Rules in the left menu and click Create new Rule at the top right. Give the rule a name, by entering a value into the name field, e.g. ContextHub Store Updated. Scroll down if required and find the Javascript / Third Party Tags section and expand it. Select the Sequential Javascript tab and click Add New Script. Give your script a name like ContextHub Store Updated Handler and copy and paste the script from DESKTOP/L302/dtm/rules/pageload/ContextHub.js into the editor field that opens and click Save Code. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 35

36 You can skip this. Provided for information purpose only. The script we just added via the page load rule registers for Context Hub events which indicate that the value of a store was updated. If such an event is detected, the script will check which data elements are mapped as global mbox parameters. It then retrieves the values for these data elements and triggers the required mbox requests again with the new values. Now scroll down to the bottom of the page if required and click Save Rule. Congratulations! You have now successfully configure Adobe Target. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 36

37 Lesson 5 Build an activity Objective Use AEM targeted content editor to create an activity. Task Create new activity After DTM has been properly configured you can start to build your activity. Creating activities in AEM can be done in the Targeting mode. Switch back to the tab with the landing page. Starting in Preview mode you can toggle Edit mode by clicking on Edit. Then open the mode selector with the dropdown icon next to Edit and switch to Targeting Mode. Make sure to select the brand Geometrixx Outdoors and open the Activity creation dialog by clicking on the + next to activities dropdown. In the dialog use the following scheme to name your activity: Known-Donors-YOURNUMBER-YOURNAME Then select the targeting engine Adobe Target and select the Activity Type Experience Targeting before creating the activity by clicking Create. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 37

38 After verifying that the newly created activity is selected, start the targeting process by clicking the blue Start Targeting button in the upper right. The first step of the targeting wizard is the targeted content editor that allows you to target components and define experiences. We begin with selecting the components to be targeted. Click on the hero banner image at the top of the landing page and click the Target Icon in the edit bar that appears. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 38

39 Repeat the same for the donation component which is placed underneath the hero image at the right side of the page. After the components are targeted you can now create the first experience by clicking on Add Experience Targeting in the rail on the right side. This will open a dialog that allows you to select a Target audience for which you want to create a new experience. The available audiences have already been created in Adobe Target for the lab. You can find details about how those where set up in Appendix 1: Lab setup and prepared configurations. Create an experience for the Small Donors audience by selecting Small Donors from the Audience selector dialog. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 39

40 After selecting the audience, confirm the experience name that will default to the audience name. Leave the default value unchanged and click Ok. Create the experience for Major Donors by repeating the same steps as done for Small Donors. We know that users in the Major Donors audience are willing to donate a significant amount. Thus we want to provide them with a specific call to action and ask for a donation sum that would be sufficient to buy a new water pump. As the Major Donors experience is currently active we can now start defining the experience for this audience. Replace the hero banner image by opening the asset finder, search for desert and place the image with the green plant and tag line by dragging it onto the hero banner. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 40

41 Customize the donation component by clicking on the donation component, click on the Configure Icon (Wrench) in the opened edit bar and set a default value of 145 and the title to Donate a pump!. Save the changes by clicking the checkmark icon in the upper right corner of the dialog. To change the banner for the Small Donors experience, switch to the Small Donors experience by clicking on the Sm abbreviation in the collapsed experience rail, search for drop in the asset finder and pick the image with the tag line Every Drop Counts and use drag it onto the hero banner. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 41

42 For Small Donors we want to start with a higher default donation proposal since they have donated already in the past. To customize the donation component, open the Configure dialog and define a custom Default donation value of 15. Save the changes by clicking the checkmark in the upper right of the dialog. Click next to get to the Target step of the targeting wizard. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 42

43 Review audience diagram that visualizes the mapping between experiences and audiences. As the default names of experiences are the audience names both sides should look the same. Switch to Goals & Settings by clicking Next. In this step you configure settings for the activity such as the Reporting Source. Select Analytics as reporting source since we want to leverage Analytics for tracking successful donations. Next select the AEM Lab 2016 from the Company drop down and the Report Suite AEM Lab Summit The Goal Metric subsequently can be set to Use Analytics Metric and picking the Donations Metric which was already prepared in Analytics for the lab exercises (for more details see Appendix 1: Lab setup and prepared configurations). TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 43

44 To save these settings click Save in the wizard that will also trigger a synch of the activity to Target and should show a green success message. Lesson 6 Publish and verify experiences Objective Publish your page and activity and use Context Hub s data manipulation capabilities to see how your page reacts to different visitors. Task Publish content from AEM Author Now that the all AEM related changes have been completed we can publish our page. Click on the Page Information icon in the upper left corner and select the Publish Page action. The publish page wizard will automatically provide you with a list of assets, campaigns and configurations that are used on this page and were modified since the page got published the last time. Simply make sure that all items are selected and confirm by clicking on Publish on the upper right. You will be taken back to the landing page and get a confirmation notification for the publish action. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 44

45 Congrats, you have successfully published your page! Optional Task Simulate different audiences To verify everything works as expected, switch to preview mode. Open the Context Hub UI and open the donations UI module and set a value >100 to trigger the Major Donors audience. As soon as you hit <Enter> the experience should switch to the Major Donors Experience. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 45

46 Try different values above and below 100 as well as 0 to simulate the different experiences. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 46

47 Lesson 7 Setup Analytics You can skip this. Provided for information purpose only. Objective Configure Analytics in DTM to track page views and conversion of your activity. Note that DTM has a very short timeout for the login session. You may have to login again if your session has timed out. Task Login to DTM Go back to the tab in which you opened DTM or open a new tab and then use the DTM Bookmark to open DTM again. Make sure you have your web property selected following the naming scheme seat-your NUMBER-YOUR ITERATION. Task Setup Analytics Tool We'll start by creating another Data Element. Adobe Analytics uses page names rather than the URL to identify content, so we'll create a Data Element for the page name. Go to the "Rules" tab, click "Data Elements" in the left menu and then click the "Add a Data Element" button. Give your data element a name, e.g. PageName and select Custom Script as Type. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 47

48 You can skip this. Provided for information purpose only. Then click the Open Editor button underneath the type drop down and copy and paste the script from DESKTOP/L302/dtm/dataelements/PageName.js into the editor field. Click Save and Close and then scroll to the bottom if required and click Save Data Element to save your page name data element. The script we used to generate the page name takes the path of the page and transforms this into a page name by removing the leading / and.html extension and replacing all other / with a :. This is the default page name that is also used by AEM to retrieve reporting data about a page from Analytics. If you choose to use another Page Name, this also needs to be applied in AEM either by: mapping another property to the pagename variable in the AEM-Analytics framework or TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 48

49 You can skip this. Provided for information purpose only. by providing your own implementation of com.day.cq.analytics.sitecatalyst.analyticspagenameprovider which allows for more complex page name generation Additional resources on configuring and extending the AEM Analytics framework can be found in the Links and Resources section and Appendix 2: AEM and Analytics Page Names. Next, we'll set up the Adobe Analytics Tool. The Adobe Analytics Tool adds Adobe Analytics to the pages of our site. To setup the tool navigate back to the Overview tab of your web property and click Add a Tool. Select "Adobe Analytics" in the "Tool Type" drop down. Then give the tool a name, e.g. Analytics. The "Configuration Method" should be "Automatic" and the authentication via "Web Services". Enter the following credentials for username and shared secret or copy them from DESKTOP/L302/tools/Analytics-API.txt. Web Service Username: lab-api-usr:aem Lab 2016 Shared Secret: a3e3a80beba35453aacdad953312ccdf Click the "Create Tool" button to create your tool. In the following page you can further configure your Analytics tool. Wait until the load indicator next to the Refresh button has disappeared and a message about the last update is shown. Select the "AEM Lab - Summit 2016" report suite as your production report suite as shown in the next image. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 49

50 You can skip this. Provided for information purpose only. Repeat the same for the staging report suite and select "AEM Lab - Summit 2016" as well. Your tool setup should now look like this. In a production environment, you should use different report suites for staging and production, enabling you to validate changes you made and keeping production data clean. Find and open the General section. Select "UTF-8" in the "Character Set" drop down and "USD" in the "Currency Code drop down". Enter the aemlab2016.or1.sc.omtrdc.net as Tracking Server and SSL Tracking Server or copy and paste it from DESKTOP/L302/tools/Analytics-API.txt. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 50

51 You can skip this. Provided for information purpose only. Find and expand the "Pageviews & Content" section and select the Page Name field. Type %PageName% to select your previously created data element. Note that if you start typing %, a drop down will provide the list of available data elements. Next find and expand the "Customize Page Code" section at the bottom and click the Open Editor button. Enter the code below or copy it from DESKTOP/L302/dtm/tools/AnalyticsCustomPageCode.js and past it into the editor field. return window.location.port == 4503; TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 51

52 You can skip this. Provided for information purpose only. The custom page code we provided checks the port of the URL that was used to open a page. In our case, we don t need Analytics to run on the AEM author instance and since our publisher is running locally on port 4503, we only enable Analytics for this port. In real production environment you will have other settings depending on your site and configuration. Click Save and Close to save the code snippet and Save changes to save the configuration of the Tool Analytics. Task Setup conversion tracking for your activity Finally, let s set up conversion tracking for our activity. Since we also want to track how much was donated, we will start with a data element that can be used to capture donations made by our visitors. Navigate back the Rules tab and select Data Elements in the left navigation again and then click Create New Data Element. Name the data element, e.g. "NewDonation", set the Type drop down to "URL Parameter" and specify donation as "Parameter Name". TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 52

53 You can skip this. Provided for information purpose only. Click "Save Data Element" to save your Data Element. Navigate again to Page Load Rules on the left navigation and click Create New Rule. In the lab setup we have a thank you page prepared which will be the target of the donation form that is part of our landing page. Since we only want to track conversions when a visitor has reached the landing page, we restrict this rule to the thank you page URL. Start by giving your rule a name, e.g. Thank You Page. Then find and expand the Conditions section and select "Path" in the "Criteria" drop down. Click the "Add Criteria" and in the newly created field for the path condition enter thank_you.html. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 53

54 You can skip this. Provided for information purpose only. Find and expand the "Adobe Analytics" section and within this section find the evars box. On the right hand side, in the "Evar name" drop down, select evar1. Type "%NewDonation%" into the field just underneath or select the data element from the drop down that appears when you start typing %. Confirm by clicking the Save evar button. The New Donation data element that we selected and which was created earlier and which takes its value from a request parameter called donation will now be sent as value for evar1 if present. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 54

55 You can skip this. Provided for information purpose only. Find the "Events" box. On the right hand side, in the "Edit event" drop down, select event1 and click "Save event". Remember when we created and configured the activity in AEM, in the goals configuration we selected Donations as metric for activity conversion. Since we want to track conversions on the thank you page, we send this event to inform Analytics that a conversion for our activity occurred. Click "Save Rule" to save your Page Load Rule. You have now successfully configure tracking for conversion of your activity. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 55

56 Lesson 8 Use your optimized page Objective See how your final page works for different audiences. Task Open and review your page In your Chrome browser you should find a bookmark called AEM Publish. Open a new tab and then open the bookmark in this new tab. This will open the landing page that you published earlier. Now we need to make sure that we enable the DTM staging library again for the publish setup. Remember that we did not publish our DTM property yet. Without enabling the staging library DTM will not be able to retrieve our changes. As shown in the following diagram, click on the DTM plugin icon in your browsers tool bar and then enable at least the staging setting. You may also enable the debug setting to get further details on DTM processing in Chrome developer tools. Next open Chrome Developer Tools by either pressing CMD+ALT+I or using Chromes menu and selecting View > Developer > Developer Tools. Make sure you have the Network tab selected in Chrome developer tools. After this reload the page so that you can see the request being made in the Network tab of the developer tools console. As we want to inspect a full page load with all of its requests we toggled the developer tools to dock it on the right side as this provides you maximum vertical space for the list of requests. As you can see in the following image, the page will show with the default experience since we are not logged in yet. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 56

57 If you inspect the requests after the page reload in the developer console, you will find the previously highlighted requests in the following order after the initial page request. The order is important for the setup to work properly as we will explain now. contexthub.kernel.js: The first include in your page header. This loads the Context Hub base library including the code for the stores. satellitelib: The second include in your page template. This loads the DTM library. data.json: This is the request that loads the data for our donation store. global-mbox-request (shown as /ajax): This is the request made by the auto-generated global mbox. mbox requests (shown as /standard): These are the 2 targeted locations on our page. The difference between the /ajax request for the global mbox and the /standard request for the targeted components is that we don t expect content to be returned by the global mbox request. So we can send this as an asynchronous request that just sends the profile data required for the current user and then forget about it. The targeted components and their mbox however are expected to return actual content to be displayed. In the lab setup we are using a synchronous request for the targeted components to make sure our page loads smoothly without any flicker. For the mbox managed by the targeted components this means that on the AEM publish instance we are using an mboxcreate call to define the mbox. Details on how to tweak the loading strategy per occurrence can be found in the Appendix 5: Asynchronous mbox calls. If you inspect the global mbox request by clicking on it, you will see that it contains the profile.donation parameter that we have previously defined in DTM in the Target tool configuration. Currently it does not contain a value since we are an non-authenticated user and don t have any details about previous donations. This is highlighted in the next image. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 57

58 Before we see how this will work for authenticated users, let s verify that our page views are tracked by Analytics as expected after setting up Analytics tracking in the previous chapter. To check this, switch to the Console tab in developer tools and find the log statement highlighted below. The Adobe Analytics Debugger Plugin for Chrome generated this log statement that was pre-installed on your lab machine. You can find a link to the plugin in the Links and Resources section. If you can see this output, it means that your page view was tracked as expected. At this point we only track page views and no additional data. But you can already see that your Marketing Cloud ID as well as other metadata about your page like TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 58

59 the page name that we set up in DTM is sent with the tracking request. You can also inspect the tracking call by selecting the following request in the Network tab in your developer tools: Task Verify experience for authenticated user Now that everything is set up properly, let s see how this works for a authenticated user. Sign in as a authenticated user by clicking the Sign In or Register link at the top right corner of your page. To log in, use the following credentials, which are assigned with a user account that was prepared for the lab session: Username: andrew.schaeffer@trashymail.com Password: password The user Andrew Schaefer was prepared to have donated an overall amount of 120$ in past campaigns. Therefore, once you logged in, you should get the page with the experience that we prepared for Major Donors. If you inspect the data.json request in developer tools now use the Response tab in the Request details after selecting the request - you will see that it returns a total donation amount of 120. Furthermore, if you inspect the global mbox request that was made after login, you will find that it now sends the value 120 for the profile.donation parameter. The connection here is made by the DTM data element that we created earlier and which retrieves the value for the current user from Context Hub and maps it to the global mbox request. Now if you also inspect the mbox requests for the targeted components, you will see that it does not contain any profile data parameters. You might wonder how those requests can know about the data and make decisions about what activity and experience to show. The connection is made by the mbox session ID that is sent with every mbox request including the global mbox. If you inspect the mbox requests, you find that all of them have a mboxsession parameter with the same value. This is used by Target to connect those requests and make the data sent via the global mbox available to subsequent mbox requests with the same mboxsession. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 59

60 When inspecting the responses for the local mbox request you can see that AEM just synchs a JS snippet that takes care of loading the experience from AEM. This means the actual content stays in AEM and will be delivered from there, which allows to leverage AEMs powerful content aggregation and management capabilities. Task Track a conversion If you like you can change the value of the donation amount. To track a conversion, you can just click the Donate button in our donation form. This will take you to a thank you page with the donation value from the form being passed over as a parameter. To keep things simple for the lab, the donation form just requests the thank you page with a GET. In a real application it would do a POST request which would process the donation and also add the donation value to the current user s profile, so it an be considered for future campaigns. Once the thank you page is loaded, you can inspect the Analytics call that was made for this page and which we configured in DTM to include the donation amount and the event used to track conversion (event1). See below for the highlighted parameters sent with this call. As you can see, event1 is included to notify that a conversion was made and also evar1 is included containing the amount you entered into the donation form. Lesson 9 Use Content Insight to understand page performance Objective Understand how AEM Content Insights can be used to get insights on page performance and conversion. What is Content Insight Content Insight is a page centric dashboard that provides detailed page performance insights using Analytic and other data providers. Content Insight is not a replacement for Adobe Analytics and does not provide advanced mechanisms for drilling down into data but rather its scope is to provide content editors with additional information about page performance within the context of the authoring environment. This additional information can be used by content authors to: understand how previous modifications have affected page performance make decisions about how to modify pages Content Insight is extensible and can be customized with additional Analytics reports. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 60

61 Task - Find and open Content Insight Go back to the tab where you have your landing page open in AEM author. Then open the page actions and select Open Analytics and Recommendations. This will open Content Insights in a new browser tab as shown in the next image. For the lab you will notice that we already have some data prepared. The timeline shows that our landing page was already running for some time and we created some data to simulate that the optimization done in this lab has already happened a couple of days ago. If you look at the timeline at the top, you see this indicated by a new version of the page being shown in the timeline. As you review the Content Insights dashboard, you will find multiple cards showing different metrics like different sources that drove traffic to your page, bounce rates, time spent on page or page views and unique visits. The metrics in these cards are driven by report data from Analytics about our page. We have also added an additional report card that runs a report on TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 61

62 our Donation metric (event1). As mentioned earlier, Content Insights is fully extensible and can be customized to your needs. You can find details about how to extend Content Insights in Appendix 3: Extending Content Insights. If you grab the handle in the timeline selector as highlighted in the previous image, you can adjust the timeline and select the full range. This will update all cards as shown in the next image. You can use this to get more details on the performance over time as shown in the next image. After doing this you will see that the conversions slightly improved after we launched our optimized page. You can also hover over the cards to get even more details on the metrics. Appendix 1: Lab setup and prepared configurations A few configurations have been implemented by the lab team before the Summit session. This was done because those are one time configurations which you won t repeat all the time when implementing campaigns. In order to provide all details and enable you to get to the full setup yourself, the configurations that were applied are described in this appendix. Analytics Setup A new report suite was created in Analytics with the settings shown in the screenshot below. This report suite is shared between all labs and attendees. It was created using the default template and just contains some standard settings. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 62

63 In addition, one success event (event1) and one conversion variable (evar1) were configured and used throughout the lab exercises to track conversions. The following images illustrate how the event and variable was set up. evar1 was configured to a simple container for the amount that a site visitor donated. Event1 was configure as a simple counter for donations. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 63

64 For more information on Analytics setup and configuration please refer to the links provided in the Links and Resources section. Target Setup No specific configuration was done in Target besides the creation of the 2 audiences for small and major donors that were used in the lab. One thing to note is that we used the auto creation feature for the global mbox that Target provides. You can find this in Target under Implementation > Edit Mbox.js Settings in the left rail. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 64

65 The setup for the 2 audiences is shown below. It uses the profile parameter that was set up in DTM and which holds the value for provious donations of a user. For small donors we expect a value greater than 0 and smaller than 100. For major donors we expect a value that is greater or equals 100. For more information on Target setup and configuration please refer to the links provided in the Links and Resources section. Appendix 2: AEM and Analytics Page Names Analytics uses a so called pagename to identify a page. A pagename is basically a string that identifies a page record in Analytics which holds information about page views, visitors, etc. If no pagename is specified, Analytics automatically uses the URL of the page as pagename. But in many cases the URL is not really sufficient as it can change over time. For more details on Analytics pagenames and how to set them when implementing Analytics, see resources in the Links and Resources section. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 65

66 In AEM the pagename is used when reports for a page are retrieved from Analytics as it is the case with Content Insight. Content Insight and other places exposing Analytics data in AEM get the info about the Analytics config to be used from the Analytics Cloud service that is associated with a resource. This is why the Cloud Service still needs to be configured even though in the lab scenario we use DTM to activate Analytics on web pages. In case the pagename is set via DTM, AEM needs to know how to construct the pagename so it can request the correct reports for a page. If you have an AEM-Analytics framework configured for your Cloud Service and mapped one of the provided AEM variables to the pagename in the framework, then the AEM-Analytics integration will use the value of this variable to construct the pagename. Available variables are page title or page path among others. If nothing is mapped to pagename in the AEM framework as it is the case in our lab, AEM generates a default pagename by taking the page path, removing the leading / and replacing all other / with a :. So a sample mapping would look like: /content/mysite/mypage => content:mysite:mypage If you choose another pagename for your setup, you can still let AEM know about it by providing your own implementation of com.day.cq.analytics.sitecatalyst.analyticspagenameprovider which allows for more complex page name generation. You can also refer to the following documentation for more details: Appendix 3: Extending Content Insights Content Insights uses the Sling Resource Merger to define the differences against the default Content Insights configuration delivered with AEM. For documentation on how to use the Sling Resource Merger in AEM consult For the specific case of Content Insights you need to utilize the overlay mechanism of the Sling Resource Merger and define an overlay of /libs/cq/contentinsight/content/insight which defines the cards to be visualized. Overlaying requires you to create a skeleton for this under /apps/cq/contentinsight/content/insight (use nt:unstructured as nodetype) as well as the substructure for the cards which you do not intend to modify jcr:content/content/items/grid/items/grid-0/items To remove a card you define a node with the nodename as defined under /libs and add the property sling:hideresource with a boolean value false. Adding cards requires to define new nodes analog to the ones already defined underneath /libs. You can define the position of the new cards with the property sling:orderbefore. In this lab Analytics is used to collect data. So you can stick with the resourcetype cq/contentinsight/components/cards/statistics and set the property provider to reportingservices. You now can define the following properties to define which data gets looked up and how it gets visualized: TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 66

67 metrics (String[]) Defines one or more metrics for which the values will be looked up. quickfact (String) Defines for which metric will be displayed as quickfact. quickfactunit (String) Unit visualized next to the quickfact metric type (String) One of the available visualization types for the various graph types: o o o rankedmetric -> Donut chart rankedmultimetric -> Bar chart timeseries -> Line Chart Appendix 4: DTM Scripts This appendix lists the DTM scripts used in this lab. Note that those scripts are examples and will likely have to be adapted to your requirements and environment when you apply those in your own setups. Total Donation data element (DESKTOP/L302/dtm/dataelements/TotalDonation.js) return ContextHub.get("/donation/total"); Context Hub Page Load Rule (DESKTOP/L302/dtm/rules/pageload/ContextHub.js) if (typeof window.summitaemintegrationlab === "undefined") { window.summitaemintegrationlab = {}; window.summitaemintegrationlab.firstload = true; } TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 67

68 window.summitaemintegrationlab.triggerglobalmboxupdate = function() { var params = [ "target-global-mbox" ]; if(_satellite.gettoolsbytype("tnt")) { var globalmboxmappings = _satellite.gettoolsbytype("tnt")[0].settings.pageparams; for (var p in globalmboxmappings) { var val = _satellite.getvar(globalmboxmappings[p].replace(/%/g, '')); params.push(p + "=" + val); } } console.log("triggering global mbox update", params); mboxupdate.apply(this, params); // give global mbox update a few ms to finish settimeout(function() { window.summitaemintegrationlab.triggermboxupdates() }, 400); } window.summitaemintegrationlab.triggermboxupdates = function() { console.log("triggering mbox update"); CQ_Analytics.TestTarget.callMboxUpdate(); } ContextHub.eventing.on(ContextHub.Constants.EVENT_STORE_UPDATED, function(e) { if (window.summitaemintegrationlab.firstload) { window.summitaemintegrationlab.firstload = false; } else { window.summitaemintegrationlab.triggerglobalmboxupdate(); } TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 68

69 }, null, true); Page Name data element (DESKTOP/L302/dtm/dataelements/PageName.js) var pagename = window.location.pathname; pagename = pagename.substring(1, pagename.lastindexof(".")); // remove.html and leading / pagename = pagename.replace(/\//g, ":"); // replace / with : return pagename; Analytics custom page code (DESKTOP/L302/dtm/dataelements/PageName.js) return window.location.port == 4503; Appendix 5: Asynchronous mbox calls In this lab we use synchronous mbox calls which can have performance implications for a bigger number of mboxes on a page. For cases where mbox are further down on the page and/or are not in the viewport from the beginning, you may want to consider loading them with an asynchronous request by using an mboxdefine/mboxupdate combination. In the AEM authoring environment, this can be controlled via the accurate Targeting setting in the Target components edit dialog as shown in the image below. You might want to avoid this strategy for prominent directly visible components as this might introduce flickering at the time the asynchronous request completes when the offer is swapped. TL04: Integrating Experience Manager with Adobe Analytics, Target and DTM 69