Prévisualisation du guide d’intégration de SDK

Une minuscule bibliothèque JavaScript synchrone qui empêche le scintillement visuel provoqué par Adobe Target personnalisation réécrivant une page en cours de rendu. Ajoutez une balise de <script> intégrée en haut de l’<head> pour que la page s’affiche uniquement lorsque le contenu personnalisé est prêt ou que le minuteur de sécurité se déclenche.

Étapes d’intégration integration-steps

Où placer le script script-placement

Le SDK de prémasquage doit apparaître plus tôt dans le document que le SDK de Adobe Target qui le supprime. L’ordre de chargement est non négociable :

<!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 ou externe inline-vs-external

Il existe deux manières d’inclure prehide.min.js :

Pourquoi privilégier la mise en ligne

Configuration configuration

Le SDK accepte la configuration de deux sources, par ordre de priorité. Il lit ce qui est disponible en premier.

window.PrehideConfig d’exécution (intégration manuelle)

Pour les lots auto-hébergés ou non modifiés, déclarez un objet config avant l’exécution du script de prévisualisation :

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

SDK selection sdk-selection

Adobe Target propose deux SDK de diffusion : Alloy (le SDK Web moderne) et at.js (la bibliothèque classique). Chaque recherche un élément de <style> différent id une fois la personnalisation terminée et le supprime pour afficher la page. Le SDK Prehide doit injecter la id correspondante ; sinon la page reste masquée jusqu’au déclenchement du minuteur de sécurité.

Comment le définir

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

Les valeurs inconnues ou manquantes reviennent à "alloy", de sorte que les intégrations Alloy existantes continuent à fonctionner sans modification de configuration.

Gestion du consentement consent-management

Le SDK Prehide comprend une API basée sur le consentement pour se coordonner avec votre CMP. Son utilisation est facultative. Si setConsent n’est jamais appelé, le SDK se comporte comme une intégration standard sans consentement.

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

Fonction de chaque statut

Modèle recommandé : phase en attente explicite

Exemple : intégration de style 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");
    }
  });
}

Exemple : TCF / style 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");
}