Biblioteca auxiliar de verificación de terceros

1. La etiqueta del proveedor debe viajar con el creativo, desde la configuración de la campaña hasta la respuesta de la subasta.
2. El storefront debe insertar el script en el banner renderizado después de que el comprador haya otorgado el consentimiento.

​

Antes de empezar

• Sus banners deben usar plantillas JSON, que definen campos creativos con nombre.
• Necesita una Consent Management Platform (CMP) para recopilar y registrar el consentimiento del comprador. Topsort y esta biblioteca no proporcionan una CMP. Conecta la biblioteca a su CMP existente mediante un adaptador de consentimiento.

​

Paso 1: Configurar la plantilla de banner

​

Paso 2: Proporcionar la etiqueta de verificación

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

• La URL debe usar HTTPS.
• El hostname debe ser staticjs.adsafeprotected.com.
• La ruta debe ser /fw.js.
• La URL debe contener exactamente un advEntityId numérico y un pubEntityId numérico.
• Se rechazan JavaScript en línea, atributos extra, elementos extra, otros hosts, puertos explícitos y fragmentos de URL.

​

Paso 3: Leer la etiqueta de la respuesta de la subasta

​

Paso 4: Registrar el banner renderizado

• Runtime: El objeto que devuelve createVerificationRuntime(...). Se conecta a su adaptador de consentimiento y rastrea los elementos de banner registrados. Cree un runtime para la página y reutilícelo entre banners.
• Register: Llamar a register(...) proporciona el elemento del banner, la etiqueta de verificación y la clave de render. La biblioteca comprueba el consentimiento antes de insertar el script.
• Handle: El objeto que devuelve register(...). Su método dispose() termina el registro y elimina el nodo de script que insertó la biblioteca.

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

​

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

​

Conecta tu CMP

• current() devuelve el estado actual de consentimiento.
• subscribe(listener) informa los cambios de consentimiento y devuelve una función que deja de escuchar.

// 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: Espera sin parsear la etiqueta, obtener el script del proveedor ni modificar el DOM.
• granted: Valida la etiqueta, crea un elemento <script> nuevo a partir del src validado y lo añade dentro del elemento del banner. No inserta markup almacenado mediante innerHTML.
• denied: Termina el registro sin cargar el script.

​

Comprueba la integración

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

​

Content Security Policy

​

Uso de Banners.js

1. Identifique el elemento contenedor del banner renderizado.
2. Lea verificationTag del content de plantilla del creativo ganador.
3. Registre el elemento, la etiqueta y la clave de render con el runtime de verificación, como se muestra en el Paso 4.