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, click 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.

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

Introduction to GTM

Google Tag Manager is a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website (or mobile app) without having to modify the code.

Here’s a very simple example of how GTM works. Information from one data source (your website) is shared with another data source (Analytics) through Google Tag Manager. GTM becomes very handy when you have lots of tags to manage because all the code is stored in one place.

Basic components of GTM

Following are the basic components within Google Tag Manager:

Tags – Tags are tracking codes and code fragments that tell GTM what action to take on that page.

For example: Sending searched query to Unbxd analytics.
Triggers – Triggers specify the conditions under which a Tag should fire.
For example: A trigger with a condition to only fire a Tag when a user views URLs

containing the path /search/.
Variables – Variables are values used in triggers and tags to filter when a specific tag should fire. GTM provides built-in variables and allows you to create custom user-defined variables. For example: A ‘click’ class variable has a value name (such as a word string) assigned to buttons on the website.
DataLayer – The dataLayer is a JSON that contains name value pairs of data points you wish to pass from your website into GTM. (And GTM can then, in turn, pass on to any tags that are managed in GTM, including Unbxd tags.)

Requirements for Unbxd tracking through GTM

Unbxd analytics scripts need to be loaded across all the pages. We require 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 * * */
// Replace the value with the Site Key. var UnbxdSiteName ="UNBXD_SITE_NAME"; var UnbxdApiKey = "UNBXD_API_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'; ubx.addEventListener('load', function() {
window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}}); });
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ubx);
})();

The above JS snippet needs to be added in a tag and also enable Built-In Variables, i.e.,

Container ID and HTML ID without fail.

TagName: UnbxdAnalyticsScript

TagType: Custom HTML Tag

Trigger: AllPagesPageView

Search Unbxd Tracker

A Search hit event is tracked to understand the query and intent of your visitors. Each search

query is tracked to enable per-query analytics of the visitor. A typical search hit event involves:

Typing the query

<input title="" type="search" unbxdattr="sq" id="search-header" name="q" value="" class="input-group-field" aria-label="Search" autocomplete="off">

Pressing Enter or Clicking the Search button

<button type="submit" class="btn icon-fallback-text" unbxdattr="sq_btn" </button>

SearchQueryTrigger

Through GTM to integrate this event we need to follow below approach:

Create Trigger in GTM to catch the search Query on form hit.
Trigger Configuration:

TriggerName: UnbxdSearchQueryTrigger
Trigger Type: Custom Event
Event Name: SearchQuery
TriggerFiresOn: All custom events
Create Variable in GTM, to fetch the query from the dataLayer.

Variable Configuration:

Variable Name: UnbxdSearchQueryPayload Variable Variable Type: Data Layer Variable

Data Layer Variable Name: SearchQueryPayload

HTML Content:

Create a Javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdSearchQueryTag

Tag Type: Custom HTML

HTML Content:

<script type="text/javascript"> 
    var u_payload = {{UnbxdSearchQueryPayload}};  
    if (u_payload.hasOwnProperty("query")) { 
      Unbxd.track("search", u_payload); 
    } 
</script>

Pushing the event to the dataLayer through a search query.
```
<script type="text/javascript">
jQuery('#search_keywords').keyup(function(){
        var searchQuery = jQuery(this).val();
        if (searchQuery.length >= 3) {
            window.dataLayer = window.dataLayer || [];
                dataLayer.push(
                {
                    'event': 'SearchQuery',
                    'SearchQueryPayload':
                        {
                            "query": "q=" + searchQuery
                        }
                }
            );
        }
    });
</script>
```
On search query, please pass the searched query to the dataLayer as shown above. Event flow will be:
> As soon as the ` SearchQuery ` event got pushed data layer.
> This initiates the trigger UnbxdSearchQueryTrigger which we created in the step-1.
> UnbxdSearchQueryTrigger executes the tag: UnbxdSearchQueryTag which we created in step-3.
> Inside UnbxdSearchQueryTag we have added Unbxd analytics search tracker code.
> Search tracker code get the searched query from variable UnbxdSearchQueryPayload which we created in step-2.
> Finally searched query will be updated in Unbxd analytics database for the particular siteKey.

Product Click Unbxd Tracker

Tracking product clicks of visitors helps our search engine to understand their preferences over other products on the listing page. This information is used to compute popular products and render relevant and personalized results. It needs to be tracked in case of search and navigation pages. It is also integrated if customer is using the recommendation widgets.

