注: アクティベーション イベントを使用していて、最初の読み込みで変更を呼び出さない場合は、特にご対応いただく必要はありません。
上記の手順を行ってもページ フリッカーが確認された場合に、ページ フリッカーを軽減する効果的な手段は、オプティマイズ コンテナの読み込み中にページを一時的に非表示にすることです。これを行うには、アンチフリッカー スニペットをページの最初のスクリプトとして追加します。
概要
オプティマイズ スニペットのインストールに関する記事の手順（特にインストールに関するポイント）に沿って設置を行うと、ページを表示するために必要な他のリソースよりも先に、オプティマイズがウェブページに読み込まれます。最初にオプティマイズがページに読み込まれる場合は、フリッカーが表示されないため、アンチフリッカー スニペットをインストールする必要はありません。
ページ フリッカーが確認された場合は、まずオプティマイズ スニペットのインストールに関する記事のすべての手順（およびインストールに関するポイントのセクション）に沿って設置が行われていることを確認してから、トラブルシューティングを行ってください。
具体的には、ウェブサイトの <head> 内のできるだけ先頭に近い位置に、オプティマイズ スニペットを設置する必要があります。これにより、ほとんどのページ フリッカーは解消されます。ページ フリッカーを軽減する
上記の手順を行ってもページ フリッカーが確認された場合に、ページ フリッカーを軽減する効果的な手段は、オプティマイズ コンテナの読み込み中にページを一時的に非表示にすることです。これを行うには、アンチフリッカー スニペットをページの最初のスクリプトとして追加します。
仕組み
オプティマイズでは、ドキュメント オブジェクト モデル（DOM）を変更することで、ウェブサイトにアクセスしたユーザーにさまざなまパターンを表示します。場合によっては、変更はすでにエンドユーザーに認識されている要素に対して行われます。このような目に見える変更は、ページ フリッカーと呼ばれています。
ページ フリッカーは、外部の CSS スタイルシートが読み込まれてページの再レンダリングが行われる前に、ブラウザのデフォルト スタイルでウェブページが一瞬表示されるために、スタイル変更後の要素がページ上で瞬間的に移動することで発生します。
アンチフリッカー スニペットを導入する
アンチフリッカー スニペットを設置するには:
- 以下のコード全体をコピーして、オプティマイズですべてのページの
<HEAD>内のなるべく前方に追加します。ただし、dataLayer 宣言を使用している場合は、その後に追加します。 - グローバル サイトタグ（gtag.js）またはタグ マネージャーのコンテナがアンチフリッカー スニペットの直後に設置されるようにします。
例: アンチフリッカー スニペット
<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 に置き換えてください。
アンチフリッカー スニペットをカスタマイズする
アンチフリッカー スニペットにはタイムアウト機能が含まれており、時間がかかりすぎた場合にテスト用の変更の適用を停止するように設定できます。タイムアウト時間が経過するとページが再表示され、ユーザーには新しいページが表示されず、代わりにデフォルトのコンテンツのみが表示されます。
アンチフリッカー スニペットのカスタマイズに関する詳細をご覧ください。
タグ マネージャーをご利用の場合
注: Google タグ マネージャーを使用してオプティマイズを導入している場合、アンチフリッカー スニペットには、オプティマイズのコンテナ ID ではなくタグ マネージャーのコンテナ ID を入力してください。
タグ マネージャーのコンテナにオプティマイズ タグを追加すると、オプティマイズが読み込まれるまでページ フリッカーを防ぐことができますが、後からタグを無効にした場合にページに対する効果が失われます。
Google タグ マネージャーを使用してオプティマイズをインストールする方法についての詳細をご覧ください。
名前の確認
ページ フリッカーは JavaScript フリッカー、DOM フリッカー、FOUC（Flash Of Unstyled Content）、FOUT（Flash of Unstyled Text）とも呼ばれます。アンチフリッカー スニペットは、以前はページ非表示スニペットいう名称でした。
関連資料
- オプティマイズのアンチフリッカー スニペットをカスタマイズする - Google Developers
- オプティマイズをインストールする
- オプティマイズと Google タグ マネージャー