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.

// Container ID is present in GTM-XXXX format in GTM Dashboard

// HTML ID can be found in the url. Eg:

// containers/422XXXX/workspaces/20 , 20 is the HTML ID

/* * * CONFIGURATION * * */

// Replace the value with the Unbxd Site Key and API 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);

})();

</script>

// Container ID is present in GTM-XXXX format in GTM Dashboard // HTML ID can be found in the url. Eg: // containers/422XXXX/workspaces/20 , 20 is the HTML ID <script type="text/javascript"> /* * * CONFIGURATION * * */ // Replace the value with the Unbxd Site Key and API 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); })(); </script>

// Container ID is present in GTM-XXXX format in GTM Dashboard
// HTML ID can be found in the url. Eg:
// containers/422XXXX/workspaces/20 , 20 is the HTML ID

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

Category Page

A category page event is tracked to understand the browse/category interests of your visitors, as in which all category pages are visited by user. Each browse results page is tracked to enable per category page analytics of the visitor. A typical category page event involves:

UnbxdCategoryPageTrigger

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

Create Trigger in GTM to catch the CategoryPath on browse results page load.
Trigger Configuration:
TriggerName: UnbxdCategoryPageTrigger
Trigger Type: Custom Event
Event Name: CategoryPage
TriggerFiresOn: All custom events
Create Variable in GTM, to fetch the query from the dataLayer.
Variable Configuration:

Variable Name: UnbxdCategoryPagePayload

Variable Variable Type: Data Layer Variable

Data Layer Variable Name: CategoryPagePayload

HTML Content:
Create a Javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdSearchQueryTag

Tag Type: Custom HTML

HTML Content:

// Pass payload to Unbxd.track function
// to call the tracker API

<script type="text/javascript">
var u_payload = {{UnbxdCategoryPagePayload}};
if (Unbxd && typeof Unbxd.track === 'function'
&& u_payload.hasOwnProperty("page")
&& u_payload.hasOwnProperty("page_type")) {
Unbxd.track('categoryPage', u_payload);
} else {
console.error('ERRNO-002: unbxdAnalytics.js is not loaded or payload incorrect!')
}
</script>
// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdCategoryPagePayload}}; if (Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("page") && u_payload.hasOwnProperty("page_type")) { Unbxd.track('categoryPage', u_payload); } else { console.error('ERRNO-002: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>
```
// Pass payload to Unbxd.track function
// to call the tracker API
 
```

Pushing the event to the dataLayer on category page load.

Push payload to Datalayer:

// Add payload to Datalayer variable CategoryPagePayload

// Should be triggered when user lands on category page

// Payload will contain page and page_type

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'CategoryPage',

'CategoryPagePayload':

{

'requestId' : '{{unbxd-request-id}}',

'page': '{{category-path}}',

'page_type': '{{category-page-type}}'

}

);

}

});

</script>

// Add payload to Datalayer variable CategoryPagePayload // Should be triggered when user lands on category page // Payload will contain page and page_type <script type=""text/javascript""> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'CategoryPage', 'CategoryPagePayload': { 'requestId' : '{{unbxd-request-id}}', 'page': '{{category-path}}', 'page_type': '{{category-page-type}}' } } ); } }); </script>

// Add payload to Datalayer variable CategoryPagePayload 
// Should be triggered when user lands on category page
// Payload will contain page and page_type


   window.dataLayer = window.dataLayer || [];
   dataLayer.push(
       {
           'event': 'CategoryPage',
           'CategoryPagePayload':
           {
               'requestId' : '{{unbxd-request-id}}',
               'page': '{{category-path}}',
               'page_type': '{{category-page-type}}'
           }
       }
   );
      }
  });

Payload details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
page*	string	category path used for category api call (value of “p” parameter).
page_type*	string	page type for category path, BOOLEAN or CATEGORY_PATH based on page.

Note for payload page and page_type details:

For example, if user lands on “/bedrooms/beds” page and

1. If parameters for category API look like /category?p=categoryPath:”Bedrooms>Beds”&pagetype=boolean then, page and page_type will look like:

