Guida all’integrazione di Prehide SDK

Una piccola libreria sincrona JavaScript che impedisce lo sfarfallio visivo causato dalla personalizzazione Adobe Target che riscrive un rendering intermedio della pagina. Aggiungi un tag <script> in linea nella parte superiore di <head> e la pagina viene visualizzata solo dopo che il contenuto personalizzato è pronto o il timer di sicurezza si attiva.

Passaggi dell’integrazione integration-steps

Dove posizionare lo script script-placement

Il SDK di previsualizzazione deve essere visualizzato prima nel documento rispetto al SDK Adobe Target che si ripulisce dopo. L’ordine di caricamento non è negoziabile:

<!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>

Inline ed esterno inline-vs-external

Esistono due modi per includere prehide.min.js:

Perché è preferibile utilizzare la modalità in linea

Configurazione configuration

SDK accetta la configurazione da due origini, in ordine di priorità. Viene letto quello disponibile per primo.

Runtime window.PrehideConfig (integrazione manuale)

Per i bundle self-hosted o non modificati, dichiarate un oggetto config prima dell’esecuzione dello script prehide:

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

Selezione SDK sdk-selection

Adobe Target offre due SDK di consegna: Alloy (il moderno Web SDK) e at.js (la libreria classica). Ogni cerca un diverso <style> elemento id al termine della personalizzazione e lo rimuove per visualizzare la pagina. Prehide SDK deve inserire id corrispondente. In caso contrario, la pagina rimane nascosta fino all’attivazione del timer di sicurezza.

Come impostarlo

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

I valori sconosciuti o mancanti tornano a "alloy", pertanto le integrazioni di Alloy esistenti continuano a funzionare senza alcuna modifica alla configurazione.

Gestione del consenso consent-management

Prehide SDK include un’API in grado di riconoscere il consenso per il coordinamento con la tua CMP. L’utilizzo di è facoltativo. Se setConsent non viene mai chiamato, SDK si comporta come un’integrazione standard senza consenso.

Superficie 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 }

Funzionamento di ogni stato

Schema consigliato: fase in sospeso esplicita

Esempio: integrazione in stile 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");
    }
  });
}

Esempio: TCF / stile 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");
}