@topsort/analytics.js

Topsort analytics.js

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/analytics.js@2.0.0/dist/ts.js"></script>

Add markup to your products

Either mix quotes (single/double) or escape certain characters inside your values. In javascript:

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

Pass said values to your html:

<div
  class="product"
  data-ts-product="<productId>"
  data-ts-resolved-bid="<resolvedBidId>"
>
  ...
</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" ...>
  <div data-ts-clickable>
    <img src="https://cdn.marketplace.com/product.png" />
    <span>Product Title</span>
  </div>
  <span>Help</span>
</div>

Finally, 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>

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.