'SearchQueryPayload':

{

'requestId' : '{{unbxd-request-id}}',

'page': "categoryPath:\"Bedrooms>Beds\"",

'page_type': 'BOOLEAN'

}
2. Else If parameters for category API look like /category?p=Bedrooms>Beds then, payload will look like:

'SearchQueryPayload':

{

'requestId' : '{{unbxd-request-id}}',

'page': "Bedrooms>Beds",

'page_type': 'CATEGORY_PATH'

}

On a category page results load, please pass the categoryPath to the dataLayer as shown above. The event flow will be:

As soon as the ` CategoryPage ` event got pushed data layer.
This initiates the trigger UnbxdCategorPageTrigger which we created in the step-1.
UnbxdCategorPageTrigger executes the tag: UnbxdCategoryPageTag which we created in step-3.
Inside UnbxdCategoryPageTag we have added Unbxd analytics category tracker code.
Category tracker code get the CategoryPath from variable UnbxdCategoryPagePayload which we created in step-2.
Finally categoryPath of the page 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 below approach:

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

Trigger Configuration:

TriggerName: UnbxdProductClickTrigger

TriggerType: Custom Event

EventName: ProductClick

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

Variable Configuration:

VariableName: UnbxdProductClickPayload

Variable Type: Data Layer Variable

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

Tag Configuration:

Tag Name: UnbxdProductClickTag

Tag Type: Custom HTML

// Pass payload to Unbxd.track function
// to call the tracker API

<script type="text/javascript">
var u_payload = {{UnbxdProductClickPayload}};
if (Unbxd && typeof Unbxd.track === 'function'
&& u_payload.hasOwnProperty("pid")
&& u_payload.hasOwnProperty ("prank")){
Unbxd.track('click', u_payload);
} else {
console.error('ERRNO-004: unbxdAnalytics.js is not loaded or payload incorrect!')
}
</script>
// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdProductClickPayload}}; if (Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("pid") && u_payload.hasOwnProperty ("prank")){ Unbxd.track('click', u_payload); } else { console.error('ERRNO-004: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>
```
// Pass payload to Unbxd.track function
// to call the tracker API 
 
```

Pushing the event to the Data Layer through the Product Click

// Add payload to Datalayer variable ProductClickPayload

// Should be triggered on product click on browse results page

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'ProductClick',

'ProductClickPayload':

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'prank': 'RANK',

'page': '{{category-path}}',

'page_type': '{{category-page-type}}'

}

});

</script>

// Add payload to Datalayer variable ProductClickPayload // Should be triggered on product click on browse results page <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'ProductClick', 'ProductClickPayload': { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'prank': 'RANK', 'page': '{{category-path}}', 'page_type': '{{category-page-type}}' } }); </script>

// Add payload to Datalayer variable ProductClickPayload 
// Should be triggered on product click on browse results page

Payload details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pid	string	unique id for the product
variantId	string	variantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
prank	string	number aka rank of product in response
page*	string	category path used for category api call (value of “p” parameter).
page_type*	string	page type for category path, BOOLEAN or CATEGORY_PATH based on page.

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 browse impression tag.
browse 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

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

To integrate this event through GTM, we need to follow the below approach:

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 a 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 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>
<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.

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 product doesn’t variant.

} }

);

</script>

Payload Details:
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pid	string	unique id for the product
variantId	string	variantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
qty	string	quantity being added to cart by user
price	string	unit price of the product (variant, if variant is selected)

Events Flow will be:

As soon as the ‘ProductCarted’ event got pushed to the dataLayer.
This initiates the trigger UnbxdProductAddToCartTrigger which we created in the step-1.
UnbxdProductAddToCartTrigger executes the tag UnbxdProductCartedTag: which we created in step-3.
Inside UnbxdProductAddToCartTrigger we have added an Unbxd analytics add to cart tag.
AddToCart tracker code gets the data from the variable ProductCartedPayload which we created in step-2.
Finally, UnbxdProductAddToCartTrigger event data will be updated in the Unbxd analytics database for the particular siteKey.

Product Order

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:

