Analytics library - Collect and integrate behavioral data

Create a web property for your channel

In AA, when you integrate your application, you must create a web property for your channel. Web properties help you install and manage your product-specific tags. For more information, see Create an Analytics property in Adobe Experience Platform Launch.

Add the created web property's production code snippet to your channel pages.

1. In Adobe Launch, from the Properties screen, click the property that you want to use.
2. Go to the Environment tab and click the Install icon for the Production environment.
3. From the pop-up window, copy the line of code.
4. Paste the copied code in the HEAD tag of your channel HTML pages.

Add the Exchange Capture enablement code

1. Go to Acoustic Exchange > Tools > Exchange Capture and click the Enablement Code icon.
2. Copy the Exchange Capture Enablement code and click Close.
3. In Adobe Launch, from the Properties screen, click the property that you created.
4. Go to the Rules tab, click Add Rule and provide a name for the rule.
5. In the Events section click Add and select Event Type as Library Loaded (Page Top).
6. Add an action by completing the following:
   • Select Extension – Adobe Analytics.
   • Select Action Type – Set Variables.
   • In the Variables section, select an eVar, for example, evar1. Then, select Set as and click the database icon and select Channel Tenant ID and click Select to add the value.
   • Continue by selecting the Props, for example, prop1. Then, select Set as and click the database icon and select Channel Tenant ID and click Select to add the value.
   • Click Keep Changes to save your changes.
7. Then, click Add to add another action and complete the following:
   • Select Extension - Core.
   • Select Action Type - Custom Code.
   • Provide a name.
   • Select Language - HTML.
8. Then, click Open Editor and add the Acoustic Exchange enablement key code.

    <script type="text/javascript" src="//lib-us-3.brilliantcollector.com/common/ubxCapture.js"></script>
<script type="text/javascript"> ubxCapture.setID("UBX CAPTURE ENABLEMENT KEY");
</script>

9. Before the setID function, specify the channel ID and the GA ID. This setting ensures that the Personalization and AA endpoints are paired in Exchange. The following code sample shows the script to add for providing the AA ID and the authentication key.

    <script> var channelID ="CHANNEL TENANT ID";
ubxCapture.setTenantID("WRTP",channelID); 
ubxCapture.setTenantID("AA","UBX EVENTS ONLY AUTHENTICATION KEY FOR ADOBE ANALYTICS ENDPOINT"); 
</script>

Example of the final Exchange code snippet added to your HTML files:

    <script type="text/javascript" src="//lib-us-3.brilliantcollector.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>

Add the personalization script to Adobe Analytics

1. In Adobe Analytics, create another new rule for the web property you created.
2. Go to the Rules tab, click Add Rule and provide a name for the rule.
3. In the Events field, select Event Type as Window Loaded. If several events are Window Loaded, ensure that this event is fired before other events.
4. Add an action by completing the following:
   • Select Extension - Core.
   • Select Action Type - Custom Code.
   • Provide a name.
   • Select Language – Javascript.
   • Select the Execute Globally check box.
5. Then, click Open Editor and add the following personalization script.
   • For MPA, add the following code snippet.

    var ubxEvents = [], attributesMapper = [], identifiersMapper = [], searchKeyword;
 
 ibm_ubx.registerCallback("WRTP", function (eventPayload) {
if(eventPayload) 
ubxEvents.push(eventPayload);
 });
 
 
 (function () {
 
// get the personalization object
if (acoustic != undefined || acoustic != {}) {
 
// access the personalization object
var personalizationObject = acoustic.personalization.PersonalizationLibrary.create();
 
// Create a DOM Element validator for the identified zones in the client application
var validateDOMElement = function (outlet) {
    var outletDiv = document.getElementById(outlet);  
    if (!(outletDiv instanceof Node)) {
        console.log(outlet, " is not a valid HTML element.");
        return null;
    }
    return outletDiv;
};
  
 // Helper functions for personalizationHandler
  
var displayDefaultContent = function (result, targetArea) {
    // Display the default content
    targetArea.style.opacity = 1;
}
 
var displayCustomUrl = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
           targetArea.style.background = "url(" + contentId + ") 0px 0px / cover no-repeat";     
           targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayWchUrl = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
         targetArea.style.background = "url(" + contentId + ") 0px 0px / cover no-repeat";       
        targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayCustomHtml = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
           targetArea.innerHTML = contentId;
           targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayWchHtml = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
        targetArea.innerHTML = contentId;
        targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayRecommendations = function (products, targetArea) {
    var recommendations = products.value;
    if (recommendations && recommendations !== 'CONNF404' && targetArea) {
        // Display the personalized recommendations
    } else {
        // Display the default recommendations
        displayDefaultContent(products, targetArea);
    }
}
 
// A handler at the client side to process the results
var personalizationHandler = function(result, targetArea)
 {
    switch(result.type) {
        case "recommendation": 
            displayRecommendations(result, targetArea);
            break;
        case "custom-url":
            displayCustomUrl(result, targetArea);
            break;
        case "custom-html":
            displayCustomHtml(result, targetArea);
            break;
        case "wch-url":
            displayWchUrl(result, targetArea);
            break;
        case "wch-html":
            displayWchHtml(result, targetArea);
            break;
        case "":
            displayDefaultContent(result, targetArea);
            break;
        }
}

// Configure personalization
personalizationObject.onReady(function(){
// Step 8 configure zones (Approach 1)
    var zones = [
                    {
                        "zoneId": "ZONE_ID_1",
                        "targetArea": "ELEMENT_ID_1",
                        "num": "NUMBER_OF_PRODUCTS_[OPTIONAL]"
                    },
                    {
                        "zoneId": "ZONE_ID_2",
                        "targetArea": "ELEMENT_ID_2",
                        "num": "NUMBER_OF_PRODUCTS_[OPTIONAL]"
        },
                ]
  

    zones.forEach(function(zoneObj) {
               
        var validElement = validateDOMElement(zoneObj.targetArea)
        if(validElement) {
            personalizationObject.getContent(zoneObj)
            .then(function(result) {
                personalizationHandler(result, validElement) 
            });
 
       //Optional code to capture click events
          personalizationObject.collectBehavior("ELEMENTID","EVENT ","ZONEID");
        }
    });
});
} else {
    console.log("Error in loading the Personalization library.");
}
})();

