Docs

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);
        }
    }