For single Order

// Pass payload to Unbxd.track function
// to call the tracker API

<script type="text/javascript">
var u_payload = {{UnbxdProductsOrderedPayload}};
if( Unbxd && typeof Unbxd.track === 'function' &&
u_payload.hasOwnProperty("pid") &&
u_payload.hasOwnProperty("price") &&
u_payload.hasOwnProperty ("qty")){
Unbxd.track('order', u_payload);
} else {
console.error('ERRNO-008: unbxdAnalytics.js is not loaded or payload incorrect!')
}
</script>
// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdProductsOrderedPayload}}; if( Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("pid") && u_payload.hasOwnProperty("price") && u_payload.hasOwnProperty ("qty")){ Unbxd.track('order', u_payload); } else { console.error('ERRNO-008: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>
```
// Pass payload to Unbxd.track function
// to call the tracker API 
 
```
For Multiple Order

// Pass payload to Unbxd.track function
// to call the tracker API

<script type="text/javascript">
var u_payload = {{UnbxdProductsOrderedPayload}};
if( Unbxd && typeof Unbxd.track === 'function'
&& typeof(u_payload) == "object"
&& u_payload.length > 1){
Unbxd.trackMultiple('order', u_payload);
} else {
console.error('unbxdAnalytics.js is not loaded or payload incorrect!')
}
</script>
<br>
// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdProductsOrderedPayload}}; if( Unbxd && typeof Unbxd.track === 'function' && typeof(u_payload) == "object" && u_payload.length > 1){ Unbxd.trackMultiple('order', u_payload); } else { console.error('unbxdAnalytics.js is not loaded or payload incorrect!') } </script> <br>
```
// Pass payload to Unbxd.track function
// to call the tracker API 
 


 
 
```

Pushing event to the dataLayer while confirming the order of products.

For single order

// Add payload to Datalayer variable ProductOrderedPayload

// Should be triggered individually for all the products on

// order success page

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'ProductOrder',

'ProductsOrderedPayload':

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'qty': 'QUANTITY SELECTED',

'price': 'UNIT PRICE FOR PRODUCT'

}

});

</script>

// Add payload to Datalayer variable ProductOrderedPayload // Should be triggered individually for all the products on // order success page <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'ProductOrder', 'ProductsOrderedPayload': { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'qty': 'QUANTITY SELECTED', 'price': 'UNIT PRICE FOR PRODUCT' } }); </script>

// Add payload to Datalayer variable ProductOrderedPayload 
// Should be triggered individually for all the products on 
// order success page

For Multiple Order

// Add payload to Datalayer variable ProductOrderedPayload

// Should be triggered on order success page

// for all products in order added to a list

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'ProductOrder',

'ProductsOrderedPayload':

[{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'qty': 'QUANTITY SELECTED',

'price': 'UNIT PRICE FOR PRODUCT'

},

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'qty': 'QUANTITY SELECTED',

'price': 'UNIT PRICE FOR PRODUCT'

},

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'qty': 'QUANTITY SELECTED',

'price': 'UNIT PRICE FOR PRODUCT'

}]

});

</script>

// Add payload to Datalayer variable ProductOrderedPayload // Should be triggered on order success page // for all products in order added to a list <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'ProductOrder', 'ProductsOrderedPayload': [{ 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'qty': 'QUANTITY SELECTED', 'price': 'UNIT PRICE FOR PRODUCT' }, { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'qty': 'QUANTITY SELECTED', 'price': 'UNIT PRICE FOR PRODUCT' }, { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'qty': 'QUANTITY SELECTED', 'price': 'UNIT PRICE FOR PRODUCT' }] }); </script>

// Add payload to Datalayer variable ProductOrderedPayload 
// Should be triggered on order success page
// for all products in order added to a list

Payload Details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pid	string	unique id for the product
variantId	string	variantId of the selected product variant (if variant), or null
qty	string	quantity of the product being order
price	string	unit price of the product (variant, if variant is selected)

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 a 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 Javascript tag with the below details.

Tag Configuration:

Tag Name: RemoveCartTag