Where ZONE_ID_1is the ID of the Registered zone to be personalized. ELEMENT_ID_1is the Element Id in which personalization and recommendation is shown.

Modify the functions displayCustomUrl (), displayCustomHtml (), displayWchUrl(), displayWchHtml(), dislayRecommendations() and displayDefaultContent() in personalizationHandler as per the rendering logic for both personalization and recommendations. For detailed information, see Zone configuration for MPA.

• For single-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);
            }
 });

Create data elements

Data elements are references to specific parts of your site. Data elements collect variable values. You must create data elements to send the channel info with each AA event.

1. In Adobe Launch, go to Data Elements tab.
2. Click Add Data Element and provide the following information:
   • Enter the name for Channel Tenant ID.
   • Select Extension - Core
   • Select Data Element Type – Javascript Variable
   • In the Javascript Variable Name field, enter – channelID.

     The Javascript Variable Name value must be the same as the value provided in the enablement key code. In this case, the value is channelID.

   • Select Default Value as - (blank)
   • Select Storage Duration value – Session
3. Click Save.

Configure events

Configure the AA events and add the data element to send the channel info with each of the events to Exchange.

1. In Adobe Analytics, go to Rules tab and click Add Rule and provide the following information:
   • Provide the name event name, for example ProductView.
   • Go to Event, click Add.
   • Select Extension – Core
   • Select Event Type – Click
   • Select Specific Element.
   • In the Elements matching the CSS selector field, enter the ID and class of the HTML element. For example, a button.
   • Click Keep Change.
2. Go to Actions, click Add and provide the following information:
   • Select Extension – Adobe Analytics.
   • Select Action Type – Send Beacon.
   • Select s.tl() – Send data to Adobe Analytics and do not treat it as a page view.
   • Select Link Type – Custom Link.
   • Provide Link Name – Based on the event you are creating (for ex. event name: ProductView)
   • Click Keep Change.
3. Continue to add the following action:
   • Select Extension – Core.
   • Select Action Type – Custom code.
   • Provide a name.
   • Select Language – JavaScript.
   • Click Open Editor.
   • Add the following code for ProductView event.

• For MPA:

    attributesMapper.push({ "adobeName": "prop1", "ubxName": "channeltenantId", "type": "string" });
adobe_ubx.sendEventFromJSONPayload(window.s, identifiersMapper, "ibmproductView", attributesMapper);

• For SPA

    attributesMapper = [];
attributesMapper.push({ "adobeName": "prop1", "ubxName": "channeltenantId", "type": "string" });
adobe_ubx.sendEventFromJSONPayload(window.s, identifiersMapper, "ibmproductView", attributesMapper);

4. Click Keep changes and then click Save to save the rule.

Similarly, continue to add the code for all the events. For handling the batch events that consist of both CartPurchase and CartPurchaseItem events, you need to add a custom code. For more information, see Configuring CartPurchaseItem events.

For information about the various Adobe Launch event attributes and their mapping, see Acoustic Exchange Dyanmic Event Library.

Publish the rules

1. In Adobe Analytics, go to Publishing tab.
2. In the Development card, click Add New Library button.
3. Provide the required details, such as Library name, Environment and Resource.
4. Click Add All Changed Resources.
5. Click Save and Build for Development.
6. Click the Actions menu for the Library list from Development and click Submit for Approval. The library is now listed in the Submitted card.
7. Click the Actions menu for the Library list from Submitted card and click Build for Staging.
8. After the rules are approved, they are listed in the Approved card. Click the Actions menu for the library list and click Build for Production.

