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: Tracking Implementation Guide

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);
pageView

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);
pageAdd 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);
pagePurchase

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);
pageClick
PreviousFHR Tracking planNextThe Tracking API and JS Library

Last updated