Tag Type: Custom HTML

HTML Content:

// Pass payload to Unbxd.track function
// to call the tracker API

<script type="text/javascript">
var u_payload = {{RemoveProductFromCart}};
if (Unbxd && typeof Unbxd.track === 'function') {
Unbxd.track("cartRemoval", u_payload);
} else {
console.error('ERRNO-007: unbxdAnalytics.js is not loaded or payload incorrect!')
}
</script>
// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{RemoveProductFromCart}}; if (Unbxd && typeof Unbxd.track === 'function') { Unbxd.track("cartRemoval", u_payload); } else { console.error('ERRNO-007: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>
```
// Pass payload to Unbxd.track function
// to call the tracker API 
 
```

Pushing event to the dataLayer while removing the product from cart.

// Add payload to Datalayer variable CartRemovedpayload

// Should be triggered when a product is removed

// from cart

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': ' 'CartRemoved',

'CartRemovedPayload':

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT',

'qty': 'QUANTITY SELECTED',

'price': 'UNIT PRICE FOR PRODUCT'

}

});

</script>

// Add payload to Datalayer variable CartRemovedpayload // Should be triggered when a product is removed // from cart <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': ' 'CartRemoved', 'CartRemovedPayload': { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT', 'qty': 'QUANTITY SELECTED', 'price': 'UNIT PRICE FOR PRODUCT' } }); </script>

// Add payload to Datalayer variable CartRemovedpayload 
// Should be triggered when a product is removed 
// from cart

Payload details:
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pid	string	unique id for the product
variantId	string	variantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
qty	string	quantity being added to cart by user
price	string	unit price of the product (variant, if variant is selected)

Events flow will be:

As soon as the ` CartRemoved` event got pushed dataLayer.
This initiates the trigger RemoveFromCartTrigger which we created in the step-1.
RemoveFromCartTrigger executes the tag: RemoveCartTag which we created in step-3.
Inside RemoveCartTag we have added Unbxd analytics search tracker code.
Search tracker code get the data from variable RemoveProductFromCart which we created in step-2.
Finally, RemoveCartTrigger event data will be updated in Unbxd analytics database for the particular siteKey.

Browse Impressions

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

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

1. Create a Trigger in GTM to catch the browse impression

Trigger Configuration:

TriggerName: UnbxdBrowseImpressionTrigger

TriggerType: Custom Event

EventName: BrowseImpression

TriggerFiresOn: All Custom Events

2. 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

3. Create a javascript tag with the below details.

Tag Configuration:

Tag Name: UnbxdBrowseImpressionTag

Tag Type: Custom HTML

HTML Content:

Tag Configuration:

HTML Content:

// Pass payload to Unbxd.track() function

// to call the tracker API

var u_payload = {{UnbxdBrowseImpressionPayload}};

if (Unbxd && typeof Unbxd.track === 'function'

&& u_payload.hasOwnProperty("page")

&& u_payload.hasOwnProperty("page_type")) {

Unbxd.track('browse_impression', u_payload);

} else {

console.error('ERRNO-003: unbxdAnalytics.js is not loaded or payload incorrect!')

}

</script>

// Pass payload to Unbxd.track() function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdBrowseImpressionPayload}}; if (Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("page") && u_payload.hasOwnProperty("page_type")) { Unbxd.track('browse_impression', u_payload); } else { console.error('ERRNO-003: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>

// Pass payload to Unbxd.track() function
// to call the tracker API

4. Pushing event to the dataLayer when the category results loads.

// Add payload to Datalayer variable BrowseImpressionPayload

// Should be triggered on category page load

// Payload will contain page and page_type instead of query

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'BrowseImpression',

'BrowseImpressionPayload':

{

'requestId' : '{{unbxd-request-id}}',

'pids_list': [LIST OF UNIQUE ID OF PRODUCTS],

'page': '{{category-path}}',

'page_type': '{{category-page-type}}'

}

});

</script>