Through GTM to integrate this event we need to follow the below approach:

Create a Trigger in GTM to catch the click event.

Trigger Configuration:

TriggerName: UnbxdProductClickTrigger

TriggerType: Custom Event

EventName: ProductClick

TriggerFiresOn: All Custom Events
Create Variable in GTM, to fetch the product details from the dataLayer. Variable Configuration:

VariableName: UnbxdProductClickPayload

Variable Type: Data Layer Variable

Data Layer Variable Name: ProductClickPayload
Create a Javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdProductClickTag

Tag Type: Custom HTML

HTML Content:
Pushing the event to the dataLayer when the user clicks on the product.
```
<script  type="text/javascript"type="text/javascript">
    window.dataLayer = window.dataLayer || [];
    dataLayer.push(
      {
       'event': 'ProductClick',
       'UnbxdProductClickPayload':
        {
          'pid': 'PRODUCT ID',
          'prank': 'RANK',
          'requestId': 'REQUEST ID',
          'experience_pagetype': '<HOME/PRODUCT/CATEGORY>', // type of the page where the widget will be rendered
           'experience_widget': '<WIDGET1/WIDGET2/WIDGET3>' // the widget type of the rendered widget experiences
        }
      });
</script>    
```
Events Flow will be:

> As soon as the ‘ProductClick’ event got pushed to the dataLayer.

> This initiates the trigger UnbxdProductClickTrigger which we created in the step-1.

> UnbxdProductClickTrigger executes the tag UnbxdProductClickTag: which we created in step-3.

> Inside UnbxdProductClickTrigger we have added an Unbxd analytics search impression tag.

> Search tracker code gets the data from variable UnbxdProductClickPayload which we created in step-2.

> Finally, UnbxdProductClickTrigger event data will be updated in the Unbxd analytics database for the particular siteKey.

Product AddToCart Unbxd Tracker

Tracking products added to the cart help us further improve product ranks for a search query.

Create Trigger in GTM to catch the uniqueId of product on product add to cart.

Trigger Configuration:

TriggerName: UnbxdProductAddToCartTrigger

TriggerType: Custom Event

EventName: ProductCarted (Use regex matching)

TriggerFiresOn: All Custom Events
Create Variable in GTM, to fetch the product details from the dataLayer. Variable Configuration:

VariableName: UnbxdProductCartedPayload

Variable Type: Data Layer Variable

Data Layer Variable Name: ProductCartedPayload

Create a Javascript tag with the below details. Tag Configuration:

Tag Name: UnbxdProductCartedTag Tag Type: Custom HTML
HTML Content:

<script type="text/javascript"> 
    var u_payload = {{UnbxdProductCartedPayload}};     
    if (u_payload.hasOwnProperty("pid")) {
       Unbxd.track("addToCart", u_payload); 
    } 
</script>

Pushing event to the dataLayer while carting the product.

<script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      dataLayer.push(
        {
          'event': 'ProductCarted',
          'ProductCartedPayload':
          {
            "pid": “PRODUCT_ID”,
            "price": “PRODUCT_PRICE”,
            "qty": "PRODUCT_QTY",
            "variantid": “PRODUCTVARIANT_ID” //Don’t include, if the product doesn't have a variant.
          }
        }
      );
</script>

While carting a product, please pass the uniqueId of the product to the dataLayer as shown above.

Product Order Unbxd Tracker

Unbxd analytics also track orders placed by the visitor from your eCommerce store.

Create Trigger in GTM to catch the products details on order confirmation.

Trigger Configuration:
TriggerName: UnbxdProductOrderTrigger

TriggerType: Custom Event
EventName: ProductOrder (Use regex matching) TriggerFiresOn: All Custom Events
Create Variable in GTM, to fetch the products data from the dataLayer. Variable Configuration:

VariableName: UnbxdProductsOrderedPayload Variable Type: Data Layer Variable
Data Layer Variable Name: ProductsOrderedPayload
Create Javascript tag with the below details. Tag Configuration:

