- Prepare your Schema
- Prepare your Catalog
- Upload your Feed
- Full Feed Upload
- Delta Feed Upload
- Single Record Upload
- Check Product Count
- Visitors
- Introduction to GTM
- Requirements
- Events
- API Integration
- Search Endpoint
- Authentication
- Header
- Request Parameter
- Response Components
- Explanation Request Parameter
- PDP API Format
- Sample Request
- Request Parameters
- Response Parameters
- System Requirements
- Install SDK
- Initialize SDK
- Unbxd Commerce Search
- Integrating Unbxd Autosuggest
- Unbxd Analytics
- Unbxd Browse
- Unbxd Recommendations
- Sample App
- Installation
- Unbxd Analytics
- Unbxd Commerce Search
- Unbxd Autosuggest
- Unbxd Browse
- Unbxd Recommendations
- Sample iOS App
- Quickstart with Unbxd Template
- Quick Integration to your site
- Detailed Guide
- Authentication
- Types of Pages to Render
- Configuring the Page
- Instance Methods
- More Information
- Available Configurations
- Libraries
- QuickStart
- Authentication
- Configuring Autosuggest
- Sample Options Object
- Handlebar Functions
- List of Configs
- Search Template
- Loader Config
- Facet Config
- Pagination
- Spellcheck
- Sort Config
- PageSize Config
- Breadcrumb Config
- Product Views
- Variants
- Quick Integration with Unbxd template
- Quick Integration to your site
- Installation
- Authentication
- Types of pages to render
- Configuring the page
- PageSize Config
- More Info
- Create an Unbxd Account
- Create an Unbxd Site
- Upload a Catalog
- Setup Search
- Integrate Search
- Create an Unbxd Account
- Create an Unbxd Site
- Upload a Catalog
- Setup Search
- Integrate Search
- Plugin Installation
- Configuration
- Uninstallation
- Test Plugin Installation
- Installation
- Authentication
- Catalog
- Catalog Sync
- Product Integration
- Custom Template
- Indexing Queue View
- Feed View
- Upgrade
- Uninstall
- Installation
- Authentication
- Catalog
- Cron Job
- Product Config
- Uninstall
- Installation
- Configuration
Browser Integration
Introduction
Tracking visitor analytics and behavior is 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 the 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.
Event Types
Events are any action a visitor takes on your eCommerce store. This section helps you understand more about the session-based events we track, like:
Visitor
Identifies new and returning shoppers. When a user visits the website for the first time or visits the website after 30 mins of the ideal time, UNBXD identifies the user as a new shopper. UNBXD does this by creating the cookie. For new shoppers, UNBXD assigns a new user.id
and session_id
. After 30 mins of ideal time, user.id
remains unchanged however session_id
changed to a new value.
Search Hit
This event is supposed to be fired when a shopper searches for a product either by pressing enter or clicking on the search icon. This event should not be fired with an empty query.
Search Impression
Fire this event when a list of products is loaded on the search result page. It is fired with a pid list of all the products shown on the first search result page and then as the user visits the subsequent pages.
Product Click
Fire this event when a user clicks on a product listed on the search result page or category page.
Add to Cart
Fire this event when a user adds a product to the cart. Fire this event for each of the products added to the cart.
Orders
Fire this event for each of the items in the order. For example – if 4 items are bought in one order then we need to fire an order event for each of the items. UNBXD also provide unbxd.trackMultiple
in which customer can pass multiple orders in one API.
Cart Removal
Fire this event for the item which is removed from the cart.
Dwell time
The time a shopper has spent on a product page.
Facets
This will fire when the user will select the filters on the listing pages. Filters applied for search or browse events.
Configuration
Your first step is to insert a JavaScript code snippet within all the HTML pages on your website.
This snippet will not affect the performance of the page as it will be loaded asynchronously. This code could be inserted anywhere on the page (header, body, footer) and need not be included in the head section of the HTML.
Where UnbxdSiteName
is a unique identifier provided when you create an UNBXD account. You can also get the Site Key from Manage > Configure Site > Keys from within the Console. This is a mandatory field
After integrating the configurations, you might want to track the analytics for all the events.
The analytics events are tracked in two ways.
- Using HTML attributes: 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.
The unbxdattr=”sq_bt”
attribute is inserted on the link or search button (usually the magnification/search icon) that triggers search at the backend.
- Using Tracker function: You can add custom APIs for tracking different visitor events. These event-based API calls will track every event and store information within the UNBXD Cloud server until the browser cookies are cleared.
Unbxd.track(type,params)
Where type
refers to the type of the analytics event and params refers to the associated parameters relevant to that analytics event.
Visitors
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
All shopper events are tracked against an anonymous User ID that is allotted to every shopper visiting your site.
Site-level information, like the userID
, sessionId
, and visitType
parameter, are stored in three cookies titled:
- ‘unbxd.userId’
- ‘unbxd.visitId’
- ‘unbxd.visit’
All these files are created for first-time visitors.
A shopper is labeled first-time visitor when:
- The shopper has visited your site for the first time.
- unbxd.userId gets created
- unbxd.visitId with a new value and unbxd.visit cookie with value "first_time" is created.
- All the subsequent actions of the user will be captured as in the case of a first time user until there’s an idle period of 30 minutes or more.
- If the shopper clears all the cookies then the cookies are downloaded again.
A shopper is labeled a repeat visitor when:
- Shopper returns to the site and only unbxd.userId cookie is set.
- unbxd.visitId with a new value and unbxd.visit cookie with value “repeat” is created.
- All the subsequent actions of the user will be captured as that of a repeat user.
The User ID is a random numerical value with the timestamp of the visit and is device/browser-specific. For instance, a shopper accessing your site on Google Chrome and Mozilla Firefox on the same computer will have two different values for this cookie for each browser.
NOTE: The ‘unbxd.visitID’ and the ‘unbxd.visit’ cookies are set to expire after 30 continuous minutes of inactivity. If you have integrated the Unbxd analytics JS code, this event is tracked and pushed automatically, with no further action required.
If you have integrated the UNBXD analytics JS code, this event is tracked and pushed automatically, with no further action required.
Search Hit
The Search event is generated every time a shopper uses the search bar to search for a product on your site.
This event query will have the following pieces of information:
- Keyword query
- Site name
- Web address
- Referrer
- Type of Visitor
- Version of the SDK
- Visit ID
- Action performed
- User ID
- Site Key
Custom HTML attributes
Insert the unbxdattr=”sq”
attribute within the < input >
tag of the search box to capture the search query typed by the shopper.
The unbxdattr=”sq_bt”
attribute is inserted on the link or search button (usually the magnification/search icon) that triggers search at the backend.
Here’s what a typical response would look like:
Tracker Function
To track a shopper’s search hits, insert the following API query on the link or search button (usually the magnification/search icon):
unbxd.track("search" , { "query" : })
Where,
query: Indicates the shopper’s search text
Here’s what a typical response would look like:
unbxd.track("search",{"query" : "dress"});
To track Autosuggest results through the Unbxd Analytics.js using HTML tags.
Autosuggest Types supported for tracking
Autosuggest tracking is a part of the search event analytics. However in case when a user selects any of the autosuggest suggestions instead of clicking on the search button, then search event hits need extra information about the autosuggest option selected by the user.
UNBXD Autosuggest types:
- Promoted Suggestions
- Keyword Suggestion
- Popular Products
- Top Search Queries
- In-Field
Attributes required to be set for Autosuggested HTML elements
- unbxdAttr = “autosuggest”
- unbxdParam_autosuggestType = “”
- unbxdParam_autosuggestSuggestion = “”
- unbxdParam_autosuggestFieldName = “” Valid for autosuggest type IN_FIELD, eg. gender, for infield query gender: men
- unbxdParam_autosuggestFieldValue = “” Valid for autosuggest type IN_FIELD, eg. men, for infield query gender:men
- unbxdParam_autosuggestSrcField = “” Valid for autosuggest types INFIELD & KEYWORD_SUGGESTION, how the suggestion was generated. Eg. “color”, “color type”, “type” etc
- unbxdParam_pid = “” Valid for autosuggest type POPULAR_PRODUCTS, id of the product clicked
- unbxdParam_pRank = “” Rank of the suggestion
Integration Steps to add HTML attributes
Promoted Suggestion:
{
unbxdAttr = “autosuggest”
unbxdParam_autosuggestType = “PROMOTED_SUGGESTION”
unbxdParam_autosuggestSuggestion = ””
unbxdParam_autosuggestFieldValue = null
unbxdParam_autosuggestFieldName = null
unbxdParam_autosuggestSrcField = null
unbxdParam_pRank = (rank in the dropdown)
unbxdParam_pid = null
}
Keyword Suggestion:
{
unbxdAttr = “autosuggest”
unbxdParam_autosuggestType = “KEYWORD_SUGGESTION”
unbxdParam_autosuggestSuggestion = “”
unbxdParam_autosuggestFieldValue = null
unbxdParam_autosuggestFieldName = null
unbxdParam_autosuggestSrcField = “”
unbxdParam_pRank = (rank in the dropdown)
unbxdParam_pid = null
}
Popular Products
{
unbxdAttr = “autosuggest”
unbxdParam_autosuggestType = “POPULAR_PRODUCTS”
unbxdParam_autosuggestSuggestion = ”Monoprice Premium Hi-Fi DJ Style Over-the-Ear Pro Headphones with Mic”
unbxdParam_autosuggestFieldValue = null
unbxdParam_autosuggestFieldName = null
unbxdParam_autosuggestSrcField = null
unbxdParam_pRank = (rank in the dropdown)
unbxdParam_pid = “1234”
}
Top Queries:
{
unbxdAttr = “autosuggest”
unbxdParam_autosuggestType = “TOP_SEARCH_QUERIES”
unbxdParam_autosuggestSuggestion = “Headphones”
unbxdParam_autosuggestFieldValue = null
unbxdParam_autosuggestFieldName = null
unbxdParam_autosuggestSrcField = “topQuery”
unbxdParam_pRank = (rank in the dropdown)
unbxdParam_pid = null
}
Function for tracking a suggestion
Keyword Suggestion:
Unbxd.track(“search”, {query: “wat”, autosuggestParams: {
unbxdAttr:”autosuggest”,
unbxdParam_autosuggestType:” KEYWORD_SUGGESTION”,
unbxdParam_autosuggestSuggestion: “sparkling water”,
unbxdParam_autosuggestFieldValue: null,
unbxdParam_autosuggestFieldName: null,
unbxdParam_autosuggestSrcField: “category”,
unbxdParam_pRank:”3”,
unbxdParam_pid: null
}});
Popular Products:
Unbxd.track(“search”, {query: “dress”, autosuggestParams: {
unbxdAttr:”autosuggest”,
unbxdParam_autosuggestType:”POPULAR_PRODUCTS”,
unbxdParam_autosuggestSuggestion: “sequin pearl blue dress”,
unbxdParam_autosuggestFieldValue: null,
unbxdParam_autosuggestFieldName: null,
unbxdParam_autosuggestSrcField: null,
unbxdParam_pRank:”3”,
unbxdParam_pid: “3425”
}});
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’ search preferences. This information is analyzed to list and promote ‘Popular Products’ in the autosuggest dropdown and display personalized ‘Recommended For You’ recommendations.
There are two ways you can integrate the functionality to track product clicks:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
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 or category page,
Sample code snippet with < li > tags:
Where,
- unbxdattr: Specifies the type of event getting captured. For product clicks, the value is “product” always.
- unbxdparam_sku: Specifies the uniqueId of the product as defined in the feed. You can get this from the UNBXD search API response.
- unbxdparam_prank: Specifies the position of the product in the search 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: Specifies the request Id which is the part of the response readers of the Search/Category API request.
Tips: For enhanced tracking, set the following query information before loading the UNBXD analytics tracking plugin on a search and category Product Listing Page.
Tracker Function
unbxd.track(“click”,{“pid”:”21423”})
Add to Cart
The Add to Cart (or known as Cart) event is generated when a shopper adds a product to the shopping cart.
There are two ways you can integrate the functionality to track Add to Cart clicks:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
To track the number of ‘Add to Cart’, insert the following code snippet on the ‘Add to Cart’ button within your HTML page.
Where,
- unbxdattr: Specifies the type of event getting captured. For the cart event, the value is “AddToCart.”
- unbxdparam_sku: Specifies the uniqueId of the product as defined in the feed.
- unbxdparam_variant (optional): 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): The number of units added to the cart. This should be the string value of the quantity added. For example, if 4 quantity of a product is added then its value would be “4” (instead of 4).
- unbxdparam_requestId: 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.
Tracker Function
To track every time a shopper clicks on the Add to Cart button for a product without variants, insert the following API code to the ‘Add to Cart’ button within your PDP’s HTML page to track products without variants.
Unbxd.track("cart",{"pid"=,"qty":,"requestId":})
To track products with variants added to a cart, insert this API code:
Unbxd.track("cart",{"pid"=,"variantID"=,"qty":,"requestId":})
Where,
- pid: The unique identifier of the product as defined in the feed schema.
- vid (optional) : The unique identifier of the variant added to the cart as defined in the feed schema. If this field is not available, we will not be able to track variants.
- qty (optional): The number of variants added to the cart. If variants have not been added to the cart, the parameter value will be 1.
- request Id: Specifies the request Id of the response, when products within the PDP widget have the Add to Cart button.
Order
The Orders event is pushed for every product that is purchased on your site.
There are two ways you can integrate the functionality to track orders that have been successfully completed:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
To track a successful order, insert the following API code within the HTML tags on the order confirmation page on your site.
Where,
- unbxdattr: Specifies the type of event getting captured. For ordering the product, the value is “order”.
- unbxdparam_sku: The unique identifier of the product as defined in the feed.
- unbxdparam_variant (optional): Specifies the variantId of the product added to the cart as defined in the feed. This parameter is a required field if the catalog has variants.
- unbxdparam_price: The amount of single unit a shopper has paid for the product/variant.
- unbxdparam_qty: The number of products/variants purchased.
Tracker Function
To track every successful order for a product without variants, insert the following API code to the order confirmation page.
Unbxd.track("order",{"pid":,"qty":,"price":})
To track every successful order for a product with variants, insert this API code:
Unbxd.track("order",{"pid":,"variantId":,"qty":,"price":})
Orders with Multiple Products
To track an order containing multiple products, you can use the Unbxd.trackMultiple function instead of calling the Unbxd.track function individually for each product in the order basket :
Unbxd.trackMultiple("order",[{"pid":,"qty":,"price":},{"pid":,"qty":,"price":},...])
Where,
- pid: The uniqueId of the product as defined in the feed.
- variant Id (optional): The variant Id of the variant added to the cart as defined in the feed. If the product feed has variants, this parameter is required.
- qty: The number of variants added to the cart. If no value is specified, we will take the default value as 1.
- price: The amount of a single unit a shopper has paid for the product ordered.
Remove from Cart
This event tracks every instance a product is removed from the cart as well. The information helps us better understand the visitor’s preferences.
There are two ways you can integrate the functionality to track products that have been removed from the cart:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
To track products being removed from the cart, insert the following attributes within all “Remove from Cart” buttons on the cart page.
Where,
- unbxdattr: Specifies the type of event getting captured. For cart removal, the value is “RemoveFromCart”.
- unbxdparam_sku : UniqueId of the product as defined in the feed.
- unbxdparam_variant (optional): UniqueId of the variant as defined in the feed. This parameter is optional and is only needed if the catalog has variants.
- unbxdparam_price: Price of individual product/variant bought.
- unbxdparam_qty (mandatory): The number of units added to the cart. This should be the string value of the quantity added. For example, if 4 quantity of a product is added then its value would be “4” (instead of 4).
To track products being removed from cart, insert the following APIs within all “Remove from Cart” buttons on the cart page.
Unbxd.track ("cartRemoval",{ "pid":,"qty":})
Where,
-
< PID>: Unique ID or SKU ID of the product
-
< QTY>: Number of products that are removed from the cart
Search Impression
A Search Impression (also known as Product Impressions) event is generated after a shopper gets a list of products on the search results page. This event is also generated every time a shopper refines the results by facets, filters, scroll-down or pagination. The productId of the products listed in the PLP will be sent as a payload.
There are two ways you can integrate the functionality to track Search Impression events:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
To track every search impression, insert the following API code within the HTML tags on the product category pages on your site.
Where:
query: Specifies the search query
Custom APIs
Unbxd.track('search_impression',{query:query,pids_list:pids_list})
Where:
query: Search query
pids_list: List of newly loaded pids.
Example:
Unbxd.track('search_impression', {query : ‘shirt’, pids_list : [‘a001’,’a002’]})
Dwell Time
A Dwell time event is generated to indicate the time spent on the Product Details Page (PDP). This event is generated every 10 seconds and serves to indicate the amount of time a shopper remains on the page.
There are two ways you can integrate the functionality to track product clicks:
- Custom HTML attributes
- Custom APIs
Custom HTML attributes
To track the amount of time a shopper spends on a PDP, insert the following HTML on the product details page.
Copyright 2020 © Unbxd Inc, All Rights Reserved. Privacy Policy