// Add payload to Datalayer variable BrowseImpressionPayload // Should be triggered on category page load // Payload will contain page and page_type instead of query <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'BrowseImpression', 'BrowseImpressionPayload': { 'requestId' : '{{unbxd-request-id}}', 'pids_list': [LIST OF UNIQUE ID OF PRODUCTS], 'page': '{{category-path}}', 'page_type': '{{category-page-type}}' } }); </script>

// Add payload to Datalayer variable BrowseImpressionPayload 
// Should be triggered on category page load
// Payload will contain page and page_type instead of query

Payload Details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pids_list	string	list of unique id of products loaded with current request. If zero products are returned, pass an empty list(array).
page*	string	category path used for category api call (value of “p” parameter).
page_type*	string	page type for category path, BOOLEAN or CATEGORY_PATH based on page.

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 browse impression tag.
browse 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 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 passing the product ID in the payload.

To integrate this event through GTM, we need to follow the below approach:

1. Create a Trigger in GTM to catch the browse impression

Trigger Configuration:

TriggerName: UnbxdProductViewTrigger

TriggerType: Custom Event

EventName: ProductView

TriggerFiresOn: All Custom Events

2. Create Variable in GTM to fetch the list of product Ids from the dataLayer.

Variable Configuration:

VariableName: UnbxdProductViewPayload

Variable Type: Data Layer Variable

Data Layer Variable Name: ProductViewPayload

3. Create a javascript tag with the below details.

Tag Configuration:

Tag Name:UnbxdProductViewTag

Tag Type: Custom HTML

HTML Content:

Tag Configuration:

HTML Content:

// Pass payload to Unbxd.track function

// to call the tracker API

var u_payload = {{UnbxdProductViewPayload}};

if (Unbxd && typeof Unbxd.track === 'function'

&& u_payload.hasOwnProperty("pid")){

Unbxd.track('product_view', u_payload);

} else {

console.error('ERRNO-005: unbxdAnalytics.js is not loaded or payload incorrect!')

}

</script>

// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdProductViewPayload}}; if (Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("pid")){ Unbxd.track('product_view', u_payload); } else { console.error('ERRNO-005: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>

// Pass payload to Unbxd.track function
// to call the tracker API

4. Pushing the event to the dataLayer through a product view.

// Add payload to Datalayer variable ProductViewPayload

// Should be triggered when a user lands on product page

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'ProductView',

'ProductViewPayload':

{

'requestId': 'REQUEST ID',

'pid': 'PRODUCT ID',

'variantId': 'VARIANT ID OF SELECTED VARIANT'

}

});

</script>

// Add payload to Datalayer variable ProductViewPayload // Should be triggered when a user lands on product page <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'ProductView', 'ProductViewPayload': { 'requestId': 'REQUEST ID', 'pid': 'PRODUCT ID', 'variantId': 'VARIANT ID OF SELECTED VARIANT' } }); </script>

// Add payload to Datalayer variable ProductViewPayload 
// Should be triggered when a user lands on product page

Payload Details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
pid	string	unique id for the product
variantId	string	variantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null

Events Flow will be:

