With Browser Integration, you can insert the unique tracker, as a custom Javascript file, anywhere within the HTML pages in your website for all the various events. As a first step we need to include UnbxdAnalytics.js script to the head of all the HTML pages, where we want the track functionality to work. You can add it using the below code to you HTML:

Sample Request:

				
					<script type="text/javascript">
  var UnbxdSiteName = "{{site-key}}"; // Replace the value with the Site Key.
  var UnbxdApiKey = "{{api-key}}"; // Replace the value with API key
  (function() {
    var ubx = document.createElement('script');
    ubx.type = 'text/javascript';
    ubx.async = true;
    ubx.src = '//libraries.unbxdapi.com/ua-js/v1.0.0/uaLibrary.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ubx);
  })();
</script>

NOTE: UnbxdSiteName should be initialized with the correct site key for the environment of your account in Unbxd.

Visitor

This event is used to track shoppers and make their user profiles using browser cookies. To enable this event we just need to add Unbxd’s analytics JS library (as done above) inside the head section of all pages of the site.

NOTE: The visitor event will be fired from the SDK itself. If you have integrated the Unbxd analytics JS code, this event is tracked and pushed automatically, with no further action required.

The Visitor event is the first event that gets created when a shopper visits your site. There are two types of shoppers we track:

First-time shoppers
Repeat shoppers

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 the user. Each browse results page is tracked to enable per category page analytics of the visitor. Use the below code as a reference to call the Unbxd categorypage track function.

NOTE: In case of SDK integration, we do not have to add this event explicitly and is handled by the SDK itself and requestId is also handled by SDK integration. Please ensure that unbxdAnalytics flag is set as “true” to allow this event to fire automatically.

				
					<script type="text/javascript">

    UnbxdAnalyticsConf=window.UnbxdAnalyticsConf ||{};
    UnbxdAnalyticsConf["page"]="{{categoryPathId-or-category}}";
    UnbxdAnalyticsConf["page_type"]="{{BOOLEAN or CATEGORY_PATH}}";

      var payload = {
        requestId: '{{unbxd-request-id}}',
        page: '{{category-path}}',
        page_type: '{{category-page-type}}'
      }
      if(Unbxd && typeof Unbxd.track === 'function') {
        Unbxd.track('categoryPage', payload)
      } else {
        console.error('unbxdAnalytics.js is not loaded!')
      }
</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
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

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

				
					UnbxdAnalyticsConf["page"]="categoryPath:\"Bedrooms>Beds\"";
UnbxdAnalyticsConf["page_type"]="BOOLEAN";

var payload =
   {
       'requestId' : '{{unbxd-request-id}}',
       'page': "categoryPath:\"Bedrooms>Beds\"",
       'page_type': 'BOOLEAN'
   }

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

				
					UnbxdAnalyticsConf["page"]="Bedrooms>Beds";
UnbxdAnalyticsConf["page_type"]="CATEGORY_PATH";

var payload =
    {
       'requestId' : '{{unbxd-request-id}}',
       'page': "Bedrooms>Beds",
       'page_type': 'CATEGORY_PATH'
    }

Browse Impression

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.

NOTE: In case of SDK integration, we do not have to add this event explicitly and is handled by the SDK itself and requestId is also handled by SDK integration. Please ensure that unbxdAnalytics flag is set as “true” to allow this event to fire automatically.

Use the below code to call the track function for browse impressions:

				
					<script type="text/javascript">
	var payload = {
        requestId: '{{unbxd-request-id}}',
		pids_list: '{{list-of-products-uniqueId}}',
		page: '{{category-path}}',
		page_type: '{{category-page-type}}',
	}
	var action = 'browse_impression'
	if(Unbxd && typeof Unbxd.track === 'function') {
		Unbxd.track(action, payload)
	} else {
		console.error('unbxdAnalytics.js is not loaded!')
	}
</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
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.

Product Click

The click event should be tracked whenever a user clicks on any product to go to the product details page. It should have the information about the source of the product listing which could be category page in case of browse/category results.

NOTE: In case of SDK integration, we do not have to add this event explicitly and is handled by the SDK itself and requestId is also handled by SDK integration. Please ensure that unbxdAnalytics flag is set as “true” to allow this event to fire automatically.

				
					<script type="text/javascript">
	var payload = {
	    requestId: '{{unbxd-request-id}}',
		pid: '{{unique-id}}',
		prank: '{{number-of-product}}'
	}
	if(Unbxd && typeof Unbxd.track === 'function') {
		Unbxd.track('click', payload)
	} else {
		console.error('unbxdAnalytics.js is not loaded!')
	}