Tag Name: UnbxdProductsOrderedTag Tag Type: Custom HTML
HTML Content:
```
<script type="text/javascript">
var u_payload = {{UnbxdProductsOrderedPayload}}; if (u_payload.length){
u_payload.forEach(function(prd) {
Unbxd.track("order", prd);
}); }
</script>
```
Tag Sequencing: 1. Enable – Fire a tag before UnbxdProductsOrderedTag fires 2. Setup Tag – UnbxdAnalyticsScript 3. Checked – Don’t fire UnbxdProductsOrderedTag if UnbxdAnalyticsScript fails or is paused
In order to work above snippet, enable system variables. i.e., Container ID and HTML ID. • Fire a tag before… • Fire a tag after… The sequence is created by editing the Advanced Settings of the main tag. You will see two new settings here: The first setting is for choosing the setup for the main Tag. The latter is for the cleanup. If you choose a setup, it will need to complete before the main tag itself fires. If you choose a cleanup, the main tag will need to complete before the teardown is fired. For both, you can choose whether a failure in either the setup or the main tag will abort the sequence. In the sequence above, the Page View Tag (setup) must successfully complete before the Event Tag (main tag) fires. If the Page View Tag fails, the sequence is aborted. Similarly, the Event Tag must successfully complete before the final Event Tag (cleanup) fires. If the main Tag fails, the final Event Tag will not fire.

Pushing event to the dataLayer while confirming order of products.

<script type="text/javascript">
window.dataLayer =window.dataLayer || []; dataLayer.push( {
'event': 'ProductOrder', 'ProductsOrderedPayload': [
{
'pid': “PRODUCT_ID”, 'price': “PRODUCT_PRICE”, 'qty': “PRODUCT_QTY”
} ]
} );
</script>

While order confirmation, please pass the products data as shown in the above block.

Product Remove from Cart Tracker

Like “Cart Additions”, tracking “Cart Removal” is also important as it helps us better understand the visitor’s preferences. To track the “Cart Removal”, customer needs to call the Unbxd API on the cart Removal event.

Create Trigger in GTM to catch the uniqueId of product if a product removed from cart page. Trigger Configuration:

TriggerName: RemoveFromCartTrigger TriggerType: Custom Event
EventName: CartRemoved (Use regex matching) TriggerFiresOn: All Custom Events
Create Variable in GTM, to fetch the product details from the dataLayer.

Variable Configuration:

VariableName: RemoveProductFromCart

Variable Type: Data Layer Variable
Data Layer

Variable Name: CartRemovedPayload

Create a Javascript tag with the below details. Tag Configuration:

Tag Name: RemoveCartTag Tag Type: Custom HTML
HTML Content:

<script type="text/javascript"> 
    var u_payload = {{RemoveProductFromCart}};
     if (u_payload.hasOwnProperty("pid")) {
         Unbxd.track("cartRemoval", u_payload);    
     }
</script>

Pushing event to the dataLayer while removing the product from cart.
```
<script  type="text/javascript"type="text/javascript">
    window.dataLayer = window.dataLayer || [];
    dataLayer.push(
      {
       'event': 'CartRemoved',
       'CartRemovedPayload':
        {
          'pid': “PRODUCT_ID”, 
          'price': “PRODUCT_PRICE”, 
          'qty': “PRODUCT_QTY” 
        }
      });
</script>
```
While removing the product from cart, please pass the uniqueId of the product to the dataLayer as shown above.
Events Flow will be:
> As soon as the ` CartRemoved` event got pushed dataLayer.
> This initiates the trigger RemoveFromCartTrigger which we created in step-1.
> RemoveFromCartTrigger executes the tag: RemoveCartTag which we created in step-3.
> Inside RemoveCartTag we have added the Unbxd analytics search tracker code.
> Search tracker code gets the data from variable RemoveProductFromCart which we created in step-2.
> Finally, RemoveCartTrigger event data will be updated in the Unbxd analytics database for the particular site key.

Search Impression

A search impression event is fired when a search results page loads for the first time, and whenever results changes on applying pagination, autoscroll, sort, and filters. For each of these action, unique Ids of the products visible on search page should be sent as payload.

Through GTM to integrate this event we need to follow the below approach:

Create a Trigger in GTM to catch the search impression
Trigger Configuration:

TriggerName: UnbxdSearchImpressionTrigger

TriggerType: Custom Event

EventName: SearchImpression
TriggerFiresOn: All Custom Events
Create Variable in GTM to fetch the list of product Ids from the dataLayer.

Variable Configuration:

VariableName: UnbxdSearchImpressionPayload

Variable Type: Data Layer Variable
Data Layer Variable Name: SearchImpressionPayload
Create a javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdSearchImpressionTag

Tag Type: Custom HTML

