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. Note that for promoted products you only need to specify the resolved bid id which was returned in the auction.

<div 
     class="product"
     data-ts-resolved-bid="<resolvedBidId>"
     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" ...>
  <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>