analytics.js でオプティマイズをインストールする

analytics.js ユーザーがオプティマイズの追加を希望する場合。
この記事では、新規のインストールではサポートされていない従来型のスニペットに関する情報について説明します。
ウェブサイトにオプティマイズをインストールする手順については、オプティマイズのインストールの概要をご覧ください。

オプティマイズは、既存の analytics.js タグに追加して、ウェブサイトを訪れたユーザーにエクスペリエンスを表示するコード行です。この記事では、ウェブサイトの既存の analytics.js スニペットにオプティマイズを追加する手順について説明します。

その他のインストール方法

注: Google アナリティクスがウェブサイトにインストールされていない場合は、こちらから開始します。

  • オプティマイズ スニペット(optimize.js)を使用している場合は、こちらから開始します。
  • Google タグ マネージャー(GTM)を使用している場合は、こちらから開始します。
  • グローバル サイトタグ(gtag.js)を使用している場合は、こちらから開始します。
  • analytics.js(旧「ユニバーサル アナリティクス」または「UA」)を使用している場合は、下記をご確認ください。

前提条件

手順を進めるには、オプティマイズ アカウントと、Google アナリティクス プロパティにリンクされているコンテナが必要です。その方法については、オプティマイズを設定する手順をご覧ください。オプティマイズ スニペットでウェブサイトの HTML にタグを設定するには、その HTML への編集権限も必要です。

手順 1: analytics.js タグを取得する

analytics.js タグは、ウェブサイトをホストするコンテンツ管理システム(CMS)で見つけることができますが、ブラウザのソース表示コマンドを使用して見つけることもできます。

analytics.js タグは次のようになります。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

注: GA_MEASUREMENT_ID を Google アナリティクスのプロパティ ID(または「測定 ID」)に置き換えてください。

アナリティクスの管理インターフェースは、グローバル サイトタグ(gtag.js)形式のコードのみを提供しており、analytics.js はサポートしていません。

手順 2: オプティマイズ コンテナ ID を取得する

オプティマイズ コンテナ ID は、「OPT-」または「GTM-」で始まる 9 桁の固有の英数字です。コンテナ ID は、[オプティマイズをインストール] をクリックすると表示されるオプティマイズ スニペットの一部です。[コンテナの設定] > [コンテナ情報] でもオプティマイズ コンテナ ID を取得できます。オプティマイズ コンテナの詳細

オプティマイズ コンテナ ID は、次のいずれかのようになります。

OPT-A1B2CD
GTM-A1B2CD

注: ドキュメントでは、コンテナ ID は OPT_CONTAINER_ID の形式で例示されます。

手順 3: オプティマイズ スニペットを作成する

次のコード行の OPT_CONTAINER_ID をオプティマイズ コンテナ ID に置き換えて、オプティマイズ スニペットを作成します。

ga('require', 'OPT_CONTAINER_ID');

手順 4: オプティマイズを analytics.js タグに追加する

手順 3 で作成したオプティマイズ スニペットを、ga('create', で始まる行の直前に挿入することで analytics.js タグに追加します。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('require', 'OPT_CONTAINER_ID');
ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

注: OPT_CONTAINER_ID をオプティマイズ コンテナ ID に置き換え、GA_MEASUREMENT_ID を Google アナリティクスのプロパティ ID(または「測定 ID」)に置き換えてください。

高度な設定

デフォルトでは、Google タグ マネージャーで開始され参照されるデータレイヤーは dataLayer と呼ばれます。データレイヤーに別の名前を使用する場合は、次のいずれかの方法でオプティマイズで使用できます。

1. Google アナリティクス経由でオプティマイズを読み込む場合、構文は次のようになります。

ga('require', 'OPT_CONTAINER_ID', {dataLayer: 'CUSTOM_DATALAYER_NAME'});

注: OPT_CONTAINER_ID をオプティマイズのコンテナ ID に置き換え、CUSTOM_DATALAYER_NAME をカスタムの dataLayer 名に置き換えてください。

2. gtag.js 経由でオプティマイズを読み込む場合は、dataLayer クエリ パラメータを gtag リクエストに追加します。

https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID&l=CUSTOM_DATALAYER_NAME

注: GA_MEASUREMENT_ID を Google アナリティクスのプロパティ ID(または「測定 ID」)に置き換え、CUSTOM_DATALAYER_NAME をカスタムの dataLayer 名に置き換えてください。

アンチフリッカー スニペット(dataLayer のカスタム名を使用)

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

ページ フリッカーが確認された場合は、まずオプティマイズ スニペットのインストールに関する記事の手順(およびおすすめの方法のセクション)に沿って設置が行われていることを確認してから、トラブルシューティングを行ってください。具体的には、ウェブサイトの <HEAD> 内のできるだけ先頭に近い位置に、オプティマイズ スニペットを設置する必要があります。これにより、ほとんどのページ フリッカーは解消されます。

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

コードサンプル

<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','CUSTOM-DATALAYER-NAME',4000,
{'OPT_CONTAINER_ID':true});</script>

注: CUSTOM-DATALAYER-NAME を DataLayer のカスタム名に置き換え、OPT_CONTAINER_ID をオプティマイズ コンテナ ID に置き換えてください。

タグ配置のおすすめの設定

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

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

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

次の手順

変更済みの analytics.js タグをウェブページに導入したら、A/BリダイレクトMVT の各テストを作成できるようになります。

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