- Prepare your Schema
- Prepare your Catalog
- Upload your Feed
- Full Feed Upload
- Delta Feed Upload
- Single Record Upload
- Check Product Count
- JavaScript Based Integration
- HTML Based Integration
- Introduction to GTM
- Requirements
- Introduction
- 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
- Endpoint
- Authentication
- Headers
- Request Parameters
- API Response
- Response Components
- 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
JavaScript Based Integration
Introduction
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:
NOTE: UnbxdSiteName should be initialized with the correct site key for the environment of your account in Unbxd.
Visitor
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
Search
The search page event should be tracked when the user performs a search on site. It even includes selecting any option from Unbxd’s Autosuggest widget. It should track the query which user used to fetch the response (even the zero result queries should be tracked). Use the below code as a reference to call the Unbxd search track function.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.
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.
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 |
query |
string |
The search query used by user |
Search Impressions
The impressions events should be tracked whenever a new set of results are loaded on search listing page from the API response. It should have the information about the source of the page where results are being loaded and should contain the list of uniqueIds present in the response.
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.
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). |
query |
string |
Search query for search listing 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 search page in case of search query 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.
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, 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 |
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.
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 search query.
Payload details:
Attribute |
Datatype |
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.
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
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:
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 |
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 search results page.
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.
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. |
query |
string |
Search query for search listing page |
Autosuggest
If the autocomplete feature on store is powered by Unbxd, then events originating from Unbxd Autosuggest Widget should pass additional metadata. This enables us to improve autocomplete suggestions over time. It is also used to generate reports on how well different types of suggestions are doing.
Events from Autosuggest
In this section we will give examples of events which may originate from the user’s interaction with Autosuggest widget and hence should send suggestion related metadata with payload. This will cover Javascript based approach for integrating the events.
Search
Whenever a user selects any suggestion from Autosuggest widget and hits the form submit, this event should be tracked. It should also send additional information about the suggestion using autosuggestParams field in the payload.
For instance in case of infield suggestion like below:
On submitting the form (irrespective of mouse or keyboard) any of the options (including popular products) from the autocomplete box should trigger a search event which should provide autosuggest related metadata. The image beacon looks like this when selecting the “Batman” option from the suggestion list.
The Unbxd.track call will look like this based on the type of suggestion selected:
1. In case, it is an IN_FIELD suggestion which is selected and submitted:
Payload details:
Attribute Name |
Datatype |
What value to be passed |
event_type |
string |
‘Search’ needs to be passed as event in Unbxd.track |
autosuggest_type |
string |
IN_FIELD, usually the same as the value of doctype field in Unbxd autosuggest API. |
autosuggest_suggestion |
string |
Suggested query in IN_FIELD that is selected |
field_name |
string |
In case of IN_FIELD suggestions, the name of the field which is used for suggestion |
field_value |
string |
In case of IN_FIELD suggestions, the value of the field, which is the suggestion |
src_field |
string |
Source field, can be passed empty |
internal_query |
string |
The typed query in search box, which led to the suggestions in autosuggest |
2. In case, it is POPULAR_PRODUCTS suggestion which is selected and submitted:
Payload details:
Attribute Name |
Datatype |
What value to be passed |
event_type |
string |
‘Search’ needs to be passed as event in Unbxd.track |
autosuggest_type |
string |
POPULAR_PRODUCTS, usually the same as the value of doctype field in Unbxd autosuggest API. |
pid |
string |
UniqueId of the selected popular product. |
unbxdprank |
string |
In case of POPULAR_PRODUCTS suggestions, the rank of the product. |
internal_query |
string |
The typed query in search box, which led to the suggestions in autosuggest |
3. In case, it is KEYWORD_SUGGESTION suggestion which is selected and submitted:
Payload details:
Attribute Name |
Datatype |
What value to be passed |
event_type |
string |
‘Search’ needs to be passed as event in Unbxd.track |
autosuggest_type |
string |
KEYWORD_SUGGESTION, usually the same as the value of the doctype field in Unbxd autosuggest API. |
autosuggest_suggestion |
string |
Suggested query in keyword |
field_name |
string |
In case of KEYWORD suggestions, the name of the field which is used for suggestion |
field_value |
string |
In case of KEYWORD suggestions, the value of the field, which is the suggestion |
src_field |
string |
Source field, can be passed empty |
internal_query |
string |
The typed query in search box, which led to the suggestions in autosuggest |
Click
NOTE: Autosuggest click event only needs to be fired in the case of popular product suggestions when it directly redirects to PDP.
This event should be tracked (along with search) whenever any popular product option is clicked on the autocomplete box. Similar to payload in search from autosuggest, we can have different payload conditions when an In field or a popular product is selected respectively.
Payload details:
Attribute Name |
Datatype |
What value to be passed |
pid |
string |
In case of a popular product getting selected, we need to pass a uniqueId of the selected product. |
unbxdprank |
string |
In case of POPULAR_PRODUCTS suggestions, the rank (1 based index) of the product. |
Add to Cart
This event should be tracked whenever any product is added to cart directly from the autocomplete box.
Payload details:
Attribute Name |
Datatype |
What value to be passed |
pid |
string |
In case of popular product getting selected, we need to pass a uniqueId of the selected product. |
variantId |
string |
VariantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null |
qty |
string |
Quantity being added to the cart by the user |
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:
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
Search
The search query event should be tracked when the user performs a search on site. It even includes selecting any option from Unbxd’s Autosuggest widget. It should track the query which user used to fetch the response (even the zero result queries should be tracked).
NOTE: In case of Search SDK integration, we do not have to add this event explicitly and is handled hand in hand by the Search and Analytics SDK. Please ensure that unbxdAnalytics flag is set as “true” in Search SDK config, to allow this event to fire automatically with no further action for this event.
Use the below code as a reference to be inserted in HTML tags for input box and search button divs respectively:
1. Insert the unbxdattr=”sq” attribute within the < input > tag of the search box to capture the search query typed by the shopper. For eg:
2. The unbxdattr=”sq_bt” attribute is inserted on the link or search button (usually the magnification/search icon) that triggers search at the backend.
Parameter details:
Attribute Name |
Datatype |
What value to be passed |
unbxdattr |
constant |
|
Search Impression
A search impression event is fired when a search results page 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 search page should be sent as payload.
NOTE: In case of Search SDK integration, we do not have to add this event explicitly and is handled hand in hand by the Search and Analytics SDK. Please ensure that unbxdAnalytics flag is set as “true” in Search SDK config, to allow this event to fire automatically with no further action for this event.
To track a search results page impression, insert the following HTML tag on the search product title on the results page on your site.
Also, add the script below before Unbxd analytics library is loaded.
Parameter details:
Attribute Name |
Datatype |
What value to be passed |
unbxdattr |
constant |
Specifies the type of event getting captured. For search results product
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. |
query |
variable |
The search query which was called for loading the results. |
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 search page in case of search query results.
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:
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 “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. |
unbxdparam_prank |
variable |
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 |
variable |
Specifies the request Id which is the part of the response readers of the Search/Category API request. |
Product View
Product View indicates the total number of visits that has been made to the product details page (PDP). 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.
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 will get fired.
To track the number of ‘Add to Cart’, insert the following code snippet on the ‘Add to Cart’ button within your HTML page.
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. |
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:
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. |
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.
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 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_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). |
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 search results page. Add the below HTML snippet to all the individual facet options <div>, with the respective facetname and value.
Parameter details:
Attribute Name |
Datatype |
What value to be passed |
unbxdparam_facetname |
object |
Should contain name of the facet returned in API response. For eg: Color facet is selected. |
unbxdparam_facetvalue |
string |
Value of the option in facet values. For eg: In color facet, if an option has blue, then pass blue in this. |
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