Handbuch zur SDK-Integration vorab ausblenden

Eine winzige synchrone JavaScript-Bibliothek, die das visuelle Flackern verhindert, das durch Adobe Target Personalisierung verursacht wird, die eine Seite in der Mitte des Renderings neu schreibt. Fügen Sie oben in <head> ein Inline-<script>-Tag hinzu, und die Seite wird erst angezeigt, wenn personalisierte Inhalte bereit sind oder der Sicherheits-Timer ausgelöst wird.

Integrationsschritte integration-steps

Platzieren des Skripts script-placement

Die SDK zum Vorab-Ausblenden muss früher im Dokument angezeigt werden als die Adobe Target SDK, die danach bereinigt wird. Die Ladereihenfolge ist nicht verhandelbar:

<!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 vs. extern inline-vs-external

Es gibt zwei Möglichkeiten, prehide.min.js einzubeziehen:

Warum Inline bevorzugt wird

Konfiguration configuration

SDK akzeptiert Konfigurationen aus zwei Quellen in der Reihenfolge der Priorität. Es liest, was zuerst verfügbar ist.

Runtime window.PrehideConfig (manuelle Integration)

Deklarieren Sie für selbstgehostete oder unveränderte Bundles ein config-Objekt, bevor das Prehide-Skript ausgeführt wird:

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

SDK-Auswahl sdk-selection

Adobe Target bietet zwei Bereitstellungs-SDKs: Alloy (die moderne Web-SDK) und at.js (die klassische Bibliothek). Jeder sucht nach einem anderen <style> Element, das nach Abschluss der Personalisierung id wird, und entfernt es, um die Seite anzuzeigen. Die Prehide-SDK muss den entsprechenden id injizieren. Andernfalls bleibt die Seite ausgeblendet, bis der Sicherheits-Timer ausgelöst wird.

So legen Sie es fest

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

Unbekannte oder fehlende Werte werden auf "alloy" zurückgesetzt, sodass vorhandene Alloy-Integrationen ohne Konfigurationsänderungen weiterhin funktionieren.

Einverständnisverwaltung consent-management

Die Prehide-SDK enthält eine API zur Einverständniserkennung , die mit Ihrer CMP koordiniert wird. Die Verwendung ist optional. Wenn setConsent nie aufgerufen wird, verhält sich die SDK wie eine standardmäßige Nicht-Einverständnis-Integration.

API-Oberfläche

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

Funktionsweise der einzelnen Status

Empfohlenes Muster: explizite ausstehende Phase

Beispiel: Integration im OneTrust-Stil

// 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");
    }
  });
}

Beispiel: TCF / IAB-Style

// 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");
}