Bibliothèque d'aide à la vérification tierce

1. Le tag du fournisseur doit voyager avec le créatif, de la configuration de campagne jusqu’à la réponse d’enchère.
2. Le storefront doit insérer le script dans la bannière rendue après que l’acheteur a donné son consentement.

​

Avant de commencer

• Vos bannières doivent utiliser des modèles JSON, qui définissent des champs créatifs nommés.
• Vous avez besoin d’une Consent Management Platform (CMP) pour collecter et enregistrer le consentement de l’acheteur. Topsort et cette bibliothèque ne fournissent pas de CMP. Vous connectez la bibliothèque à votre CMP existante via un adaptateur de consentement.

​

Étape 1 : Configurer le modèle de bannière

​

Étape 2 : Fournir le tag de vérification

<script
  type="application/javascript"
  src="https://staticjs.adsafeprotected.com/fw.js?advEntityId=3072912&pubEntityId=96261444"
></script>

• L’URL doit utiliser HTTPS.
• Le hostname doit être staticjs.adsafeprotected.com.
• Le chemin doit être /fw.js.
• L’URL doit contenir exactement un advEntityId numérique et un pubEntityId numérique.
• Le JavaScript inline, les attributs supplémentaires, les éléments supplémentaires, les autres hôtes, les ports explicites et les fragments d’URL sont rejetés.

​

Étape 3 : Lire le tag dans la réponse d’enchère

​

Étape 4 : Enregistrer la bannière rendue

• Runtime : L’objet renvoyé par createVerificationRuntime(...). Il se connecte à votre adaptateur de consentement et suit les éléments de bannière enregistrés. Créez un runtime pour la page et réutilisez-le pour toutes les bannières.
• Register : L’appel à register(...) fournit l’élément de bannière, le tag de vérification et la clé de rendu. La bibliothèque vérifie le consentement avant d’insérer le script.
• Handle : L’objet renvoyé par register(...). Sa méthode dispose() termine l’enregistrement et supprime le nœud script inséré par la bibliothèque.

import { createVerificationRuntime } from "@topsort/verification";
import { consentSource } from "./consent";

const verification = createVerificationRuntime({ consentSource });

const handle = verification.register({
  element: bannerRoot, // The DOM element containing the rendered banner.
  verificationTag: banner.content.verificationTag,
  renderKey: banner.resolvedBidId,
});

// When the banner is removed or rotated out:
handle.dispose();

​

Utilisation de React

// verification.ts
import { createVerificationRuntime } from "@topsort/verification";
import { consentSource } from "./consent";

export const verification = createVerificationRuntime({ consentSource });

// Banner.tsx
import { useVerificationRef } from "@topsort/verification/react";
import { verification } from "./verification";

function Banner({ banner }) {
  const ref = useVerificationRef(verification, {
    verificationTag: banner.content.verificationTag,
    renderKey: banner.resolvedBidId,
  });

  return <div ref={ref}>{/* Your existing banner markup. */}</div>;
}

​

Connectez votre CMP

• current() renvoie l’état de consentement actuel.
• subscribe(listener) signale les changements de consentement et renvoie une fonction qui arrête l’écoute.

// consent.js
export const consentSource = {
  current() {
    return readMyCmp(); // "unknown" | "granted" | "denied"
  },

  subscribe(listener) {
    const onChange = () => listener(readMyCmp());
    myCmp.on("change", onChange);

    return () => myCmp.off("change", onChange);
  },
};

• unknown : Attend sans parser le tag, récupérer le script du fournisseur ni modifier le DOM.
• granted : Valide le tag, crée un nouvel élément <script> à partir du src validé et l’ajoute dans l’élément de bannière. Elle n’insère pas de markup stocké via innerHTML.
• denied : Termine l’enregistrement sans charger le script.

​

Vérifier l’intégration

• registered
• active
• consent_denied
• invalid_tag
• provider_load_failed
• provider_load_timeout

​

Content Security Policy

​

Utilisation de Banners.js

1. Identifiez l’élément conteneur de la bannière rendue.
2. Lisez verificationTag dans le content de modèle du créatif gagnant.
3. Enregistrez l’élément, le tag et la clé de rendu auprès du runtime de vérification, comme indiqué à l’étape 4.