Hilfsbibliothek für Drittanbieter-Verifizierung

1. Der Tag des Anbieters muss mit dem Creative mitreisen, von der Kampagneneinrichtung bis zur Auktionsantwort.
2. Der Storefront muss das Script in das gerenderte Banner einfügen, nachdem der Käufer die Einwilligung erteilt hat.

​

Bevor Sie beginnen

• Ihre Banner müssen JSON-Vorlagen verwenden, die benannte Creative-Felder definieren.
• Sie brauchen eine Consent Management Platform (CMP), um die Einwilligung des Käufers zu erfassen und zu speichern. Topsort und diese Bibliothek stellen keine CMP bereit. Sie verbinden die Bibliothek über einen Consent-Adapter mit Ihrer vorhandenen CMP.

​

Schritt 1: Banner-Vorlage konfigurieren

​

Schritt 2: Verifizierungstag bereitstellen

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

• Die URL muss HTTPS verwenden.
• Der Hostname muss staticjs.adsafeprotected.com sein.
• Der Pfad muss /fw.js sein.
• Die URL muss genau eine numerische advEntityId und eine numerische pubEntityId enthalten.
• Inline-JavaScript, zusätzliche Attribute, zusätzliche Elemente, andere Hosts, explizite Ports und URL-Fragmente werden abgelehnt.

​

Schritt 3: Tag aus der Auktionsantwort lesen

​

Schritt 4: Gerenderten Banner registrieren

• Runtime: Das Objekt, das createVerificationRuntime(...) zurückgibt. Es verbindet sich mit Ihrem Consent-Adapter und verfolgt registrierte Banner-Elemente. Erstellen Sie eine Runtime für die Seite und verwenden Sie sie für alle Banner wieder.
• Register: Der Aufruf von register(...) übergibt das Banner-Element, den Verifizierungstag und den Render-Key. Die Bibliothek prüft die Einwilligung, bevor sie das Script einfügt.
• Handle: Das Objekt, das register(...) zurückgibt. Die Methode dispose() beendet die Registrierung und entfernt den Script-Knoten, den die Bibliothek eingefügt hat.

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();

​

React verwenden

// 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>;
}

​

CMP verbinden

• current() gibt den aktuellen Einwilligungsstatus zurück.
• subscribe(listener) meldet Einwilligungsänderungen und gibt eine Funktion zurück, die das Lauschen beendet.

// 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: Wartet, ohne den Tag zu parsen, das Anbieter-Script zu laden oder das DOM zu ändern.
• granted: Validiert den Tag, erzeugt ein neues <script>-Element aus dem validierten src und hängt es in das Banner-Element ein. Gespeichertes Markup wird nicht über innerHTML eingefügt.
• denied: Beendet die Registrierung, ohne das Script zu laden.

​

Integration prüfen

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

​

Content Security Policy

​

Banners.js verwenden

1. Identifizieren Sie das Container-Element des gerenderten Banners.
2. Lesen Sie verificationTag aus dem Vorlagen-Content des gewinnenden Creatives.
3. Registrieren Sie Element, Tag und Render-Key beim Verification-Runtime, wie in Schritt 4 gezeigt.