SDK統合ガイドの事前非表示
Adobe Target個のパーソナライゼーションがページのミッドレンダリングを書き換えることに起因するビジュアルフリッカーを防ぐ、小さな同期JavaScript ライブラリ。 <head>の上部に1つのインライン <script> タグを追加すると、パーソナライズされたコンテンツの準備が整った後、またはセーフティタイマーが起動した後にのみ、ページが表示されます。
統合ステップ integration-steps
-
バンドルをダウンロードします。
Flicker Manager UIを使用して
prehide.min.jsをダウンロードします。 ファイルはクライアントコードとガードタイムアウトで事前設定されているため、PrehideConfigブロックは必要ありません。 -
<head>の最上部にインラインで埋め込みます。インライン
<script>タグ内にprehide.min.jsの内容を<head>の最初の子として直接貼り付けます。 インラインが推奨される理由については、 インラインと外部を参照してください。code language-html <!-- 1. Prehide SDK: must be FIRST in <head> and BEFORE any Adobe SDK --> <script> // paste the contents of prehide.min.js here </script> <!-- 2. Then load Alloy.js OR at.js --> <script src="https://your-cdn/alloy.min.js"></script> -
（オプション）ランタイム設定ブロックを追加します。
UIを介してダウンロードせずにバンドルをセルフホストする場合、またはSDKの選択肢を上書きする必要がある場合にのみ必要です。 事前非表示スクリプトの前にconfig ブロックを配置します。
code language-html <script> window.PrehideConfig = { sdk: "alloy" // or "atjs" (defaults to "alloy") }; </script> <script> /* prehide.min.js inline contents */ </script> <script src="https://your-cdn/alloy.min.js"></script> -
（オプション）同意の電信送金。
実装で同意管理プラットフォーム （CMP）を使用している場合は、同意状態がわかったら直ちに
window.Prehide.setConsent(...)に電話します。 同意管理を参照してください。 -
検証：
DevToolsを開き、最初のペイントの
<head>に<style id="alloy-prehiding">（またはat.jsのat-body-style）が表示され、SDKが終了すると削除されることを確認します。 コンソールでwindow.Prehide.getState()を実行して、ランタイム状態を調べます。
スクリプトを配置する場所 script-placement
SDKの事前非表示スクリプトタグに
asyncまたはdeferを追加しないでください。 ブラウザーがページのレイアウトを開始する前に非表示ルールを挿入するには、同期実行が必要です。「SDKを事前に非表示」は、後からクリーンアップするAdobe Target SDKよりも前に表示する必要があります。 読み込み順序は交渉不可能です：
<!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-external
prehide.min.jsを含めるには、次の2つの方法があります。
<script>/* full contents of prehide.min.js pasted directly into the page */</script><script src="/static/prehide.min.js"></script>インラインが好まれる理由
<script>...</script>内でバンドルを直接インライン化します。 小さく、インラインで、常に一番上にある、重要なCSS ブロックのように扱います。- レンダーブロッキングのフェッチがありません。 SDKの事前非表示の目的は、最初のレンダリングの 前 に非表示ルールを挿入することです。 外部
<script src>は、まさにそのクリティカルウィンドウにネットワークのラウンドトリップを追加します。 - 新しい障害モードはありません。 外部ファイルは、404、タイムアウト、または広告ブロッカーによってブロックされる可能性があります。 インラインコピーは使用できません。
- バンドルは小さい（約6 KB）。 インライン化のコストは一般的なファビコンよりも低く、キャッシュのメリットは、最初のレンダリング時に余分なラウンドトリップを上回るほど大きくありません。
- キャッシュフレンドリー： HTML レスポンスでインライン化すると、SDKは、既存のキャッシュ層（CDNまたはブラウザーのHTTP キャッシュ）によって、ドキュメントの残りの部分と共にキャッシュされます。
- 顧客固有のバンドル： ダウンロードしたファイルには、ダウンロード時にクライアントコードが組み込まれています。 インライン化により、すべての訪問者が、追加のリクエストなしで正しいカスタマイズされたバンドルを受け取ることができます。
設定 configuration
SDKは、2つのソースから優先順に設定を受け付けます。 最初に使用可能な方を読み上げます。
ランタイム window.PrehideConfig （手動統合）
セルフホストまたは未変更のバンドルの場合は、事前非表示スクリプトを実行する前にconfig オブジェクトを宣言します。
<script>
window.PrehideConfig = {
sdk: "alloy" // optional: "alloy" (default) or "atjs"
};
</script>
sdk"alloy""atjs"SDKの選定 sdk-selection
Adobe Targetでは、Alloy （最新のWeb SDK）とat.js （クラシックライブラリ）の2つの配信SDKを提供しています。 パーソナライゼーションが完了すると、それぞれdifferent <style>要素idを探し、削除してページを表示します。 Prehide SDKは、一致するidを挿入する必要があります。そうしないと、セーフティタイマーが起動するまでページは非表示のままになります。
sdk値"alloy" （デフォルト）<style id="alloy-prehiding">"atjs"<style id="at-body-style">設定方法
<!-- For at.js -->
<script>
window.PrehideConfig = { sdk: "atjs" };
</script>
<script> /* prehide.min.js inline */ </script>
<script src="https://cdn.adobe.com/.../at.js"></script>
sdk: "alloy"を設定すると（またはその逆）、SDKで削除するprehide要素が見つからなくなります。 ガードタイマーは最終的にページを表示しますが、訪問者はより長い非表示ウィンドウを体験します。 読み込むライブラリに合わせて、常にsdkを設定してください。不明または不足している値は"alloy"にフォールバックするため、既存のAlloy統合は設定を変更することなく引き続き機能します。
同意管理 consent-management
- 同意値は
windowに保存されません。 関数のみが公開されます。内部ステートはSDKに対して非公開のままです。 "out"から"in"への移行では、完全にレンダリングされたコンテンツを再非表示にすると視覚的に混乱が生じるため、ページを再表示しません。setConsentは、1つのページビュー内で複数回呼び出すことができます。 各呼び出しは、前の状態を置き換えます。
Prehide SDKには、CMPと連携するための同意に応じたAPIが含まれています。 使用はオプションです。 setConsentが呼び出されない場合、SDKは標準の非同意統合のように動作します。
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 }
各ステータスの機能
setConsent("pending")setConsent("in")setConsent("out")init()から実行されます。推奨パターン：明示的な保留段階
-
CMPが同意UIを表示したら、すぐに
setConsent("pending")に電話します。 これにより、訪問者の意思決定中はページのセーフティタイマーが解除され、バナーの背後でパーソナライズされていないコンテンツが瞬く間に表示されるのを防ぎます。code language-js window.Prehide.setConsent("pending"); -
訪問者がパーソナライゼーションを受け入れたら、
setConsent("in")に電話してください。 ガードタイマーが再起動し、Alloy/at.jsが引き継ぎ、パーソナライゼーションが適用されるとページが表示されます。code language-js window.Prehide.setConsent("in"); -
訪問者がパーソナライゼーションを辞退する場合は、
setConsent("out")に電話してください。 ページがすぐに表示され、表示されたままになります。 後で解決するCDN ルールは、再非表示にしません。code language-js window.Prehide.setConsent("out");
例：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");
}
});
}
例：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");
}