</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
prank	string	Number aka rank of product in response

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).The product view can be tracked whenever a user lands on the PDP page.

OR

Product Page View indicates the total number of visits that has been made to the product details page (PDP) by the visitor from the category page.The product view can be tracked whenever a user lands on the PDP page.

				
					<script type="text/javascript">
  var payload = {
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}'
  }
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.track('product_view', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Payload details:

Attribute Name

Datatype

What value to be passed

pid

string

Unique id for the product, to be taken from API response, if relevantDocumentType=”parent”,

In search api response, or null

variantId

string

VariantId of the selected product variant, if relevantDocumentType=”variant”,

In search api response, or null

Add to Cart

Whenever a user adds any product to cart or shopping bag, the add to cart will get fired. This help us further improve product ranks for a browse(category) implementation.

				
					<script type="text/javascript">
  var payload = {
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}',
    qty: '{{quantity-selected}}',
    price: '{{unit-price-for-product}}'
  }
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.track('addToCart', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Payload details:

Attribute Name	Datatype	What value to be passed
pid	string	Unique id for the product, to be taken from API response, if relevantDocumentType=”parent”, In search api response, or null
variantId	string	The 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	The unit price of the product (variant, if variant is selected)

Cart Removal

Whenever a user removes any product from cart or discards the whole cart. The cart removal event should be tracked individually for all products being removed.

				
					<script type="text/javascript">
  var payload = {
   
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}',
    qty: '{{quantity-selected}}',
    price: '{{unit-price-for-product}}'
  }
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.track('cartRemoval', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Payload details:

Attribute Name	Datatype	What value to be passed
pid	string	Unique id for the product, to be taken from API response, if relevantDocumentType=”parent”, In search api response, or null
variantId	string	VariantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
qty	string	Quantity being removed by the user as string.
price	string	Unit price of the product (variant, if variant is selected) as string.

Order

When a user completes the transaction and lands on the order confirmation/success page, the order event should be tracked for each individual product. There are 2 ways to trigger the order event and either of them can be used:

1. Individually for all events

				
					<script type="text/javascript">
  var payload = {
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}',
    qty: '{{quantity-selected}}',
    price: '{{unit-price-for-product}}'
  }
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.track('order', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Payload details:

Attribute Name	Datatype	What value to be passed
price	string	Unit price of the product (variant, if variant is selected) as string.
pid	string	Unique id for the product, to be taken from API response, if relevantDocumentType=”parent”, In search api response, or null
variantId	string	VariantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
qty	string	Quantity being removed by the user as string.

OR

2. Using trackmultiple for multiple products at once

				
					<script type="text/javascript">
  var payload = [
   {
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}',
    qty: '{{quantity-selected}}',
    price: '{{unit-price-for-product}}'
    },
    {
    pid: '{{uniqueId-of-the-product}}',
    variantId: '{{variantId-of-selected-variant}}',
    qty: '{{quantity-selected}}',
    price: '{{unit-price-for-product}}'
    }
  ]
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.trackMultiple('order', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Facets

A Facet event tracks the guided navigation on the Category/Browse Pages. The event will list the specific filters the shopper has selected to narrow down the results on the browse results page.

				
					<script type="text/javascript">
  var payload = {
    facets: {'facet_name':['facet_value','facet_value'],'facet_name':['facet_value']},
    requestId: '{{unbxd-request-id}}',
    page: '{{category-path}}',
    page_type: '{{category-page-type}}'

  }
  if(Unbxd && typeof Unbxd.track === 'function') {
    Unbxd.track('facets', payload)
  } else {
    console.error('unbxdAnalytics.js is not loaded!')
  }
</script>

Payload details:

Attribute Name	Datatype	What value to be passed
requestId	string	To be extracted from Unbxd category 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.

HTML Based Integration

Introduction

With HTML Integration, you can insert custom HTML tags for tracking events. The Javascript works in tandem with the custom HTML attributes to identify and track events as they happen automatically.

As a first step we need to include UnbxdAnalytics.js script to the head of all the HTML pages, where we want the track functionality to work. You can add it using the below code to you HTML:

Sample Request:

				
					<script type="text/javascript">
  var UnbxdSiteName = "{{site-key}}"; // Replace the value with the Site Key.
  var UnbxdApiKey = "{{api-key}}"; // Replace the value with API key
  (function() {
    var ubx = document.createElement('script');
    ubx.type = 'text/javascript';
    ubx.async = true;
    ubx.src = '//libraries.unbxdapi.com/ua-js/v1.0.0/uaLibrary.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ubx);
  })();
</script>

NOTE: UnbxdSiteName should be initialized with the correct site key for the environment of your account in Unbxd.

Visitor

This event is used to track shoppers and make their user profiles using browser cookies. To enable this event we just need to add Unbxd’s analytics JS library (as done above) inside the head section of all pages of the site.

NOTE: The visitor event will be fired from the SDK itself. If you have integrated the Unbxd analytics JS code, this event is tracked and pushed automatically, with no further action required.

The Visitor event is the first event that gets created when a shopper visits your site. There are two types of shoppers we track:

First-time shoppers
Repeat shoppers

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 the user. Each browse results page is tracked to enable per category page analytics of the visitor. Add the script below on categoryPage before Unbxd analytics library is loaded.

NOTE: In case of SDK integration, we do not have to add this event explicitly and is handled by the SDK itself and requestId is also handled by SDK integration. Please ensure that unbxdAnalytics flag is set as “true” to allow this event to fire automatically.

				
					<script type="text/javascript">
UnbxdAnalyticsConf=window.UnbxdAnalyticsConf ||{};
UnbxdAnalyticsConf["page"]="{{page}}";
UnbxdAnalyticsConf["page-type"]="{{page}}";
</script>

Parameter details:

Attribute Name	Datatype	What value to be passed
page*	variable	Category path used for category api call (value of “p” parameter).
page_type*	variable	Page type for category path, BOOLEAN or CATEGORY_PATH based on page.

Note for parameters page and page_type details: For example, if user lands on “/bedrooms/beds” page and

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

				
					<script type="text/javascript">
UnbxdAnalyticsConf=window.UnbxdAnalyticsConf ||{};
UnbxdAnalyticsConf["page"]= "categoryPath:\"Bedrooms>Beds\"";
UnbxdAnalyticsConf["page-type"]="BOOLEAN";
</script>

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

				
					<script type="text/javascript">
UnbxdAnalyticsConf=window.UnbxdAnalyticsConf ||{};
UnbxdAnalyticsConf["page"]= "Bedrooms>Beds";
UnbxdAnalyticsConf["page-type"]="CATEGORY_PATH";
</script>

Category Page Impression

A category page impression event is fired when results of the category page loads for the first time, and whenever the 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 tracked.

NOTE: In case of SDK integration, we do not have to add this event explicitly and is handled by the SDK itself and requestId is also handled by SDK integration. Please ensure that unbxdAnalytics flag is set as “true” to allow this event to fire automatically.

To track a category page impression, insert the following HTML tag on all the products on your category page from API response.

				
					<li unbxdAttr="product" unbxdparam_sku="{{uniqueId-of-product}}">

Also, add the script below before Unbxd analytics library is loaded.

				
					<script type="text/javascript">
UnbxdAnalyticsConf=window.UnbxdAnalyticsConf ||{};
UnbxdAnalyticsConf["page"]="{{page}}";
UnbxdAnalyticsConf["page-type"]="{{page}}";
</script>

Parameter details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For search results product , the value is “ product” always.
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD search API response.
page	variable	Category path used for category api call (value of “p” parameter).
page_type	variable	Page type for category path, BOOLEAN or CATEGORY_PATH based on page.

Product Click

The Product Click event is generated every time a shopper clicks on a product in a Product Listing Page (PLP) or in a recommendation widget. This helps us understand your shoppers’ category preferences. This information is analyzed to list and promote ‘Popular Products’ in the autosuggest dropdown and display personalized ‘Recommended For You’ recommendations.

You can insert the following code snippet within < div > of product grid (product thumbnail) or within the < li > html tag.To display products within the PLP on the category page,

Sample code snippet with < li > tags:

				
					<li unbxdattr="product" unbxdparam_sku="{{uniqueId-of-product}}" unbxdparam_prank="{{rank-of-product}}" unbxdparam_requestId="{{window.requestId}}"> </li>

Sample code snippet with < li > tags:

				
					<div unbxdattr="product" unbxdparam_sku="{{uniqueId-of-product}}" unbxdparam_prank="{{rank-of-product}}" unbxdparam_requestId="{{window.requestId}}"> </div>

Payload details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For product clicks, the value is always “product”.
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD category API response.
unbxdparam_prank	variable	Specifies the position of the product in the category results grid/list. When this value is not specified, the value of the product that appears first in the list will be 1, and the value of the product that appears second will be 2, and so on.
unbxdparam_requestId	variable	Specifies the request Id which is the part of the response readers of the Search/Category API request. Note: For Search SDK integration, it is handled by SDK itself and can ignore this particular param.

Product View

Product 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).The product view can be tracked whenever a user lands on the PDP page by adding the below link to your HTML on page load.

				
					<li unbxdattr= “ProductView” unbxdparam_sku = “{{uniqueId-of-product}}” unbxdparam_variant = “{{variantId-of-variant}}” > </li>

