Analytics.js - Topsort Documentation

La bibliothèque publique analytics.js de Topsort permet aux marketplaces d’envoyer facilement des événements d’interaction Topsort, tels que les clics, les impressions et les achats, avec une intégration low-code. En utilisant une simple balise HTML, la marketplace peut se connecter au serveur publicitaire de Topsort et envoyer tous les événements de suivi liés à une publicité.

Installation

Vous pouvez installer la bibliothèque en utilisant npm ou yarn, ou charger le SDK directement dans votre fichier HTML en incluant une balise <script> :

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js@latest/dist/ts.js"
></script>
<script>
  // Configuration globale pour Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Remplacez par votre clé API Topsort
  };
</script>

Marquage des éléments promus

Pour permettre à Topsort de suivre automatiquement les clics, les impressions et les achats, utilisez l’élément HTML data-ts-* pour marquer les éléments promus dans la page.

Éléments organiques (non promus)

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

Éléments promus

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

Zones cliquables

Utilisez data-ts-clickable pour indiquer quelles zones doivent déclencher un événement de clic :

<div class="product" ...>
  <div data-ts-clickable>
    <img src="https://cdn.marketplace.com/product.png" />
    <span>Titre du produit</span>
  </div>
  <span>Aide</span>
</div>

Attribution de bannière

Pour les bannières publicitaires avec attribution de produit :

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

Suivi des achats

Utilisez le tableau JSON data-ts-items pour suivre les achats :

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

Exemple complet

<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: "<votre clé api topsort>",
  };
  window.TS_BANNERS = {
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Chargement...";
      return el;
    },
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Erreur de chargement de la bannière";
      return el;
    },
  };
</script>

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

  <div class="product" data-ts-resolved-bid="...">
    <div data-ts-clickable>
      <span>Contenu cliquable</span>
    </div>
    <span>Contenu non cliquable</span>
  </div>

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

​Installation

​Marquage des éléments promus

​Éléments organiques (non promus)

​Éléments promus

​Zones cliquables

​Attribution de bannière

​Suivi des achats

​Exemple complet