Unbxd Analytics Integration through Google Tag Manager

Introduction to Unbxd Analytics

Tracking visitor analytics and behavior are essential in order to provide accurate and visitor-specific search and category page results. UNBXD analyzes visitor events, such as product clicks, products added to cart, orders, etc. These events are tracked using browser cookies. With this information, a profile is built for every visitor, based on his/her affinity to different categories, brands, or prices.

This information is then aggregated and analyzed for two purposes:

Generating reports

Providing relevant and personalized search & category pages results

When visitors browse through your store, the integrated trackers log everything visitors do - the products they visit, orders, even the various store properties they interact with. We take that information, analyze it, and assemble a detailed profile of the visitor. We know their browsing patterns, preferences and can even determine susceptibility to merchandising campaigns. The trackers are unique tracking codes that must be configured onto the store properties that yield an interaction. We call this interaction as an "event", for example, on the "Add to Cart" button.

The visitor profiles help fetch relevant and personalized products as search results. It also helps in generating detailed reports.

For Unbxd E-commerce Search to function correctly on your site, Unbxd Analytics must be configured.

Integration through GTM

Unbxd analytics can be integrated through Google Tag Manager. GTM consists of a single snippet of javascript code that you install on your site. After the snippet has been installed, you can manage many other javascript snippets, or “tags”, that need to be installed.

Basic components of GTM

Following are the basic components within Google Tag Manager:

Containers - Use it to contain all the other components using in the tags implementation.

Triggers - Define when to fire the tags.

Variables & constants - Collect specific information and pass onto data layer.

Data layers - A JavaScript object which keeps the information tags separate from other code.

Requirements for Unbxd tracking through GTM

Below are the requirements for Unbxd tracking integration:

Unbxd requires a tag which will need to be loaded on all the pages. Below is the required code block for Unbxd analytics script. This should be loaded before other Unbxd tracking scripts and is mandatory to be added on all pages.

<script type="text/javascript">  
  /* * * CONFIGURATION * * */
  var UnbxdSiteName = "Site Key"; // Replace the value with the Site Key.
  /* * * DON'T EDIT BELOW THIS LINE * * */
  (function() {
  var ubx = document.createElement('script'); ubx.type = 'text/javascript'; ubx.async = true;
  ubx.src = '//d21gpk1vhmjuf5.cloudfront.net/unbxdAnalytics.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ubx);
  })();
</script>

Based on the JS variables or Triggers, fire the Unbxd events like search, categoryPage, searchimpression, browseimpression, product_view, productClick, AddToCart, and Order.

Using JS variables
By loading a code block on all the pages, where we can distinguish the events by JS variables.

Integration Examples

Search event

A search event can be triggered as shown below:

// JS variable to identify search page
var isSearchPage = {{JS - Is Search PLP}};

if (isSearchPage) {  
    fireSearch();
}

var fireSearch = function(){  
    // {{DL - Search OriginalText}} datalayer variable
    // to fetch search query
    var siteSearchTerm = {{DL - Search OriginalText}};
    Unbxd.track("search", {"query": siteSearchTerm});
}

Browse events

A browse (category page) event can be triggered as shown below:

// JS variable to identify PLPs
var isPLP = {{JS - Is PLP}};

if (isPLP) {  
    fireBrowse();
}

var fireBrowse = function(){  
    //Unbxd Category Page/Browse Event
    var category = dataLayer[0].searchPageData['webCategory'][0];
    var categoryName = category.name;
    var categoryPath = category.id;
    Unbxd.track('categoryPage', {"page":categoryPath, "page_type":"BOOLEAN", "page_name":categoryName});
}

Product Click event

A product click event can be triggered as shown below:

// JS variable to identify PLPs
var isPLP = {{JS - Is PLP}};

if (isPLP) {  
    fireProductClick();
}


var fireProductClick = function(){  
    // {{DL - Product ID}} datalayer variable
    // to fetch search query
    var pid = {{DL - Product ID}};
    Unbxd.track("click", {"pid": pid});
}

Product View event

A product view event can be triggered as shown below:

// JS variable to identify PDPs
var isPDP = {{JS - Is PDP}};

if (isPDP) {  
    fireProductView();
}


var fireProductView = function(){  
    // {{DL - Product ID}} datalayer variable
    // to fetch search query
    var pid = {{DL - Product ID}};
    Unbxd.track("product_view", {"pid": pid});
}

Search & Browse Impression

A search and browse impression can be triggered as shown below:

var fireImpressions = function(){  
    var impressions;
    var unbxd_imp;
    var intervalID;
    var pid_list = new Array();

    var impCallback = function (imp) {
        if (imp.hasOwnProperty('id')) {
            pid_list.push(imp.id);
        }
    }

    var dataLayerCallback = function (ele) {
        var data = ele.event;
        if (data == 'ee prod imp' && ele.ecommerce) {
            impressions = ele.ecommerce.impressions;
        }
    }

    var checkExist = function () {
        dataLayer.forEach(dataLayerCallback);
        if (impressions) {
            impressions.forEach(impCallback);
        }

        // deciding the impressions
        if (isSearchPage) {
            unbxd_imp = "search_impression";
        } else if (isPLP) {
            unbxd_imp = "browse_impression";
        }

        Unbxd.track(unbxd_imp, { 'pid_list': pid_list });

        // clear the interval
        clearInterval(intervalID);
    }
    intervalID = setInterval(checkExist, 100);
}

Add to Cart

An add to cart event can be triggered as shown below:

// JS variable to identify AddToCart
var isATC = {{JS - Is ATC}};

if (isATC) {  
    fireAddToCart();
}


var fireAddToCart = function(){  
    // {{DL - EE Obj V2}} datalayer variable
    // to fetch search query
    var addToCart = {{DL - EE Obj V2}}.add;
    var product = addToCart.products[0];
    if(addToCart) {
        var productId = product.id;
        var qty = product.quantity;
        var variantId = product.variant;
        Unbxd.track("addToCart",{"pid":productId,"variantId":variantId,"qty":qty});
        //yet to add "requestId" : <REQUESTID>
    }
}

Order event

An order event can be triggered as shown below:

// JS variable to identify Order
var isOrder = {{JS - Is Order}};

if (isOrder) {  
    fireOrders();
}


var fireOrders = function(){  
    var products = dataLayer[0].ecommerce.purchase.products;
    var triggerOrders = function (ele) {
        var payload = {
            "pid": ele.id,
            "variantId": ele.variant,
            "qty": ele.quantity,
            "price": ele.price.toFixed(2)
        };

        Unbxd.track("order", payload);
    }
    if(products) {
        products.forEach(triggerOrders);
    }
}