Parameter details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For product view, the value is “ProductView” always.
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD search API response.
unbxdparam_variant (optional)	variable	Specifies the uniqueID(variantId) of the product variant added to the cart as defined in the feed schema. This parameter is a required field if the catalog has variants.

Add to Cart

Whenever a user adds any product to cart or shopping bag, the add to cart event will get fired.To track this event , insert the following code snippet on the “Add to Cart” button within your HTML page.

				
					<li unbxdattr="AddToCart"  unbxdparam_sku="{{uniqueId-of-product}}" unbxdparam_variant= “{{variantId-of-variant}}” unbxdparam_qty="{{no-of-units}}" unbxdparam_requestId="{{window.requestId}}" ></li>

Parameter details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For the cart event, the value is “AddToCart.”
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD search API response.
unbxdparam_variant(optional)	variable	Specifies the uniqueID of the product variant added to the cart as defined in the feed schema. This parameter is a required field if the catalog has variants.
unbxdparam_qty(mandatory)	variable	The number of units added to the cart. This should be the string value of the quantity added. For example, if 4 quantities of a product is added then its value would be “4” (instead of 4).
unbxdparam_requestId	variable	Specifies the request Id from the response of the search/category API. If the widget is not on the listing page, you can ignore this parameter., when products within the PLP widget have the Add to Cart button. Note: For Search SDK integration, it is handled by SDK itself and can ignore this particular param.

