フリッカーの管理

最終更新日： 2026年6月16日

トピック：
Data Collection

作成対象：

Developer

パーソナライゼーションコンテンツをレンダリングする場合、SDK はちらつきがないことを確認する必要があります。フリッカーは、FOOC （Flash of Original Content）とも呼ばれ、テスト/パーソナライゼーション中に代替コンテンツが表示される前に、元のコンテンツが簡単に表示される場合です。 SDK は、パーソナライゼーションコンテンツが正常にレンダリングされるまでこれらの要素が非表示になるよう、ページの要素に CSS スタイルを適用しよう試みます。

フリッカーの管理方法は、Web SDKを同期または非同期でデプロイするかどうかによって異なります。 alloy.jsまたはタグローダーをデプロイする<head> タグを確認してください。 <script> タグにasync属性が含まれていると、Web SDKが非同期で読み込まれるかどうかが決まります。

<!-- This tag loads synchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js"></script>

<!-- This tag loads asynchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js" async></script>

<!-- This library loads synchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js"></script>

<!-- This library loads asynchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>

同期デプロイメントのちらつきを管理

同期フリッカー管理は、次の3つのフェーズに分かれています。

事前非表示
前処理
レンダリング

事前非表示フェーズ中、SDKはprehidingStyle設定プロパティを使用してHTML スタイルタグを作成し、それをDOMに追加して、ページの目的のセクションが非表示になっていることを確認します。ページのどの部分がパーソナライズされるかが不明な場合は、prehidingStyle を body { opacity: 0 !important } に設定することをお勧めします。これにより、ページ全体が非表示になります。ただし、LighthouseやWeb ページテストなどのツールで報告されるページレンダリングパフォーマンスが低下するという欠点があります。最適なページレンダリングのパフォーマンスを得るには、prehidingStyleを、パーソナライズされるページの一部を含むコンテナ要素のリストに設定することをお勧めします。

以下のようなHTML ページがあり、barおよびbazz個のコンテナ要素のみがパーソナライズされることがわかっている場合：

<html>
  <head>
  </head>
  <body>
    <div id="foo">
      Foo foo foo
    </div>

    <div id="bar">
      Bar bar bar
    </div>

    <div id="bazz">
      Bazz bazz bazz
    </div>
  </body>
</html>

prehidingStyle を #bar, #bazz { opacity: 0 !important } などの値に設定します。

SDKがサーバーからパーソナライズされたコンテンツを受信すると、前処理フェーズが開始されます。このフェーズでは応答が前処理され、パーソナライズされたコンテンツを含める必要がある要素が非表示になっていることを確認します。これらの要素を非表示にすると、prehidingStyle 設定オプションに基づいて作成された HTML スタイルタグが削除され、HTML の本文または非表示のコンテナ要素が表示されます。

すべてのパーソナライゼーションコンテンツが正常にレンダリングされた後、またはエラーが発生した場合、レンダリングフェーズが開始されます。以前に非表示にしていた要素はすべて、SDKによって非表示にされていた非表示の要素がページ上にないことを確認するために表示されます。

非同期デプロイメントのフリッカーの管理

最高のページレンダリングパフォーマンスを得るためのレコメンデーションは、常に SDK を非同期で読み込むことです。ただし、これにより、パーソナライズされたコンテンツのレンダリングに何らかの影響が出ます。 SDK が非同期で読み込まれる場合は、非表示のスニペットを使用する必要があります。 HTML ページで SDK の前に、事前非表示のスニペットを追加する必要があります。本文全体を非表示にするスニペットの例を次に示します。

<script>
  !function(e,a,n,t){
    if (a) return;
    var i=e.head;if(i){
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),
    setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>

HTML の本文またはコンテナ要素が長期間非表示にならないようにするために、事前非表示スニペットでは、3000 ミリ秒後にデフォルトでスニペットを削除するタイマーを使用します。 3000 ミリ秒は最大待機時間です。サーバーからの応答が受信され、短時間で処理された場合は、可能な限り早く事前非表示 HTML スタイルタグが削除されます。

recommendation-more-help

experience-platform-help-collection