As soon as the ‘Productview` event got pushed to the dataLayer.
This initiates the trigger UnbxdProductViewTrigger which we created in the step-1.
UnbxdProductViewTrigger executes the tag UnbxdProductViewTag: which we created in step-3.
Inside UnbxdProductViewTrigger we have added an Unbxd analytics product view tag.
Product view tracker code gets the data from the variable UnbxdProductViewPayload which we created in step-2.
Finally, UnbxdProductViewTrigger event data will be updated in the Unbxd analytics database for the particular siteKey.

Facets

A Facet event tracks the guided navigation on the Product Listing Page. The event query will list the specific filters the shopper has selected to narrow down the results on the category page.

To track the facets a shopper has chosen on the category page through GTM, we need to follow the below approach:

1. Create a Trigger in GTM to catch the product view.

Trigger Configuration:

TriggerName: UnbxdFacetTrigger

TriggerType: Custom Event

EventName: UnbxdFacet

TriggerFiresOn: All Custom Events

2. Create a Variable in GTM to fetch the selected facet from the dataLayer.

Variable Configuration:

VariableName: UnbxdFacetPayload

Variable Type: Data Layer Variable

Data Layer Variable Name: FacetPayload

3. Create a javascript tag with the below details.

Tag Configuration:

Tag Name:UnbxdFacetTag

Tag Type: Custom HTML

HTML Content:

// Pass payload to Unbxd.track function

// to call the tracker API

var u_payload = {{UnbxdFacetPayload}};

if (Unbxd && typeof Unbxd.track === 'function'

&& u_payload.hasOwnProperty("page")

&& u_payload.hasOwnProperty("facets")) {

Unbxd.track('facets',u_payload);

} else {

console.error('ERRNO-009: unbxdAnalytics.js is not loaded or payload incorrect!')

}

</script>

// Pass payload to Unbxd.track function // to call the tracker API <script type="text/javascript"> var u_payload = {{UnbxdFacetPayload}}; if (Unbxd && typeof Unbxd.track === 'function' && u_payload.hasOwnProperty("page") && u_payload.hasOwnProperty("facets")) { Unbxd.track('facets',u_payload); } else { console.error('ERRNO-009: unbxdAnalytics.js is not loaded or payload incorrect!') } </script>

// Pass payload to Unbxd.track function
// to call the tracker API

4. Pushing the event to the dataLayer through a product view.

// Add payload to Datalayer variable FacetPayload

// Should be triggered on browse page

// when a user selects a facet

window.dataLayer = window.dataLayer || [];

dataLayer.push(

{

'event': 'UnbxdFacet',

'FacetPayload':

{

'requestId': 'REQUEST ID',

'facets': {"facet_name": ["facet_value", "facet_value"],

"facet_name": ["facet_value"]},

'page': '{{category-path}}',

'page_type': '{{category-page-type}}'

}

});

</script>

// Add payload to Datalayer variable FacetPayload // Should be triggered on browse page // when a user selects a facet <script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push( { 'event': 'UnbxdFacet', 'FacetPayload': { 'requestId': 'REQUEST ID', 'facets': {"facet_name": ["facet_value", "facet_value"], "facet_name": ["facet_value"]}, 'page': '{{category-path}}', 'page_type': '{{category-page-type}}' } }); </script>

// Add payload to Datalayer variable FacetPayload
// Should be triggered on browse page
// when a user selects a facet

Payload Details
Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
facets	object	Should contains key value pairs of selected facet name and list of selected values
page*	string	category path used for category api call (value of “p” parameter).
page_type*	string	page type for category path, BOOLEAN or CATEGORY_PATH based on page.

Events Flow will be:

As soon as the “UnbxdFacet” event got pushed to the dataLayer.
This initiates the trigger UnbxdFacetTrigger which we created in the step-1.
UnbxdFacetTrigger executes the tag UnbxdFacetTag: which we created in step-3.
Inside UnbxdFacetTrigger we have added an Unbxd analytics facet tag.
Facet tracker code gets the data from the variable UnbxdFacetPayload which we created in step-2.
Finally, “facet” event data will be updated in the Unbxd analytics database for the particular siteKey.

Recs 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.

Recommendation For You

<i class="unbxd-width-x unbxd-field-image_link unbxd-parent" style="" unbxdparam_sku="4364089065590" unbxdparam_prank="1" unbxdattr="product" unbxdparam_boxtype="RECOMMENDED_FOR_YOU"></li>

More Like These

<li class="unbxd-width-x unbxd-field-image_link unbxd-parent" style="" unbxdparam_sku="4364286460022" unbxdparam_prank="1" unbxdattr="product" unbxdparam_boxtype="MORE_LIKE_THESE" unbxdparam_source_pid="4364177080438"></li>

Did this answer your question?
No…
I have some feedback
Feedback is submitted

GTM Integration

Introduction to GTM

Requirements for Unbxd tracking through GTM

Category Page

Note for payload page and page_type details:

Product Click Unbxd Tracker

Product AddToCart

Events Flow will be:

Product Order

Product Remove from Cart Tracker

Browse Impressions

Product View

Events Flow will be:

Facets

Recs Impression Widget Tracker

No…

On this Section