Load and fire a Target call load-fire-target

Transcript

Hi there, in this video, let me give you a quick introduction to the core components out of the box integration with Adobe client data layer, and how to access the data stored in a data layer, to drive business goals using Adobe Experience Platform launches data elements. A data layer is a JavaScript object that web developers can add to sites to collect systematic data about the delivered content and the visitors interaction with it. Adobe Experience Manager Cloud Service provides a set of components to speed up development and reduce maintenance costs. Marketers use these components to author content for an organization’s marketing needs. Let’s get started. I have a sample reference we WKND Site hosted on AEM Cloud Service, and let’s open the sample page to view it. The site pages comprises of AEM core competence. Let’s preview the site page and open the browser’s Developer Console. Adobe data layer object contains information about page metadata and component details. Adobe data layer object provides access to stored client data, and enables you to add additional client data to it. Core components out of the box integration with Adobe client data layer helps business users collect information about how users interact with these components. And that information is used to optimize the end user experience. You can also add or remove event listeners to it. Adobe data layer provides a standardized API and support the XDM data model that allows customer experience tracking. Now let’s open a new tab in the browser and open launch UI. Let’s quickly locate the launch property name, that we obtained from the previous step and open it. Now let’s create a rule in Adobe launch UI, to capture page information from a site page. Please create a new rule or open an existing rule, and let’s add a new event to trigger the rule. Select the extension as core and then choose a custom code event. Open the code editor and let’s copy the code snippet that will add an event listener by pushing a function into the data layer. When the CMP show event is triggered on your site page, the page show event handler function is called. A few sanity checks are added in this function, and a new data object is created with the latest state of the data layer for the component that triggered the event. After that, the trigger data object is called. Trigger function is reserved name in launch and will trigger the launch rule. We’ve pass the event object as a parameter, which will be exposed by another reserved name in launch name event. Data elements in launch can now reference various properties like event dot component and then provide a key to get the value. Let’s save our changes for the rule event. Select the data elements authoring option, and let’s create data elements for capturing page ID, page name and page path. Provide data element name, select the extension as core, select the data element type as custom code, and then open the code editor. At the beginning of this video, we discovered how the data layer object for our sample site looks and observed some of the page metadata stored in the data layer. When we created the rule, we exposed a custom event object in the script made available and scoped based on the event that triggered the rule in launch. The value of a data element is not set until the data element is referenced within a rule. Therefore, it is safe to use this data element inside a rule like the launch library loaded rule, created in the previous step. But would not be secure to use it in other contexts. So using the event object, we can obtain the page ID value for our site page. Save your changes, and let’s navigate back to the data elements screen. Similarly, let’s create two data elements for capturing page path and page title using the event object passed by the page load event. Now, let’s navigate to our page load rule and use the data elements that we created in the previous step.

Now let’s create a custom code to save cookies, if you’re using a cloud based instance. Users sometimes use a cloud based instances, with target for testing or simple proof of concept purposes. These domains and many others are part of a public suffix list. Modern browsers won’t save cookies if you’re using these domains, unless you customize the cookie domain setting under target global settings. So let’s add a custom code to our site before loading target. Add your domain to the target global settings dot cookie domain value, and then save your changes. Click on the Add action option, and then select the extension as Adobe target with action type as load target. On rule execution, this action loads Adobe target to your site page. And let’s create another action to add data elements as a parameter to our page load request. Select the extension as Adobe target, action type as add params to page load request. Let’s create a key value mapping for the parameter name and its associated value in the action configuration window. You could provide a custom parameter name and choose a data element using the Finder option for the value. Repeat the step for page title and the page path parameters. At this point, we have actions to load target, and to add params to page load request. We need to create another action to make a call to Adobe target with the parameters. Create another action with the extension as Adobe target, action type as a fire page load request. Select the body hiding as enabled, and then save your changes. The changes gets saved within launch. But we need to run a publishing flow to push these changes to a publish environment. Select the publishing flow option. You can create a new library using the Add new library option or use an existing library. I have a development library created before, and let’s open to edit it. Now it’s time to add all our changes to the development environment, and then Save and Run the development build. If the build is successful, you could verify your changes by embedding the launch development script library onto your site page. For now, I’m pushing my changes from development to the production environment. Once the build is successful, let’s switch to our WKND site homepage and refresh the screen. To see if the rule works as expected, let’s use the Adobe Experience Cloud Debugger browser plugin. Click on the summary view and you can notice that the Adobe target extension is loaded under Adobe Experience Platform Launch. Under Adobe target summary, you can view the version of the eighty.gs file loaded on your site page. Filter the network request for target and check the post body attribute. Under the parsed value, you can notice that the page ID, page path and page title are being passed as parameters to Adobe target. I hope I was able to give you an idea on how to capture information from a site page using data elements, and then fire an Adobe target call with the data elements as request parameters. -