HTML Content:
Pushing event to the dataLayer when the search page loads.
```
<script  type="text/javascript"type="text/javascript">
    window.dataLayer = window.dataLayer || [];
    dataLayer.push(
      {
       'event': 'SearchImpression',
       'UnbxdSearchImpressionPayload':
        {
          'query': 'search_query',
          'pids_list': [LIST OF UNIQUE ID OF PRODUCTS]
        }
      });
</script>
```
Events Flow will be:

> As soon as the ‘SearchImpression’ event got pushed to the dataLayer.

> This initiates the trigger UnbxdSearchImpressionTrigger which we created in the step-1.

> UnbxdSearchImpressionTrigger executes the tag UnbxdSearchImpressionTag: which we created in step-3.

> Inside UnbxdSearchImpressionTag we have added an Unbxd analytics search impression tag.

> Search tracker code gets the data from variable UnbxdSearchImpressionPayload which we created in step-2.

> Finally, UnbxdSearchImpressionTrigger event data will be updated in the Unbxd analytics database for the particular site key.

Category Page Impression

A category page impression event is fired when results of the category page load for first time, and whenever the results change on applying pagination, auto-scroll, sort, and filters. For each of these actions, unique Ids of the products visible on the search page should be sent as payload.

Through GTM to integrate this event we need to follow the below approach:

Create a Trigger in GTM to catch the category impression
Trigger Configuration:

TriggerName: UnbxdBrowseImpressionTrigger

TriggerType: Custom Event

EventName: BrowseImpression
TriggerFiresOn: All Custom Events
Create Variable in GTM to fetch the list of product Ids from the dataLayer.

Variable Configuration:

VariableName: UnbxdBrowseImpressionPayload

Variable Type: Data Layer Variable
Data Layer Variable Name: BrowseImpressionPayload
Create a javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdBrowseImpressionTag

Tag Type: Custom HTML

HTML Content:
Pushing event to the dataLayer when the search page loads.
```
<script  type="text/javascript"type="text/javascript"7gt;
    window.dataLayer = window.dataLayer || [];
    dataLayer.push(
      {
       'event': 'BrowseImpression',
       'UnbxdSearchImpressionPayload':
        {
          'page': 'categoryPath:<category_heirarchy>',
          'page_type': 'BOOLEAN', 
          'pids_list': [LIST OF UNIQUE ID OF PRODUCTS]
        }
      });
</script>
```
Events Flow will be:
> As soon as the ‘BrowseImpression’ event got pushed to the dataLayer.
> This initiates the trigger UnbxdBrowseImpressionTrigger which we created in the step-1.
> UnbxdBrowseImpressionTrigger executes the tag UnbxdBrowseImpressionTag: which we created in step-3.
> Inside UnbxdBrowseImpressionTag we have added an Unbxd analytics search impression tag.
> Search tracker code gets the data from variable UnbxdBrowseImpressionPayload which we created in step-2.
> Finally, UnbxdBrowseImpressionTrigger event data will be updated in the Unbxd analytics database for the particular siteKey.

Product Page View

Product Page View indicates the total number of visits that has been made to the product details page (PDP) by the visitor irrespective of the source (search result page, category page, search engine, email, marketing campaigns, etc). This can be tracked by adding the following javascript snippet to each of the product description pages on your website.

<script type = "text/javascript">
	UnbxdAnalyticsConf = window.UnbxdAnalyticsConf || {};
	UnbxdAnalyticsConf['pid'] = <PID>;
</script>\>

Recommendations Impression Widget Tracker

If you are subscribed to Unbxd Recommendations, every time the Recommendation widget loads, the API below needs to be called from your JavaScript file with category name as the parameter.

<div unbxdAttr="product" unbxdParam_sku="SKUid" unbxdParam_experience_pageType="HOME" unbxdParam_experience_widget="WIDGET2"></div>

Where,

unbxdParam_experience_pageType: The PageType of the Page in which the experience widgets will be rendered.
List of PageTypes available:

unbxdParam_experience_widget: The widgetType of the rendered experience widget.
List of widgets available:

Did this answer your question?
Yes!
Nice work, I love it.

No…
I have some feedback

GTM Integration

Introduction to GTM

Requirements for Unbxd tracking through GTM

Search Unbxd Tracker

Product Click Unbxd Tracker

Product AddToCart Unbxd Tracker

Product Order Unbxd Tracker

Product Remove from Cart Tracker

Search Impression

Category Page Impression

Product Page View

Recommendations Impression Widget Tracker

Yes!

No…

On this Section