Integrate AEM Sites and Experience Platform Web SDK

Transcript

Alright, the next logical step is how to add the WebSTK JavaScript library to our Weaken website to collect and send this data to the platform. As you guessed, we have to use data collection tags or formerly known as LAUNCH. So let’s create a tag property, then install the tag extension called Experience Platform WebSTK and configure it. First, click on tags in the left navigation, then click on the New Property button to create a new tag property. Give it a name and for the Domains field, as we are using AIM as a cloud service environment, we will add adobeamcloud.com. Once done, save the new property. Next, go to the Extensions menu item and install the WebSTK extension by searching for WebSTK. While configuring it, you can leave the default settings but configure the data stream section and use the data stream we created in earlier step. For real production setup, you will configure all three environments and not just production. Finally, save the changes. In order to collect the Weakened pageview data, we have to define a few data elements like page name, site section, hostname and this can be captured from the data layer of the web page. If you recall, the Weakened site is built using WCM core components and these components are integrated with Adobe Client Data Layer. The Adobe Client Data Layer is a platform-agnostic standard method to expose and access any type of web data from any JavaScript library. So before we define the data elements, let’s review the Adobe Client Data Layer on the Weakened homepage. In the browser console, type adobedataleer.getstate to review the current state of the data layer. We can see the information about the page data like page name, path and more. And when a web page is loaded, the CMP show event is triggered with the page data object. Let’s use this page data object’s properties to define the data elements using custom JavaScript code. First, click on data elements in the left navigation, then add data element. Give it a name and select custom code for the type, then open editor to add the JavaScript code. This code performs few not null checks and simply returns the DC title property value which is nothing but the web page title. Next, let’s define the site section. We will use the RepoPath property value, but replace the slash with the colon and remove the redundant content term from it. Finally, let’s define the HostName data element by using the window.location.hostname object. All right. The tag property creation is coming along well. Next, we have to map these data elements to the XTM schema we defined in very first step. Remember, the schema provides the standard structure, so this collected data has to be mapped to the fields of the XTM object. To do that, we have to create a new data element. Let’s call it XTM content and extension as a platform web SDK and type as XTM object. Then select our weekend schema. Then expand the web and web page details object, map name, server and site section with respective data elements and finally save the changes. Perfect. By creating data elements, we have provided the necessary instructions on how to extract the web page data and map it to the XTM schema. The next step is to send this data to the platform edge network. For that, we have to create a tag rule. First, click on rules in the left navigation, then add rule button. The tag rule is comprised of event, condition and action. So in our case, the event is when a weekend page is loaded which triggers the CMP show event from the data layer. So let’s handle that by creating an event configuration. Here select the custom code option from the event type. Then open the editor to add the JavaScript code. This code adds the event listener and callback function for the CMP show event, then pushes it onto the Adobe client data layer. The callback function gets the information about the element that triggered this event using get state method. Finally, it triggers this tag rule by calling the trigger method with the new event object containing the page data object. Also, remember using this event and page data object, we created the data elements like page name and site section. Next, let’s add action to this tag rule by creating an action configuration. For the extension field, select the Adobe Experience Platform web SDK option and for action type, select the send event. Then in the right panel, select the page views event type and select XTM content data element. Finally, save all your changes and provide a name for this tag rule. Here I’m naming it as all pages hyphen onload, meaning it gets loaded on all the pages when page is loaded. This completes the tag rule creation, it’s time to publish it by creating a library. Let’s jump to the publishing flow menu item, which has a swim lane structure to activate your changes by following the review and approval process. So by creating the tag property, we have provided the necessary details about what data to collect, when to collect it and how to map it before sending it to the platform edge network.

Data Element and Rule-Event Code

• The Page Name Data Element code.

  if(event && event.component && event.component.hasOwnProperty('dc:title')) {
      // return value of 'dc:title' from the data layer Page object, which is propogated via 'cmp:show` event
      return event.component['dc:title'];
  }
  

• The Site Section Data Element code.

  if(event && event.component && event.component.hasOwnProperty('repo:path')) {
  let pagePath = event.component['repo:path'];
  
  let siteSection = '';
  
  //Check of html String in URL.
  if (pagePath.indexOf('.html') > -1) {
   siteSection = pagePath.substring(0, pagePath.lastIndexOf('.html'));
  
   //replace slash with colon
   siteSection = siteSection.replaceAll('/', ':');
  
   //remove `:content`
   siteSection = siteSection.replaceAll(':content:','');
  }
  
      return siteSection
  }
  

• The Host Name Data Element code.

  if(window && window.location && window.location.hostname) {
      return window.location.hostname;
  }
  

• The all pages - on load Rule-Event code

  var pageShownEventHandler = function(evt) {
  // defensive coding to avoid a null pointer exception
  if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      // trigger tags Rule and pass event
      console.debug("cmp:show event: " + evt.eventInfo.path);
      var event = {
          // include the path of the component that triggered the event
          path: evt.eventInfo.path,
          // get the state of the component that triggered the event
          component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };
  
      // Trigger the tags Rule, passing in the new 'event' object
      // the 'event' obj can now be referenced by the reserved name 'event' by other tags data elements
      // i.e 'event.component['someKey']'
      trigger(event);
      }
  }
  
  // set the namespace to avoid a potential race condition
  window.adobeDataLayer = window.adobeDataLayer || [];
  
  // push the event listener for cmp:show into the data layer
  window.adobeDataLayer.push(function (dl) {
      //add event listener for 'cmp:show' and callback to the 'pageShownEventHandler' function
      dl.addEventListener("cmp:show", pageShownEventHandler);
  });