FHR Tracking plan

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)

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

Variables

• productid

• quantity

• orderId

• widgetId

• locale

• price

• quantity

• currency

The productId should match the main productId in your catalogue

Views on Navigation Results

If your website's navigation is powered by Attraqt's services, you should send a navigation view event whenever your users navigate to a page and a query is made (in case of an infinite scroll implementation you can send multiple events while on the same page). Check the structure of the event below.

const viewActionOnNavigationResult = {
    "action":"view",
    "target": {
        "page": "path/to/page"
    },
    "sourceId":"f9caf9db-7549-4498-8c2a-3be977ce48d9",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(viewActionOnNavigationResult);

The properties needed for sending a view event on a navigation result are as follows:

• action - you need to specify the action as view

• target.page - you need to specify the path of your page in your web shop

• sourceId - if you are implementing an FHR integration, you need to specify sourceId which is equal to the responseId you get from the FAS response.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Views on Search Results

If your website's search is powered by Attraqt's services, you should send a navigation view event whenever your users navigate to a page. Check the structure of the event below.

const viewActionOnSearchResult = {
    "action":"view",
    "target": {
        "page": "path/to/page"
        "search-terms": "trousers"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(viewActionOnSearchResult);

The properties needed for sending a view event on a search result are as follows:

• action - you need to specify the action as view

• target.page - you need to specify the path of your page in your web shop

• target.search-terms - you need to specify the search terms. If you are implementing an FHR integration they would be available in the FHR query response.

• sourceId - if you are implementing an FHR integration, you need to specify sourceId which is equal to the responseId you get from the FHR query response.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Views on products (PDPs)

If your Product Detail Pages(PDPs) are powered by Attraqt's services, you should send a product view event when your users land on your product details page.

const viewActionOnProduct = {
    "action":"view",
    "target": {
        "product":"83647582"
    },
    "sourceId":"6266c5de-6a3c-4299-af78-3fd17dc3e787",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(viewActionOnProduct);

The properties needed for sending a view event on a product detail page are as follows:

• action - you need to specify the action as view

• target.product - you need to specify the product id of the product on the page. For an FHR integration, this corresponds to the secondId **provided in the FHR query** response.

• sourceId- if you are implementing an FHR integration you need to specify a sourceId which is equal to the responseId you get from the FHR query response. If you are implementing an XO integration, you need to specify a sourceId which corresponds to the recommendationId.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Add to Cart

Lister page

When the add to cart comes from navigation result page or a search result page, rather than from a product detail page, we consider this as adding to cart from a lister page. See example:

const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    },
    "sourceId": "5f0dfaf1-c79a-47fd-982f-b17de6533cf3" // optional, see below
}
xo.activity.send(addToCartAction);

The properties needed for sending an add to cart event from a lister page are as follows:

• action - you need to specify the action as add-to-cart

• target.product - you need to specify the product id that is added to cart. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

• metadata.quantity - you need to specify the quantity of the item added in the basket.

• sourceId - if you are implementing an FHR integration you should send over the source id of the page which corresponds to the responseId **from the FHR query** response.

• locale - the locale selected by the user.

Any additional information you wish to send(other than quantity) can also be included in the metadata _**_object.

Important! Don't forget, you need to send a separate event for every item.

Product detail page

When the add to cart comes from a product detail page, you should omit the source id. See example:

const addToCartAction = {
    "action":"add-to-cart",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "quantity": 1,
        "locale": "en_GB"
    }
}
xo.activity.send(addToCartAction);

The properties needed for sending an add to cart event from a product detail page are as follows:

• action - you need to specify the action as add-to-cart

• target.product - you need to specify the product id that is added to cart. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

• metadata.quantity - you need to specify the quantity of the item added in the basket.

• locale - the locale selected by the user.

Any additional information you wish to send(other than quantity) can also be included in the metadata _**_object.

Add to Cart

Purchase

When your user decides to perform a purchase, you should send a purchase action for every item they are purchasing, but you can specify the quantity of the item purchased. Purchase events are mostly used to calculate purchase conversion rates, and revenues.

const purchaseAction = {
    "action":"purchase",
    "target": {
        "product":"83647582"
    },
    "metadata": {
        "orderId": "ec1851da-bff2-495c-b757-c162d9a079bd",
        "price": 3250,
        "quantity": 2,
        "currency": "EUR",
        "locale": "en_GB"
    }
}

xo.activity.send(purchaseAction);

The properties needed for sending a purchase event are as follows:

• action - you need to specify the action as purchase

• target.product - you need to specify the product id of the product that is purchased. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

• metadata.quantity - you need to specify the quantity of the item purchased.

• metadata.price - you need to specify the price of the product purchased - in cents (i.e. no decimal spaces).

• metadata.currency - the currency of the price, in **ISO 4217 format.

• locale - the locale selected by the user.

Any additional information you wish to send(other than quantity, price, and currency) can also be included in the metadata _**_object. Typical extra information for purchase events:

• metadata.orderId - the order id from your system.

Purchase

Click on a product

If you would like to add a click action when opening a product it can be done in the following way.

const clickActionOnProduct = {
    "action":"click",
    "target": {
        "product": "83647582"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(clickActionOnProduct);

The properties needed for sending a click event on a product are as follows:

• action - you need to specify the action as click

• target.product - you need to specify the product id that is the target of the click. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

• sourceId - if you are implementing an FHR integration, you need to specify sourceId for the page the user is performing the click from which is equal to the responseId you get from the FAS response.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Click on a product from a campaign

If the given product is also part of a campaign, you should add the campaign id through the campaign field in the target.

const clickActionOnProductFromCampaign = {
    "action":"click",
    "target": {
        "product": "83647582",
        "campaign": "41234266-cf17-4ed3-8423-fbd029a3d7ae"
    },
    "sourceId":"8efbbef2-6640-4c16-b263-1f5a84813a1c",
    "metadata": {
        "locale": "en_GB"
    }
}

xo.activity.send(clickActionOnProductFromCampaign);

The properties needed for sending a click event on a product are as follows:

• action - you need to specify the action as click

• target.product - you need to specify the product id that is the target of the click. If you are implementing an FHR integration, this would be equal to the secondId available in the FHR query response.

• target.campaign - you need to specify the campaign id of the campaign clicked. If you are implementing an FHR integration, this is available in the FHR query response.

• sourceId - if you are implementing an FHR integration, you need to specify sourceId for the page the user is performing the click from which is equal to the responseId you get from the FAS response.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Click on a facet

Click actions can also be recorded on facets. You should supply the facet id through the facet property(the case below is an example of a click on the color facet). You should also supply the value of the facet, by using the facet id as key(28f909c0-332b-4afd-bd75-1e0e793e1984) and entering the value(in this case red).

const clickActionOnFacet = {
  "action": "click",
  "target": {
    "facet": "28f909c0-332b-4afd-bd75-1e0e793e1984",
    "28f909c0-332b-4afd-bd75-1e0e793e1984": "red"
  },
  "sourceId": "8efbbef2-6640-4c16-b263-1f5a84813a1c",
  "metadata": {
    "locale": "en_GB"
  }
}

xo.activity.send(clickActionOnFacet);

The properties needed for sending a click event on a facet are as follows:

• action - you need to specify the action as click

• target.facet - you need to specify the facet id that is the target of the click. If you are implementing an FHR integration, this is available in the FHR query response.

• target.[facet_id] - you need to specify the facet value, where you use the facet id as key.

• sourceId - if you are implementing an FHR integration, you need to specify sourceId for the page the user is performing the click from which is equal to the responseId you get from the FAS response.

• locale - the locale selected by the user.

If you have any extra details you wish to send you can include them in the metadata _**_object.

Click