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

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

注: アクティベーション イベントを使用していて、最初の読み込みで変更を呼び出さない場合は、特にご対応いただく必要はありません。

概要

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

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

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

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

最大限の掲載結果を得るには、テストを行うすべてのページの <head> の先頭にオプティマイズ タグを配置します。

グローバル サイトタグの上には次の項目のみを配置します。

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

<head> でオプティマイズ スニペットの場所を確認した後もちらつきが気になる場合は、以下の手順に沿ってアンチフリッカー スニペットをインストールしてください。

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

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

仕組み

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

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

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

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

  1. 以下のコード全体をコピーして、オプティマイズですべてのページの <HEAD> 内のなるべく前方に追加します。ただし、dataLayer 宣言を使用している場合は、その後に追加します。
  2. グローバル サイトタグ（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,
{'OPT_CONTAINER_ID':true});</script>

注: OPT_CONTAINER_ID は、オプティマイズ コンテナ ID に置き換えてください。タグ マネージャーをご利用の場合は、次のセクションを参照してください。

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

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

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

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

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

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

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

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

名前の確認

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

関連資料

この記事は役に立ちましたか？
改善できる点がありましたらお聞かせください。