Passer au contenu principal

Documentation Index

Fetch the complete documentation index at: https://docs.topsort.com/llms.txt

Use this file to discover all available pages before exploring further.

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>