XO Tracking plan

This page covers what you need to implement in order to integrate the the tracking library for XO.

The following documentation is deprecated, please take a look at our new page:

Prerequisites

In order to be able to send events through the tracker for your XO integration you need to have the following information ready from server side in your front-end application.

Triggers

View Activity (view)
Add to Cart Activity (add to cart)
Purchase Activity (buy)
Click on Recommendation Activity (click on recommendation)

Variables

productid
quantity
orderId
widgetId
locale
price
quantity
currency

Usually the click-on-recommendation trigger is available after the integration of the XO Recommendation API

View on PDP

Views are sent whenever your customer navigates to a page, in this example it is when navigating to a product detail page (PDP). The properties needed to send a view event are:

action – this is where you specify what action/trigger you want. In this example it will be View
target.product – this is where you specify the product ID of the product being viewed

Action & target.product are mandatory

Any other extra detail can be added in the metadata object.

const viewActionOnProduct = {
   "action":"view",
   "target": {
       "product":"PRODUCT ID"
   },
   "metadata": {}
}
xo.activity.send(viewActionOnProduct);

View on Search Results Page

When your user lands on a search results page. The properties needed to send a view event are as follows:

action - view
target.pathToPage - the path to the page in your webshop. Corresponds to target.pathToPage in the activity object.
metadata –
- query - the query searched by the user

const searchOnSRP = {
 "action": "view",
 "sourceId": "metadata.id",
 "target": {
     "pathToPage": "www.attraqt.com/my-page/"
   },
 "metadata": {
   "query": "KEYWORD"
 }
}
xo.activity.send(searchOnSRP);

View on PLP

When your user lands on a PLP. The properties needed to send a view event are as follows:

action - view
target.pathToPage - the path to the page in your webshop. Corresponds to target.pathToPage in the activity object.
metadata –
- facetId- the facetId used for the PLP
- facetValues : the value or list of values of the facet used for the PLP

const searchOnPLP = {
 "action": "view",
 "target": {
   "pathToPage": "www.attraqt.com/my-page/"
 },
 "sourceId": "metadata.id",
 "metadata": {
   "facetId": "Facet-id",
   "facetValues": ["This is my selected facet"]   
 }
}
xo.activity.send(searchOnPLP);

View on Search Suggest

When your user sees suggestions, for each character typed in the search input if it is the case. The properties needed to send a view event are as follows:

action - view
target.pathToPage - the path to the page in your webshop. Corresponds to target.pathToPage in the activity object.
metadata –
- query - the query searched by the user
- suggest - if the view concerned the search suggestion

const searchOnSuggest = {
 "action": "view",
 "sourceId": "metadata.id",
 "target": {
     "pathToPage": "www.attraqt.com/my-page/"
   },
 "metadata": {
   "query": "KEYWORD"
   "suggest": true
 }
}
xo.activity.send(searchOnSuggest);

View

Add to Cart

Add to cart should be sent when a user adds a product/item to their cart. This action is mostly used to calculate add to cart/basket conversion rates. This event should be sent for each product the user adds, and a specific quantity per product can be added in metadata.

The properties needed to send an add-to-cart event from a product detail page are:

action - add-to-cart
target.product - id of the product added to the cart
metadata - quantity and any other information wanted

const addToCartAction = {
	"action":"add-to-cart",
	"target": {
	"product":"PRODUCT ID"
},
"metadata": {
	"quantity": NUMERIC VALUE OF QUANTITY ADDED TO CARD,
	"variant": VARIANT ADDED TO CART
}
}
xo.activity.send(addToCartAction);

Add To Cart on SRP

The properties needed to send an add-to-cart event from a search result page are:

action - add-to-cart
target.product - id of the product added to the cart
metadata - quantity and any other information wanted
facetId- the facetId used for the PLP
facetValues : the value or list of values of the facet used for the PLP
quantity - you need to specify the quantity of the item purchased as an integer
price - you need to specify the price of the product purchased - in cents (i.e. no decimal spaces).
currency - the currency of the price, in **ISO 4217 format.

const addToCartAction = {
  "action": "add-to-cart",
  "target": {
    "product": "PRODUCT ID"
  },
  "sourceId": "metadata.id",
  "metadata": {
    "query": "KEYWORDS",
    "price": 0,
    "currency": "CURRENCY",
    "quantity": NUMERIC VALUE OF QUANTITY ADDED TO CARD,
    // optional:
    "variant": "VARIANT ADDED TO CART" 
  }
}
xo.activity.send(addToCartAction);

Add To Cart on PLP

The properties needed to send an add-to-cart event from a product listing page are:

