Analytics.js - Topsort Documentation

A biblioteca pública analytics.js do Topsort permite que marketplaces enviem facilmente eventos de interação do Topsort, como cliques, impressões e compras, com uma integração low-code. Usando uma tag HTML simples, o marketplace pode se conectar ao servidor de anúncios do Topsort e enviar todos os eventos de rastreamento relacionados a um anúncio.

Instalação

Você pode instalar a biblioteca usando npm ou yarn, ou carregar o SDK diretamente no seu arquivo HTML incluindo uma tag <script>:

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js@latest/dist/ts.js"
></script>
<script>
  // Configuração global para o Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Substitua pela sua chave de API do Topsort
  };
</script>

Marcando Elementos Promovidos

Para permitir que o Topsort rastreie automaticamente cliques, impressões e compras, use o elemento HTML data-ts-* para marcar elementos promovidos na página.

Elementos orgânicos (não promovidos)

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

Elementos promovidos

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

Áreas clicáveis

Use data-ts-clickable para indicar quais áreas devem acionar um evento de clique:

<div class="product" ...>
  <div data-ts-clickable>
    <img src="https://cdn.marketplace.com/product.png" />
    <span>Título do Produto</span>
  </div>
  <span>Ajuda</span>
</div>

Para banners com atribuição de produto:

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

Rastreamento de compras

Use o 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}]'
>
  Minha compra
</div>

Exemplo Completo

<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: "<sua chave de api topsort>",
  };
  window.TS_BANNERS = {
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Carregando...";
      return el;
    },
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Erro ao carregar 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>Conteúdo clicável</span>
    </div>
    <span>Conteúdo não clicável</span>
  </div>

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

​Instalação

​Marcando Elementos Promovidos

​Elementos orgânicos (não promovidos)

​Elementos promovidos

​Áreas clicáveis

​Atribuição de banner

​Rastreamento de compras

​Exemplo Completo