FrontEnd

Topsort's JS analytics event library: Use this to send clicks and impressions to the Topsort API.

Installation

With npm

npm install @topsort/analytics.js --save

Usage

Load topsort.js

<script>
  window.TS = {
    token: "<YOUR-TOPSORT.JS-TOKEN>",
    url: "https://api.topsort.com", // change this if you want to test against the staging environment
  };
</script>
<script src="https://unpkg.com/@topsort/[email protected]/dist/ts.js"></script>

Add markup to your products

const newvalue = currentvalue.replace('"', """).replace("'", "'"); // etc.

Add the following markup to promoted products:

<div class="product" data-ts-resolved-bid="<resolvedBidId>">...</div>

and the following for organic products (which is optional)

<div class="product" data-ts-product="<productId>">...</div>

Additionally, in case not all the container is clickable (i.e., does not produce an action or does not take you to the product page) or parts of it lead you to a non-related product page, make sure to use the data-ts-clickable attribute to indicate what portions of the product should count as a conversion.

<div
  class="product"
  data-ts-product="<productId>"
  data-ts-resolved-bid="inherit"
>
  ...
</div>

Adding further information to purchases can be made by passing the ts-data-items JSON array:

<div
  data-ts-action="purchase"
  data-ts-items='[{"product": "product-id-purchase-1", "quantity":1, "price": 2399}, {"product": "product-id-purchase-2", "quantity": 2, "price": 399}]'
>
  My purchase
</div>

Finally, in case you are using banners and want to have further control on the attributable products you need to add the following markup in the banner's destination page.

<div
  class="product"
  data-ts-product="<productId>"
  data-ts-resolved-bid="inherit"
>
  ...
</div>

E2E tests

Execute npm run test:e2e, at the end it will show you the url you need to visit to test the library.

Ideally you would check the library both in desktop and mobile browsers. For that you need to be connected to the same network.