action - add-to-cart
target.product - id of the product added to the cart
metadata - quantity and any other information wanted
facetId- the facetId used for the PLP
facetValues : the value or list of values of the facet used for the PLP
quantity - you need to specify the quantity of the item purchased as an integer
price - you need to specify the price of the product purchased - in cents (i.e. no decimal spaces).
currency - the currency of the price, in **ISO 4217 format.

const addToCartAction = {
  "action": "add-to-cart",
  "target": {
    "product": "PRODUCT ID"
  },
  "sourceId": "metadata.id",
  "metadata": {
    "facetId": "Facet-id",
    "facetValues": ["This is my selected facet"],
    "price": 0,
    "currency": "CURRENCY",
    "quantity": NUMERIC VALUE OF QUANTITY ADDED TO CARD,
    // optional:
    "variant": "VARIANT ADDED TO CART" 
  }
}
xo.activity.send(addToCartAction);

Add to Cart

Purchase

When a user makes a purchase, a purchase action should be sent for every item that is purchased (you can specify the quantity of the item purchased). Purchase events are used to calculate purchase conversion rates and revenue.

The properties needed to send a purchase event are as follows:

action - purchase
target.product - id of the product purchased
metadata – orderID and any other information wanted
quantity - you need to specify the quantity of the item purchased as an integer
price - you need to specify the price of the product purchased - in cents (i.e. no decimal spaces).
currency - the currency of the price, in **ISO 4217 format.

const purchaseAction = {
	"action": "purchase",
	"target": {
		"product":"PRODUCT ID"
	},
	"metadata": {
		"orderId": "ORDER ID",
		"price": 0,
		"currency": "CURRENCY",
	        "quantity": 0
       }
}
xo.activity.send(purchaseAction);

Purchase

Click on recommendation

When a customer clicks on a XO recommendation, it's important to send a click event so that the event is then linked to future actions on this product.

The properties needed to send a click event are as follows:

action - click
target.product - id of the product clicked
sourceId - The ID at the root the JSON API Response
metadata –
- widgetId - The ID of XO Recommendation widget

const clickActionOnRecommendation = {
 "action": "click",
 "target": {
   "product": "PRODUCT ID"
 },
 "sourceId": "RECOMMENDATION ID",
 "metadata": {
   "widgetId": "WIDGET ID"
 }
}
xo.activity.send(clickActionOnRecommendation);

Both widgetId & sourceId are mandatory

Click on Search Result

When a users searches for items and the Search are powered by XO we need to track the clicks of the user on its selected item

The properties needed to send a click on a search result event are as follows:

action - click
target.product - id of the product clicked
sourceId - metadata.id which is returned in all API answers
metadata –
- query - the query/keyword

const clickOnSearchResults = {
 "action": "click",
 "target": {
   "product": "PRODUCT ID"
 },
 "sourceId": "metadata.id",
 "metadata": {
   "query": "KEYWORD"
 }
}
xo.activity.send(clickOnSearchResults);

Click on Search Suggest Result

When a users searches for items using suggest. The properties needed to send a click on a search suggest result event are as follows:

action - click
sourceId - metadata.id which is returned in all API answers
target.product - id of the product clicked
metadata –
- query - the query
- suggest - if the click is on a search suggestion

const clickOnSuggestResults = {
 "action": "click",
 "target": {
   "product": "PRODUCT ID"
 },
 "sourceId": "metadata.id",
 "metadata": {
   "query": "KEYWORD",
   "suggest":true
 }
}
xo.activity.send(clickOnSuggestResults);

Click on PLP Result

When a users searches for items or open a PLP and the search/PLP are powered by XO we need to track the clicks of the user on its selected item

The properties needed to send a click on a PLP result event are as follows:

action - click
target.product - id of the product clicked
sourceId - metadata.id which is returned in all API answers
metadata –
- facetId- the facetId used for the PLP
- facetValues : the value or list of values of the facet used for the PLP

const clickOnPLP = {
 "action": "click",
 "target": {
   "product": "PRODUCT ID"
 },
 "sourceId": "metadata.id",
 "metadata": {
   "facetId": "Facet-id",
   "facetValues": ["This is my selected facet"] 
 }
}
xo.activity.send(clickOnPLP);

Click on Facet

When a users clicks on a facet in a PLP or in a SRP

The properties needed to send a click on a facet event are as follows:

action - click
target
- facetId- the facetId
- facetValues : the value or list of values of the facet

Facets informations must be inside the target object

const clickOnFacet = {
 "action": "click",
 "target": {
   "facetId": "FACET-ID",
   "facetValue": "MY-FACET-VALUE"
 },
 "sourceId": "metadata.id"
}
xo.activity.send(clickOnFacet);

Click

PreviousFHR Tracking plan NextThe Tracking API and JS Library

Last updated 1 year ago