Setup for Tracking Requirements
This guide is part of a general setup guide for unsupported platforms. Find the main page for the full general guide here.
General tracking:
The Hello Retail JavaScript must be placed on all pages of the webshop. The script should be inserted into the header section for optimal load speed. If creating an extension, the extension should facilitate this.
<script async src="https://helloretailcdn.com/helloretail.js"></script>
<script>
window.hrq = window.hrq || [];
hrq.push(['init', {}]);
</script>
Single Page Applications:
For SPA (Single page applications) you need to call the script's reload endpoint whenever essential page content changes — the most common would be when the URL changes.
The following method should be called after the new content is available in the DOM.
hrq = window.hrq || [];
hrq.push("reload");
Conversion and cart tracking:
While the Hello Retail script takes care of most of the tracking on its own, it still needs a little help when it comes to conversion and cart tracking.
Conversion and cart tracking can be done by either inserting spans to the DOM or by calling our JavaScript API — of the two methods we prefer the API.
If you choose to use our JavaScript API then you need to make sure that the general Hello Retail script is loaded and ready when you try to call the API - you can check our documentation for event binding here: https://developer.helloretail.com/sdk/tracking/event_binding/
There is also an example of this being used if you go to the conversion tracking example in the documentation.
Conversion tracking specifics:
Conversions should be registered when an order is completed. Typically this will happen on the order receipt/confirmation page.
Cart tracking specifics:
The cart tracking needs to happen whenever a change is made to the cart, no matter what page the customer is on. For simplicity, you can also choose to just update the cart on every page load.
If a variant product has been purchased then the ProductData registered in the cart should be from that variant.
Cart restore:
The cart span has an attribute called "cart-url" and the API function accepts a "url" key in its data object. This is used specifically for abandoned cart triggered emails so a link to restore each unique cart can be provided.
Usually, this is implemented through a cart restore endpoint in the extension which takes cart data as a parameter - it could look something like this: https://domain.com/cart/restore?x:y,x:y where x indicates the product id and y indicates the quantity.
Depending on the shop system it might be necessary to expand the format to accept variation or option ids as well.
Exactly how you chose to implement this feature is up to you as long as it works by requesting a URL with some parameters.