Preocultar guía de integración de SDK

Una pequeña biblioteca sincrónica de JavaScript que evita el parpadeo visual causado por la personalización de Adobe Target que reescribe una página en mitad del procesamiento. Agregue una etiqueta en línea <script> en la parte superior de <head> y la página se mostrará solo después de que el contenido personalizado esté listo o de que se active el temporizador de seguridad.

Pasos de integración integration-steps

Dónde colocar la secuencia de comandos script-placement

El SDK de ocultación previa debe aparecer antes en el documento que el SDK Adobe Target que limpia después de él. El orden de carga no es negociable:

<!doctype html>
<html>
<head>
  <!-- ① Prehide SDK FIRST. Inline. Synchronous. No async/defer. -->
  <script> /* prehide.min.js inline contents */ </script>

  <!-- ② Alloy or at.js loads next -->
  <script src="https://cdn.alloy.adobe.com/alloy.min.js"></script>

  <!-- ③ Then everything else: meta, css, third-party tags, ... -->
  <link rel="stylesheet" href="main.css">
</head>
<body> ... your page ... </body>
</html>

En línea frente a externa inline-vs-external

Existen dos maneras de incluir prehide.min.js:

Por qué se prefiere en línea

Configuración configuration

SDK acepta la configuración de dos fuentes, en orden de prioridad. Lee el que esté disponible primero.

Tiempo de ejecución window.PrehideConfig (integración manual)

Para paquetes autoalojados o sin modificar, declare un objeto de configuración antes de ejecutar el script de ocultación previa:

<script>
  window.PrehideConfig = {
    sdk: "alloy"             // optional: "alloy" (default) or "atjs"
  };
</script>

Selección de SDK sdk-selection

Adobe Target ofrece dos SDK de envío: Alloy (el SDK web moderno) y at.js (la biblioteca clásica). Cada uno busca un elemento diferente <style> id cuando la personalización finaliza y lo quita para mostrar la página. Prehide SDK debe insertar el elemento id coincidente; de lo contrario, la página permanece oculta hasta que se active el temporizador de seguridad.

Cómo se establece

<!-- For at.js -->
<script>
  window.PrehideConfig = { sdk: "atjs" };
</script>
<script> /* prehide.min.js inline */ </script>
<script src="https://cdn.adobe.com/.../at.js"></script>

Los valores desconocidos o que faltan vuelven a "alloy", por lo que las integraciones de Alloy existentes siguen funcionando sin ningún cambio de configuración.

Gestión del consentimiento consent-management

Preocultar SDK incluye una API según el consentimiento para coordinar con CMP. Su uso es opcional. Si nunca se llama a setConsent, SDK se comporta como una integración estándar sin consentimiento.

Superficie de API

// Single function call. Pass a status string.
window.Prehide.setConsent("pending");  // banner shown, awaiting decision
window.Prehide.setConsent("in");       // user accepted personalization
window.Prehide.setConsent("out");      // user declined personalization

// Read-only debug snapshot.
window.Prehide.getState();
// → { sdk, version, consentStatus, consentApiUsed,
//      rulesResolved, hasSelectorsToGuard, guardTimeout }

Qué hace cada estado

Patrón recomendado: fase pendiente explícita

Ejemplo: integración de estilo OneTrust

// Called once OneTrust has rendered its banner.
function onOneTrustReady() {
  // Pause the guard timer while the banner is visible.
  window.Prehide.setConsent("pending");

  OneTrust.OnConsentChanged(function (event) {
    if (event.consentedToTargeting) {
      window.Prehide.setConsent("in");
    } else {
      window.Prehide.setConsent("out");
    }
  });
}

Ejemplo: estilo TCF/IAB

// Optional: pause the guard while UI is up.
window.Prehide.setConsent("pending");

// Your CMP eventually emits the final TC string.
function onTcData(tcData) {
  const hasTargetConsent = /* derive from tcData */;
  window.Prehide.setConsent(hasTargetConsent ? "in" : "out");
}