Configuring Adobe Analytics and Acoustic Exchange

1. In the Adobe Analytics Dashboard, click the Web property that you created in the prerequisites.
2. Go to Rules > Page Load Rules
3. Click Create New Rule button.
4. Provide a name for the rule.
5. In the Conditions, select Trigger rule at: Top of Page
6. Go to JavaScript / Third-Party Tags tab.
7. Select the Sequential HTML option.
8. Click Add new script button.
   • Provide a name for the tag.
   • Select Type: Sequential HTML
   • Add the Acoustic Exchange enablement key code that you copied in Step 1.

     
     <script type="text/javascript" src="//commercelibs.ibm.com/common/ubxCapture.js"> </script>
     <script> var channelID ="<<channel tenant ID>>"; 
     ubxCapture.setTenantID("WRTP",channelID); 
     ubxCapture.setTenantID("AA","<<UBX Events only authentication key for Adobe Analytics Endpoint>>");
     </script> 
     <script type="text/javascript"> ubxCapture.setID("<<UBX Capture Enablement Key>>");
     </script>
     

     • The highlighted lines of code do not exist in the enablement key and should be added manually.
     • Replace the string <<channel tenant ID>> with the channel tenant ID of your channel.
     • The variable channelID specified here must be the same as the value for Path attribute of Data element that you will create in Step 3.
     • For more information about <<UBX Events only authentication key for Adobe Analytics Endpoint>>, see the section "Configure tagging and analytics library in UBX Capture" in the topic Configuring Acoustic Personalization in UBX Capture
9. Click Save. Next, click Save Rule.

The new rule is displayed in Page Load Rules tab.

1. Click Create New Rule button.
2. Provide a name for the rule.
3. In the Conditions, select Trigger rule at: Onload
4. Click JavaScript / Third-Party Tags tab.
5. Click Add new script button. 
6. Provide a name for the tag. 
7. Select Sequential JavaScript
8. Select the Execute Globally check box.

9. Add the following code snippet.

   For Multi-Page Application (MPA), add the following code snippet.

   
   var ubxEvents = []; 
   var identifiersMapper = [];    
   var attributesMapper = [];
   ibm_ubx.registerCallback("WRTP", function (eventPayload){
          if (eventPayload) 
               {
                  ubxEvents.push(eventPayload);
               }
   });
   //Personalization 
   if (wrtp != undefined || wrtp != {}) {
                   const WRTP = wrtp.ole.JsWRTP.create();
   
                   const zoneId = "<<ZoneID of the zone registered for personalization>>";
   
                   WRTP.getContentId(zoneId)
                       .then((contentId) => {
                           let zoneArea = WRTP.getZoneArea(zoneId);
                           if (contentId !== 'DCIDNF404') {
                               if (zoneArea) {
                                   //Add code to render personalized content
                                   zoneArea.style.opacity = 1;
                               } else {
                                   console.log("WRTP: ${zoneId} personalized and not displayed");
                               }
                           } else {
                               if (zoneArea) {
                                  //Add code to render default content
                                   zoneArea.style.opacity = 1;
                               } else {
                                   console.log("WRTP: ${zoneId} not personalized and not displayed");
                               }
                           }
                       })
                       .catch((error) => {
                           console.log("WRTP: Error occurred during zone personalization");
                       });
         } else {
                   console.log("WRTP: Error in loading the online-engine library.");
         }
   

   • In the code snippet, replace the text <<ZoneID>> with the registered zone ID.
   • This code snippet is for a single zone. For multiple zones, see the example code snippet in the topic Configuring the zones on MPA
   For Single-Page Application (SPA), add the following code snippet.

   
    var ubxEvents = []; 
    var identifiersMapper = [];    
    var attributesMapper = [];
    ibm_ubx.registerCallback("WRTP", function (eventPayload){
          if (eventPayload) 
               {
                  ubxEvents.push(eventPayload);
               }
    });
   

   Next, add the personalization code for SPA, as described in the topic Configuring the zones of Angular SPA
10. Click Save.
11. Click Save Rule.