📘

Tip:

For more information about configuring the Personalization libraries and the zones on your channel, see Configure library and Configure zones on your channel.

📘

Note:

If you are using the new exchange capture UI, setup the Exchange Capture on your website.

Create a web property for your channel

In AA, when you integrate your application, you must create a web property for your channel. Web properties help you install and manage your product-specific tags. For more information, see Create an Analytics property in Adobe Experience Platform Launch.

Add the created web property's production code snippet to your channel pages.

1. In Adobe Launch, from the Properties screen, click the property that you want to use.
2. Go to the Environment tab and click the Install icon for the Production environment.
3. From the pop-up window, copy the line of code.
4. Paste the copied code in the HEAD tag of your channel HTML pages.

Add the Exchange Capture enablement code

1. Go to Acoustic Exchange > Tools > Exchange Capture and click Copy embed code.
2. Copy the Enablement code and click Close.
3. Then, go to your channel's HTML files. Paste the copied lines to your channel code as follows:
   • For a SPA, paste these two lines at the beginning of the HEAD tag of your index.html before the Adobe launch script.
   • For MPA, paste these two lines at the beginning of the HEAD tag of each HTML page before the Adobe launch script..

Add the personalization script to Adobe Analytics

1. In Adobe Analytics, create another new rule for the web property you created.
2. Go to the Rules tab, click Add Rule and provide a name for the rule.
3. In the Events field, select Event Type as DOM Ready. If several Rules are DOM Ready, ensure that this rule is fired before other rules.You can also use the existing rule and have multiple Actions in that rule and this action is fired first.
4. Add an action by completing the following:
   • Select Extension - Adobe Analytics.
   • Select Action Type - Set Variables.
   • Provide a name.
   • In the Variables section, select an eVar. For example:evar1.
   • Next, select Set as in the Value field.
   • Click the database icon and select Channel tenant ID.
   • Click select
5. Repeat the same steps for Props.
6. Click Keep Changes to save your changes.
7. Add an action by completing the following:
   • Select Extension - Core.
   • Select Action Type - Custom Code.
   • Provide a name.
   • Select Language – Javascript.
   • o Select the Execute Globally check box.
8. Then, click Open Editor and add the following personalization script.
   • For MPA, add the following code snippet.

    var ubxEvents = [], attributesMapper = [], identifiersMapper = [], searchKeyword;
 
 ibm_ubx.registerCallback("WRTP", function (eventPayload) {
if(eventPayload) 
ubxEvents.push(eventPayload);
 });
 
 
 (function () {
 
// get the personalization object
if (acoustic != undefined || acoustic != {}) {
 
// access the personalization object
var personalizationObject = acoustic.personalization.PersonalizationLibrary.create();
 
// Create a DOM Element validator for the identified zones in the client application
var validateDOMElement = function (outlet) {
    var outletDiv = document.getElementById(outlet);  
    if (!(outletDiv instanceof Node)) {
        console.log(outlet, " is not a valid HTML element.");
        return null;
    }
    return outletDiv;
};
  
 // Helper functions for personalizationHandler
  
var displayDefaultContent = function (result, targetArea) {
    // Display the default content
    targetArea.style.opacity = 1;
}
 
var displayCustomUrl = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
           targetArea.style.background = "url(" + contentId + ") 0px 0px / cover no-repeat";     
           targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayWchUrl = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
         targetArea.style.background = "url(" + contentId + ") 0px 0px / cover no-repeat";       
        targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayCustomHtml = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
           targetArea.innerHTML = contentId;
           targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayWchHtml = function (content, targetArea) {
    var contentId = content.value
    if (contentId && contentId !== 'CONNF404' && targetArea) {
        // Display the personalized content
        targetArea.innerHTML = contentId;
        targetArea.style.opacity = 1;
    } else {
        displayDefaultContent(content, targetArea);
    }
}
 
var displayRecommendations = function (products, targetArea) {
    var recommendations = products.value;
    if (recommendations && recommendations !== 'CONNF404' && targetArea) {
        // Display the personalized recommendations
    } else {
        // Display the default recommendations
        displayDefaultContent(products, targetArea);
    }
}
 
// A handler at the client side to process the results
var personalizationHandler = function(result, targetArea)
 {
    switch(result.type) {
        case "recommendation": 
            displayRecommendations(result, targetArea);
            break;
        case "custom-url":
            displayCustomUrl(result, targetArea);
            break;
        case "custom-html":
            displayCustomHtml(result, targetArea);
            break;
        case "wch-url":
            displayWchUrl(result, targetArea);
            break;
        case "wch-html":
            displayWchHtml(result, targetArea);
            break;
        case "":
            displayDefaultContent(result, targetArea);
            break;
        }
}

// Configure personalization
personalizationObject.onReady(function(){
// Step 8 configure zones (Approach 1)
    var zones = [
                    {
                        "zoneId": "ZONE_ID_1",
                        "targetArea": "ELEMENT_ID_1",
                        "num": "NUMBER_OF_PRODUCTS_[OPTIONAL]"
                    },
                    {
                        "zoneId": "ZONE_ID_2",
                        "targetArea": "ELEMENT_ID_2",
                        "num": "NUMBER_OF_PRODUCTS_[OPTIONAL]"
        },
                ]
  

    zones.forEach(function(zoneObj) {
               
        var validElement = validateDOMElement(zoneObj.targetArea)
        if(validElement) {
            personalizationObject.getContent(zoneObj)
            .then(function(result) {
                personalizationHandler(result, validElement) 
            });
 
       //Optional code to capture click events
          personalizationObject.collectBehavior("ELEMENTID","EVENT ","ZONEID");
        }
    });
});
} else {
    console.log("Error in loading the Personalization library.");
}
})();

