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.

Vous pouvez utiliser Google Tag Manager pour injecter notre script de bannières publicitaires dans votre plateforme. Consultez la documentation Banner JS pour plus de détails.

​
Prérequis

1

Accès à Google Tag Manager

Vous devez avoir un compte Google Tag Manager et accès au conteneur GTM pour le site web où vous souhaitez ajouter le HTML.
2

Google Tag Manager installé sur votre site web

Copiez le code ci-dessous et collez-le sur chaque page de votre site web.Collez ce code aussi haut que possible dans le <head> de la page (en définissant votre clé GTM) :
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
Collez ce code immédiatement après la balise d’ouverture <body> (en définissant votre clé GTM) :
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
3

Créez un div avec la dimension souhaitée sur votre site

Vous devez avoir une balise <topsort-banner> dans le HTML avec la hauteur et la largeur du slot que vous souhaitez afficher.
<body>
  <topsort-banner
    width="600"
    height="400"
    id="<votre slot id>"
    category-id="<category id>"
  ></topsort-banner>
</body>

​
Sur Google Tag Manager

1

Connectez-vous à GTM

Ouvrez votre tableau de bord Google Tag Manager.
2

Sélectionnez un espace de travail

Cliquez sur ‘Espace de travail actuel’ dans la barre latérale, puis sélectionnez-en un autre si nécessaire.
3

Créez une nouvelle balise

Cliquez sur ‘Balises’ dans la barre latérale, puis sur ‘Nouveau’.
4

Choisissez le type de balise

Sélectionnez ‘Balise HTML personnalisée’ dans la liste des types de balises.
5

Ajoutez votre HTML

Entrez votre code HTML personnalisé dans la zone de texte HTML. Le code doit inclure votre clé API Marketplace Topsort. Pour obtenir un nouveau token, allez sur app.topsort.com → Paramètres → Intégration API.
<script>
  // Définir la clé API pour les enchères et les événements
  window.TS = {
    token: "votre token topsort",
  };
  // Un comportement personnalisé peut être configuré pour chaque site.
  window.TS_BANNERS = {
    // gérer le lien de destination
    getLink: function(banner) {
      switch (banner.type) {
        case "url":
          return banner.id;
        default:
          return `https://example.com/${banner.id}`;
      }
    },
  };
</script>
<script>
(function() {
    var bannersScript = document.createElement('script');
    bannersScript.src = 'https://unpkg.com/@topsort/banners@0.2.0/dist/banners.mjs';
    bannersScript.type = 'module';
    bannersScript.async = true;

    bannersScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-banners-loaded'
      });
    });

    var analyticsScript = document.createElement('script');
    analyticsScript.src = 'https://unpkg.com/@topsort/analytics.js';
    analyticsScript.type = 'module';
    analyticsScript.async = true;

    analyticsScript.addEventListener('load', function() {
      window.dataLayer.push({
        event: 'topsort-analytics-loaded'
      });
    });

    document.head.appendChild(bannersScript);
    document.head.appendChild(analyticsScript);
  })()
</script>
6

Définir le déclencheur

Choisissez un déclencheur pour déterminer quand le HTML doit être exécuté (par ex., Vue de page, Clic, etc.).
7

Enregistrer et prévisualiser

Enregistrez votre balise et utilisez le mode ‘Aperçu’ pour tester la fonctionnalité de votre HTML sur votre site.
8

Vérifier

Vérifiez que le site affiche les bannières, que les événements sont correctement signalés et que l’opaqueUserId change lors de l’utilisation de différents navigateurs.
9

Publier

Une fois vérifié, publiez les modifications pour rendre le HTML actif sur votre site web.