Biblioteca auxiliar de verificação de terceiros

1. A tag do provedor deve viajar com o criativo, da configuração da campanha até a resposta do leilão.
2. O storefront deve inserir o script no banner renderizado depois que o comprador tiver concedido o consentimento.

​

Antes de começar

• Seus banners devem usar modelos JSON, que definem campos criativos nomeados.
• Você precisa de uma Consent Management Platform (CMP) para coletar e registrar o consentimento do comprador. O Topsort e esta biblioteca não fornecem uma CMP. Você conecta a biblioteca à sua CMP existente por meio de um adaptador de consentimento.

​

Passo 1: Configure o modelo de banner

​

Passo 2: Forneça a tag de verificação

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

• A URL deve usar HTTPS.
• O hostname deve ser staticjs.adsafeprotected.com.
• O path deve ser /fw.js.
• A URL deve conter exatamente um advEntityId numérico e um pubEntityId numérico.
• JavaScript inline, atributos extras, elementos extras, outros hosts, portas explícitas e fragmentos de URL são rejeitados.

​

Passo 3: Leia a tag da resposta do leilão

​

Passo 4: Registre o banner renderizado

• Runtime: O objeto retornado por createVerificationRuntime(...). Ele se conecta ao seu adaptador de consentimento e rastreia os elementos de banner registrados. Crie um runtime para a página e reutilize-o entre banners.
• Register: Chamar register(...) fornece o elemento do banner, a tag de verificação e a chave de render. A biblioteca verifica o consentimento antes de inserir o script.
• Handle: O objeto retornado por register(...). O método dispose() encerra o registro e remove o nó de script que a biblioteca inseriu.

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

​

Conecte seu CMP

• current() retorna o estado atual de consentimento.
• subscribe(listener) informa alterações de consentimento e retorna uma função que interrompe a escuta.

// 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: Aguarda sem parsear a tag, buscar o script do provedor ou modificar o DOM.
• granted: Valida a tag, cria um elemento <script> novo a partir do src validado e o anexa dentro do elemento do banner. Não insere markup armazenado via innerHTML.
• denied: Encerra o registro sem carregar o script.

​

Verifique a integração

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

​

Content Security Policy

​

Uso do Banners.js

1. Identifique o elemento contêiner do banner renderizado.
2. Leia verificationTag do content de modelo do criativo vencedor.
3. Registre o elemento, a tag e a chave de render com o runtime de verificação, como mostrado no Passo 4.