GoogleOptimizeスタートアップマニュアル~2.アカウントの基本設定~
2021年1月21日

前回の記事では、Google Optimizeのアカウント作成方法についてご紹介しました。
この記事では、Google Optimizeアカウント作成後の基本設定について解説します。

アカウントの基本設定

アカウントを作成すると、下記のような画面に切り替わります。

右上の[設定]をクリックし、基本設定をしていきます。

計測(Google Analyticsと連携する)

テストでデータを収集するためには、Google Analyticsと連携する必要があります。
[アナリティクスへリンクする]のボタンをクリックし、連携設定をしていきます。

プルダウンをクリックすると、Google Analyticsのプロパティが表示されます。
その中からテストのデータを流し込みたいプロパティと、ビューを選んでリンクします。
 ※前回の記事でも書きましたが、連携するGAのアカウントはUniversalAnalyticsによるGAアカウントであることが必要です。
 現時点(2021年1月7日時点)において、新しいGA4のプロパティはプルダウンの中に表示されていません。

サイトにタグを設置する

「オプティマイズプラグインのインストール」の指示に従って進めます。

直貼り設置で連携する場合

gtag.jsタグの場合とanalytics.jsの場合でコードが2通りあります。

・gtag.jsタグの場合

サイトに直貼りしているトラッキングコード内に赤文字のコードを追加します。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-x', { 'optimize_id': 'GTM-XXXXXX'});
</script>

※UA-xxxxxxxx-xにはGoogle アナリティクスのトラッキングIDを入力
※GTM-XXXXXXにはGoogle オプティマイズのトラッキングIDを入力

・analytics.jsの場合

オプティマイズプラグインのインストールの箇所に「ga(‘require’, …」のようなコードが表示されるので、サイトに直貼りしている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', 'UA-XXXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXX');
ga('send', 'pageview');

</script>

※UA-xxxxxxxx-xにはGoogle アナリティクスのトラッキングIDを入力
※GTM-XXXXXXにはGoogle オプティマイズのトラッキングIDを入力

GTM経由で設置する場合

タグマネージャー経由でタグを設置する場合、次の情報が必要です。

  1. アナリティクスプロパティID - Google Analyticsから取得
    取得方法:Google Analyticsの画面左下【管理】⇒【プロパティ設定】⇒右上に表示されます。
  2. オプティマイズコンテナ ID - Google Optimizeから取得
    取得方法:Google Optimize画面右上【設定】⇒コンテナ設定の箇所に表示されます。
  3. アナリティクスのカスタムトラッカー設定を使用しているタグマネージャーのすべてのアナリティクスタグ

上記の情報が用意できたら、GTMで下記の設定を行います。

  1. GTMにログインし、アカウントを選択します。
  2. [タグ] > [新規] をクリックします。
  3. [タグの設定] > [Google オプティマイズ] をクリックします。
  4. 用意していたオプティマイズのコンテナ ID を入力します。
  5. Google アナリティクス設定変数を選択します。
  6. [保存] をクリックして、トリガーを設定せずにタグを保存します。
  7. オプティマイズコンテナにリンクされている、アナリティクスプロパティのアナリティクスページビュータグを開きます。
  8. [タグの設定] > [詳細設定] > [タグの順序付け] をクリックします。
  9. このタグが呼び出される前にタグを呼び出すチェックボックスをオンにします。
    [設定タグ] 見出しでメニューをクリックし、設定するオプティマイズ タグを選択します。
  10. オプティマイズ タグがページごとに 1 回起動するように設定し、保存します。
  11. タグ マネージャーのコンテナを公開し、変更を反映します。

フラッシングを防止するコードを設置する

フラッシングとは、A/Bテストを実行する際、テストパターンを読み込んでいる間に一瞬だけオリジナルパターンが表示された後、テストパターンに切り替わる現象のことを言います。これによって、一瞬ページがちらついて見えます。

この現象を抑えるために、フラッシングを防止するコードも設置します。
※この作業は必須ではありませんが、設定することによって、ABテストで発生するフラッシングを抑えられます。

▼フラッシングを防止するコードここから▼

<!-- 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

▲ここまで▲

※[GTM-XXXXXX]のXの箇所には、自身のオプティマイズコンテナIDを入れてカスタマイズします

このコードを、ページの <HEAD> のなるべく前方(オプティマイズ プラグインの変更済みの Google アナリティクス トラッキング コードの直前)に直貼りで追加します。

Chrome拡張機能をインストールする

Chrome拡張機能がインストールされていないと、ここに拡張機能インストールのリンクが表示されます。

拡張機能をインストールすると、テストパターン作成の際にビジュアルエディタを使用できるようになります。
インストールしていただくことをお勧めします。

次の記事では、テストの作成を行っていきます。

 次の記事 テストの作成にすすむ

 <前の記事 アカウント作成

一覧へ戻る