Passer au contenu principal
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>

Besoin d'aide avec votre intégration Topsort ?

Parlez-nous, l'équipe d'ingénierie des intégrations.Contactez-nous via votre canal de messagerie dédié ou à support@topsort.com.Si vous n'êtes pas encore client, planifiez une démo avec notre équipe de vente.