ページ非表示スニペットを設定する

ページを非表示にするスニペットを使用して、ユーザーに快適なエクスペリエンスを提供します。

ページを非表示にするスニペットは、実際に設定しなくても問題ありませんが、通常の標準的な実装では設定することをおすすめします。

この記事の内容:

その他の対応方法

  • サイトの入念なテストを実施する際はフリッカーが生じてもかまいませんが、ユーザーに両方のパターンが表示された場合は、テスト結果に影響する可能性があります。
  • アクティベーション イベントを使用していて、最初の読み込みで変更を呼び出さない場合は、特にご対応いただく必要はありません。

仕組み

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

ページ フリッカーのリスクを軽減する効果的な方法は、オプティマイズのコンテナの読み込み中に一時的にページを非表示にすることです。これは、ページを非表示にするスニペットをページの最初のスニペットとして、<meta charset> 宣言の後、オプティマイズ、アナリティクス、タグマネージャのタグの前に追加することで行えます。

また、ページを非表示にするスニペットにはタイムアウト機能が含まれていて、時間がかかりすぎる場合にテストの変更を適用を停止するように設定できます。タイムアウト時間が経過すると、ページは再表示され、ユーザーはテストに追加されず、デフォルトのコンテンツが表示されます。ページを非表示にするスニペットのカスタマイズに関する詳細をご覧ください。

ページ非表示スニペットを設定する

ページを非表示にするスニペットをインストールする方法は次のとおりです。

  1. 以下のコード全体をコピーして、オプティマイズですべてのページの <HEAD> 内のなるべく前方に追加します。ただし、dataLayer 宣言を使用している場合は、その後に追加します。
  2. ページを非表示にするスニペットの直後に、変更済みの Google アナリティクス トラッキング コードが設定されていることを確認します。

オプティマイズのページを非表示にするスニペットは次のようになります。

<HTML>
<HEAD>
<!-- Page hiding 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,
{'GTM-XXXXXX':true});</script>

Note: Replace GTM-XXXXXX with your Optimize container ID, Tag Manager users, see the next section.

Tag Manager users

If you’re using Google Tag Manager to deploy Optimize, populate the page-hiding snippet with your Tag Manager container ID, not your Optimize container ID. Learn more about using Optimize with a tag-management system

Customization options

Advanced users can customize the page-hiding snippet for various purposes. Learn more about how to use and customize the Optimize page-hiding snippet on Google Developers.

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