Where ZONE_ID_1is the ID of the Registered zone to be personalized. ELEMENT_ID_1is the Element Id in which personalization and recommendation is shown.

Modify the functions displayCustomUrl (), displayCustomHtml (), displayWchUrl(), displayWchHtml(), dislayRecommendations() and displayDefaultContent() in personalizationHandler as per the rendering logic for both personalization and recommendations. For detailed information, see Zone configuration for MPA.

• For single-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);
            }
 });

Create data elements

Data elements are references to specific parts of your site. Data elements collect variable values. You must create data elements to send the channel info with each AA event.

1. In Adobe Launch, go to Data Elements tab.
2. Click Add Data Element and provide the following information:
   • Enter the name for Channel Tenant ID.
   • Select Extension - Core
   • Select Data Element Type – Javascript Variable
   • In the Javascript Variable Name field, enter – channelID.

     The Javascript Variable Name value must be the same as the value provided in the enablement key code. In this case, the value is channelID.

   • Select Default Value as - (blank)
   • Select Storage Duration value – Session
3. Click Save.

Configure events

Configure the AA events and add the data element to send the channel info with each of the events to Exchange.

1. In Adobe Analytics, go to Rules tab and click Add Rule and provide the following information:
   • Provide the name event name, for example ProductView.
   • Go to Event, click Add.
   • Select Extension – Core
   • Select Event Type – Click
   • Select Specific Element.
   • In the Elements matching the CSS selector field, enter the ID and class of the HTML element. For example, a button.
   • Click Keep Change.
2. Go to Actions, click Add and provide the following information:
   • Select Extension – Adobe Analytics.
   • Select Action Type – Send Beacon.
   • Select s.tl() – Send data to Adobe Analytics and do not treat it as a page view.
   • Select Link Type – Custom Link.
   • Provide Link Name – Based on the event you are creating (for ex. event name: ProductView)
   • Click Keep Change.
3. Continue to add the following action:
   • Select Extension – Core.
   • Select Action Type – Custom code.
   • Provide a name.
   • Select Language – JavaScript.
   • Click Open Editor.
   • Add the following code for ProductView event.

• For MPA:

    attributesMapper.push({ "adobeName": "prop1", "ubxName": "channeltenantId", "type": "string" });
adobe_ubx.sendEventFromJSONPayload(window.s, identifiersMapper, "ibmproductView", attributesMapper);

• For SPA

    attributesMapper = [];
attributesMapper.push({ "adobeName": "prop1", "ubxName": "channeltenantId", "type": "string" });
adobe_ubx.sendEventFromJSONPayload(window.s, identifiersMapper, "ibmproductView", attributesMapper);

4. Click Keep changes and then click Save to save the rule.

Similarly, continue to add the code for all the events. For handling the batch events that consist of both CartPurchase and CartPurchaseItem events, you need to add a custom code. For more information, see Configuring CartPurchaseItem events.

For information about the various Adobe Launch event attributes and their mapping, see Acoustic Exchange Dyanmic Event Library.

Publish the rules

1. In Adobe Analytics, go to Publishing tab.
2. In the Development card, click Add New Library button.
3. Provide the required details, such as Library name, Environment and Resource.
4. Click Add All Changed Resources.
5. Click Save and Build for Development.
6. Click the Actions menu for the Library list from Development and click Submit for Approval. The library is now listed in the Submitted card.
7. Click the Actions menu for the Library list from Submitted card and click Build for Staging.
8. After the rules are approved, they are listed in the Approved card. Click the Actions menu for the library list and click Build for Production.

📘

Tip:

For more information about configuring the Personalization libraries and the zones on your channel, see Configure library and Configure zones on your channel.