Analytics.js - Topsort Documentation

La biblioteca pública analytics.js de Topsort permite a los marketplaces enviar fácilmente eventos de interacción de Topsort, como clics, impresiones y compras, con una integración de bajo código. Al usar una simple etiqueta HTML, el marketplace puede conectarse al servidor de anuncios de Topsort y enviar todos los eventos de seguimiento relacionados con un anuncio.

Instalación

Puedes instalar la biblioteca usando npm o yarn, o cargar el SDK directamente en tu archivo HTML incluyendo una etiqueta <script>:

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

Marcando Elementos Promocionados

Para permitir que Topsort rastree automáticamente clics, impresiones y compras, usa el elemento HTML data-ts-* para marcar elementos promocionados en la página.

Elementos orgánicos (no promocionados)

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

Elementos promocionados

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

Áreas clicables

Usa data-ts-clickable para indicar qué áreas deben activar un evento de clic:

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

Para anuncios de banner con atribución de producto:

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

Seguimiento de compras

Usa el array JSON data-ts-items para rastrear compras:

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

Ejemplo End to End

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js@latest/dist/ts.js"
></script>
<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>

<body>
  <div class="product" data-ts-product="24-MB03" data-ts-resolved-bid="inherit">
    <topsort-banner
      width="600"
      height="400"
      id="<your slot id>"
    ></topsort-banner>
  </div>

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

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

​Instalación

​Marcando Elementos Promocionados

​Elementos orgánicos (no promocionados)

​Elementos promocionados

​Áreas clicables

​Atribución de banner

​Seguimiento de compras

​Ejemplo End to End