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

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

はじめに

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

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

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

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

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

対象

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

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

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

TMS と AFS の併用について

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

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

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

仕組み

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

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

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

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

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

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

<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> タグの先頭にオプティマイズ スニペットを配置します。

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

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

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

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

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

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

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

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

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

名前の確認

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

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。
検索
検索をクリア
検索を終了
Google アプリ
メインメニュー
ヘルプセンターを検索
true
101337
false