アンチフリッカースニペットを設置する

ページフリッカーが発生した場合は、このスニペットを追加すると解消される場合があります。

はじめに

スニペットのインストールに関する記事およびスニペットの配置に関するおすすめの方法（下記）の手順に沿って設置を行うと、ページを表示するために必要な他のリソースよりも先に、オプティマイズがウェブページに読み込まれます。最初にオプティマイズがページに読み込まれる場合は、フリッカーが表示されないため、アンチフリッカースニペットをインストールする必要はありません。

ページフリッカーは、外部の CSS スタイルシートが読み込まれてページの再レンダリングが行われる前に、ブラウザのデフォルトスタイルでウェブページが一瞬表示されるために、スタイル変更後の要素がページ上で瞬間的に移動することで発生します。

ページフリッカーを軽減する効果的な手段は、オプティマイズコンテナの読み込み中にページを一時的に非表示にすることです。これを行うには、アンチフリッカースニペットをページの最初のスクリプトとして追加します。

ページフリッカーが確認された場合は、スニペットのインストールに関する記事のすべての手順（およびおすすめの方法）に沿って設置が行われていることを確認してから、トラブルシューティングを行ってください。

具体的には、ウェブサイト HTML の <HEAD> 内のできるだけ先頭に近い位置に、オプティマイズスニペットを設置する必要があります。スニペットを、<HEAD> の先頭に配置することにより、ほとんどのページフリッカーは解消されます。

対象

この記事は、オプティマイズのエクスペリエンスページでページフリッカーが確認されたお客様を対象としています。

次の場合は、アンチフリッカースニペットを設置しないでください。

オプティマイズのスニペットが <HEAD> の先頭にない場合。
ページフリッカーが発生していない場合。
最初の読み込みで変更を呼び出さないアクティベーションイベントを使用している場合。
Google タグマネージャー（GTM）などのタグ管理システム（TMS）を使用している場合。

TMS と AFS の併用について

アンチフリッカースニペットの設置に、Google タグマネージャー（GTM）などのタグ管理システム（TMS）を使用しないでください。

アンチフリッカースニペットの設置は、ウェブページ上に直接インラインのみで行い、タグ管理システム（TMS）やその他の非同期型スクリプトと一緒に設置しないでください。アンチフリッカースニペットをインラインで設置できない場合は、設置自体を中止してください。

ページフリッカーを軽減する

上記の手順を行ってもページフリッカーが確認された場合に、ページフリッカーを軽減する効果的な手段は、オプティマイズコンテナの読み込み中にページを一時的に非表示にすることです。これを行うには、アンチフリッカースニペットをページの最初のスクリプトとして追加します。

仕組み

オプティマイズでは、ドキュメントオブジェクトモデル（DOM）を変更することで、ウェブサイトにアクセスしたユーザーにさまざなまパターンを表示します。場合によっては、変更はすでにエンドユーザーに認識されている要素に対して行われます。このような目に見える変更は、ページフリッカーと呼ばれています。

アンチフリッカースニペットを導入する

アンチフリッカースニペットを設置するには:

以下のコード全体をコピーして、オプティマイズですべてのページの <HEAD> 内のなるべく前方に追加します。ただし、dataLayer 宣言を使用している場合は、その後に追加します。
オプティマイズのスニペットまたはタグマネージャーのコンテナがアンチフリッカースニペットの直後に設置されるようにします。

例: アンチフリッカースニペット

<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>

注: CONTAINER_ID をオプティマイズのコンテナ ID に置き換えてください。Google タグマネージャーを使用してオプティマイズを導入している場合は、CONTAINER_ID をタグマネージャーのコンテナ ID に置き換えてください。

アンチフリッカースニペットの上部にある dataLayer を初期化しないと、サイトのパフォーマンスに悪影響を及ぼす恐れがあります。ページの後半のデータレイヤーをオーバーライドしないでください。

スニペットの配置に関するおすすめの方法

最適な掲載結果を得るには、最適化したいすべてのページの <HEAD> タグの先頭にオプティマイズスニペットを配置します。

オプティマイズスニペットの上には、以下の項目のみを配置してください。

dataLayer 初期化コード。注: dataLayer 変数は、アンチフリッカースニペット（使用する場合）の後に再割り当てしないでください。
オプティマイズに使用する、JavaScript 変数、関数、または設定された Cookie を宣言するスクリプト。たとえば、実装またはターゲティングに使用する jQuery や JavaScript ライブラリなどです。注: jQuery は、デフォルトではオプティマイズにインストールされません。
ページフリッカーの軽減に使用できるオプションのアンチフリッカースニペット。

コンテンツセキュリティポリシーを使用している場合は、オプティマイズのセキュリティ要件を参照し、サイトのスニペットのドメイン（google-analytics.com や googleoptimize.com など）がコンテンツセキュリティポリシーで許可されていることを確認してください。

アンチフリッカースニペットをカスタマイズする

アンチフリッカースニペットにはタイムアウト機能が含まれており、時間がかかりすぎた場合にテスト用の変更の適用を停止するように設定できます。タイムアウト時間が経過するとページが再表示され、ユーザーには新しいページが表示されず、代わりにデフォルトのコンテンツのみが表示されます。

アンチフリッカースニペットのカスタマイズに関する詳細をご覧ください。

タグマネージャーをご利用の場合

注: Google タグマネージャーを使用してオプティマイズを導入している場合、アンチフリッカースニペットには、オプティマイズのコンテナ ID ではなくタグマネージャーのコンテナ ID を入力してください。

タグマネージャーのコンテナにオプティマイズタグを追加すると、オプティマイズが読み込まれるまでページフリッカーを防ぐことができますが、後からタグを無効にした場合にページに対する効果が失われます。

Google タグマネージャーを使用してオプティマイズをインストールする方法についての詳細をご覧ください。

名前の確認

ページフリッカーは JavaScript フリッカー、DOM フリッカー、FOUC（Flash Of Unstyled Content）、FOUT（Flash of Unstyled Text）とも呼ばれます。ページ非表示スニペットは、以前はアンチフリッカースニペットという名称でした。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

アンチフリッカー スニペットを設置する

はじめに

対象

TMS と AFS の併用について

ページ フリッカーを軽減する

仕組み

アンチフリッカー スニペットを導入する

例: アンチフリッカー スニペット