Analytics.js

<script>
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Replace with your Topsort API key
  };
</script>
<script src="https://unpkg.com/@topsort/analytics.js@latest/dist/ts.iife.js"></script>

npm install @topsort/analytics.js

// topsort-config.js
window.TS = {
  token: "TSE_XXXXXXXXXXXX", // Replace with your Topsort API key
};

// index.js, your application's entry point
import "./topsort-config.js";
import "@topsort/analytics.js";

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

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

<!-- Render: reported when this element is added to the DOM -->
<!-- Impression: reported when it becomes visible to the shopper -->
<div class="product" data-ts-resolved-bid="<resolvedBidId>">...</div>

<div class="product" ...>
  <div data-ts-clickable>
    <img src="https://cdn.marketplace.com/product.png" />
    <span>Product Title</span>
  </div>
  <span>Help</span>
</div>

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

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

<script>
  window.TS = {
    token: "<your topsort api key>",
  };
  window.TS_BANNERS = {
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Loading...";
      return el;
    },
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Error loading banner";
      return el;
    },
  };
</script>
<script src="https://unpkg.com/@topsort/analytics.js@latest/dist/ts.iife.js"></script>
<script type="module" src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"></script>

<body>
  <topsort-banner width="600" height="400" id="<your slot id>"></topsort-banner>

  <div class="product" data-ts-resolved-bid="<resolvedBidId>">
    <div data-ts-clickable>
      <span>Clickable content</span>
    </div>
    <span>Non clickable content</span>
  </div>

  <!-- On the banner's destination page: a product featured in the banner -->
  <div class="product" data-ts-product="24-MB03" data-ts-resolved-bid="inherit">...</div>

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