Cart Removal

This event tracks every instance a product is removed from the cart as well. The information helps us better understand the visitor’s preferences. To track products being removed from the cart, insert the following attributes within all “Remove from Cart” buttons on the cart page.

				
					<button unbxdattr= “RemoveFromcart” unbxdparam_sku= “{{uniqueId-of-product}}” unbxdparam_variant = “{{variantId-of-product}}” unbxdparam_price = “{{price-of-product}}” unbxdparam_qty = “{{no-of-units}}”/></button>

Parameter details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For cart removal, the value is “RemoveFromCart”.
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD category API response.
unbxdparam_variant (optional)	variable	Specifies the uniqueID of the product variant added to the cart as defined in the feed schema. This parameter is a required field if the catalog has variants.
unbxdparam_price	variable	Specifies the price of individual product/variant bought.
unbxdparam_qty (mandatory)	variable	The number of units added to the cart. This should be the string value of the quantity added. For example, if 4 quantities of a product is added then its value would be “4” (instead of 4).

Order

The Orders event is pushed for every product that is purchased on your site.

Using Custom HTML attributes you can integrate the functionality to track orders that have been successfully completed.

You can insert the following code snippet within < div > of product grid (product thumbnail) or within the < li > html tag.To display products within the PLP on the search results:

				
					<li unbxdattr="order"  unbxdparam_sku="{{uniqueId-of-product}}" unbxdparam_variant= “{{variantId-of-variant}}” unbxdparam_qty="{{no-of-units}}" unbxdparam_price=“{{price-of-product}}”></li>

Parameter details:

Attribute Name	Datatype	What value to be passed
unbxdattr	constant	Specifies the type of event getting captured. For product clicks, the value is “order” always.
unbxdparam_sku	variable	Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD search API response.
unbxdparam_variant(optional)	variable	Specifies the uniqueID of the product variant added to the cart as defined in the feed schema. This parameter is a required field if the catalog has variants.
unbxdparam_qty	variable	Specifies the number of products/variants purchased.
unbxdparam_price	variable	Specifies the amount of single unit a shopper has paid for the product/variant.

On this Section

To create a Query Rule
To Edit a Query Rule
Delete a Query Rule
Campaign States
Create Campaigns
Edit Campaigns
Preview Campaigns
Duplicate Campaigns
Delete Campaigns