Configuring Google Analytics and Acoustic Exchange

As a part of Acoustic Exchange integration with your Single-Page Application (SPA) or Multi-Page Application (MPA), you must configure a tagging and analytics engine such as Google Analytics (GA).

Note: Acoustic Exchange was formerly known as IBM Universal Behavior Exchange (UBX).

Configuring Google Analytics with your channel

For detailed information about configuring Google Analytics with your channel, see any of the following documentation:

Notes:

In case of Single-Page Application (SPA), you must add the tracking code snippet at the beginning of HEAD tag of the index.html page.
In case of Multi-Page Application (MPA), you must add the tracking code snippet at the beginning of HEAD tag of each HTML page.
In both the cases, Replace GA_TRACKING_ID with your own Google Analytics tracking ID.

How to find Google Analytics tracking ID?

To find your Google Analytics tracking ID:

Sign in to your Analytics account.
Click Admin.
Select an account from the menu in the ACCOUNT column.
Select a property from the menu in the PROPERTY column.
Under PROPERTY, click Tracking Info > Tracking Code. Your tracking ID is displayed at the top of the page.

Step 1:

Get the UBX Capture Enablement Key:

In UBX, navigate to UBX Capture from the Tools menu.
Click Enablement Key icon, and copy the two lines of code that contain the enablement key.

Paste the two lines with the UBX Capture Enablement Key to the beginning of HEAD tag of your index.html in case of SPA. In case of MPA, paste it at the beginning of HEAD tag of each HTML page. The highlighted lines of code do not exist in the enablement key and should be added manually when you add the code snippet to your SPA or MPA.


<script type="text/javascript" src="//path/to/ubxCapture.js"></script>
<script> ubxCapture.setTenantID("WRTP","<<channel tenant ID>>");
ubxCapture.setTenantID("GA","<< Events only authentication key for Google Analytics endpoint in UBX>>");
</script>
<script type="text/javascript"> ubxCapture.setID("UBXCapture_EnablementKey"); </script>

Step 2:

Add the tracking code to your SPA or MPA

In case of Single-Page Application, add the following code at the beginning of HEAD tag of index.html page. In case of Multi-Page Application, add the following code at the beginning of HEAD tag of each HTML page. This code enables Google Analytics to track the visitor behavior on your channel.

Note: Update the identifiers mapper array according to the guidelines. For more information, see UBX unique identifier types


<script>var ubxEvents = [];</script> 
<script defer type="text/javascript">
        (function (i, s, o, g, r, a, m) {
            i["GoogleAnalyticsObject"] = r;
            (i[r] =
                i[r] ||
                function () {
                    (i[r].q = i[r].q || []).push(arguments);
                }),
                (i[r].l = 1 * new Date());
            (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m);
        })(
            window,
            document,
            "script",
            "https://www.google-analytics.com/analytics.js",
            "ga"
        );

        ga("create", "GA Tracking ID", "auto");
        ga("require", "ec");

        var identifiersMapperArray = [], ubxInformation;
        ga(function (tracker) {
            var clientId = tracker.get('clientId');

 /*This code snippet uses clientID as an example. You must decide the identifier and use the same. 
Refer to the guidelines for adding array for UBX identifiers. */ 

            identifiersMapperArray.push({ "name": "gaClientId", "value": clientId });
        });
        ga(function () {
            var tracker = ga.getByName("t0");
            var originalSendHitTask = tracker.get("sendHitTask");
            tracker.set("sendHitTask", function (model) {
                originalSendHitTask(model);
                var payLoad = model.get("hitPayload");
                console.log("model=" + JSON.stringify(model));
                var hitType = model.get("hitType");
                google_ubx.sendEventFromPayload(payLoad, identifiersMapperArray);
            });
        }); 

    </script>

Step 3:

Prerequisites:

You must have one custom dimension available for Acoustic Personalization to send the channelTenantId information.

Log in to Google Analytics and create a custom dimension field with User's scope. Name the field as channelTenantId. For more information about how to create custom dimensions in Google Analytics, see this web page.

After you create the custom dimension, copy the below code snippet and paste it inside the BODY tag of your index.html page for a SPA. In case of MPA, place it inside the BODY tag of each HTML page.

Note: The following code snippet assumes that dimension1 is configured in Google Analytics. If you are using a different dimension index, then replace dimension1 with appropriate dimensionN and cd1 with respective cdN.



<script>
window.addEventListener('load', function() {
            try {
                google_ubx.googleToUBXAddToCartEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXCartPurchaseEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXCartPurchaseItemEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXFormErrorEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXPageViewEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXProductRatingEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXProductReviewEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXProductViewEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXRemoveFromCartEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXVideoCompletedEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXVideoEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXVideoLaunchedEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXVideoPausedEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
                google_ubx.googleToUBXVideoPlayedEvent.attributesMapper.push({ "googleName": "cd1", "ubxName": "channeltenantId", "type": "string" });
            } catch (error) {
                console.error(error); 
            }
            ga('set', 'dimension1', "<<channel tenant ID>>" );
            
            ibm_ubx.registerCallback("WRTP", function (eventPayload) {
                if(eventPayload) {
                    ubxEvents.push(eventPayload);
                }
            });
        });
</script>

Step 4:

Enable Google Analytics tagging:

Enable the Google Analytics tagging for your SPA or MPA, and ensure that the events are being captured. Here is one of the approaches that you can use.

You can include the Google Analytics events that you would like to track through a script, by using any of the following approaches:
- Option A: Include all your events in a separate .JS file and reference that JS file in the <script> tag of your HTML page.
- Option B: Include all your events directly in the <script> tag inside the HEAD tag of your HTML page.
Attach these events to your buttons or links or other user-click events, as shown in the following code snippet:
```
providedRating : function(){
  ga('send', 'event', 'Ecommerce', 'providedRating', { 'nonInteraction': 1 });
}
```
Your channel (SPA or MPA) is now being tracked by Google Analytics and UBX. You can monitor the incoming events in the UBX dashboard by logging in to your UBX account.

References

For more information about integrating UBX with Google Analytics, see Integration of UBX with Google Analytics