analytics.js events reporting library

Topsort, as part of its effort to simplify running ads in marketplaces, has made a JS library for reporting events. This library is similar to Google analytics and is able to report impressions, clicks and purchases.

The library is small in size, less than 5kiB uncompressed, cross-browser, tested, and handles the user session.

As a sneak peak, below are the integration steps.

Load topsort.js

In your HTML add the following scripts

<script>
  window.TS = {
    token: "<YOUR-TOPSORT.JS-TOKEN>",
    url: "YOUR PRODUCTION OR STAGING TOPSORT URL",
  };
</script>
<script src="node_modules/@topsort/analytics.js/dist/ts.js"></script>

Add markup to your products

Add the following data attributes to your product container.

<div 
     class="product"
     data-ts-product="<productId>"
     data-ts-auction="<auctionId>"
     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>

In the example above, only click on the upper div will be counted as conversions, and clicks on the Help

Add markup to report purchases

<div class="purchase" data-ts-action="purchase" data-ts-items='[{"product":<productId>,"quantity":<quantity>,"price":<price>},...]'>...</div>

Did this page help you?