OptimizelyとGoogle Analytics（Universal Analytics）を連携させる方法

Optimizelyとは

A/Bテストを実行出来る有名なツール。

詳しい使い方などは無料でA/Bテストできる！WordPress×Optimizelyの使い方で紹介しておりますので、ご覧くださいませ。

OptimizelyとGoogle Analyticsを連携させることで出来ること

OptimizelyはA/Bテストツールです。

テストケースの作成
テストのトラッキング
成果の確認

という基本的な部分はサポートしておりますが、「Aパターンを表示したユーザと、Bパターンを表示したユーザの細かい違いは何だろう」といった細かい分析は出来ません。
# 分析ツールじゃないから当たり前ですね。

ということで、餅は餅屋。いろんなツールと連携することが出来ます。
今回はその中で最も代表的なGoogle Analyticsとの連携方法をご紹介します。

対象

Google AnalyticsをUniversal Analyticsにしている方
カスタムレポートを作成できる方
カスタムディメンションを作成する権限をお持ちの方
ご自身でサイトにタグを埋めることが出来るという方
公式ドキュメントを読んだけど、よく分からないという方

連携の手順

１．OptimizelyでGoogle Universal Analyticsとの連携をオンにする

まずはプロジェクトの中の「統合」タブをクリックします。

続いて、統合出来るアプリケーションのリストが出てきますので、その中から「Google Universal Analytics」を探してクリックします。
フィルタに「Google」などを入力すれば見つけやすいかと思います。

最後に、画面右部に現れる部分で、統合を「オン」にします。

2.テストを作成する

通常通り、テストを作成します。

テストの編集画面内で「オプション > 統合」を選択します。

そうすると、モーダルダイアログが出てくるので「Google Universal Analytics」のチェックをOnにしましょう。

また、ここのカスタムディメンションですが、既存のOptimizelyテストや、その他で実施している既存のカスタムディメンションIDとかぶらないように設定しましょう。

3.サイトに埋め込んでいるAnalyticsコードを編集する

ここまでで

Optimizely → Google Analytics

のデータのやり取りの「Optimizely」部分の設定は完了です。

続いて、矢印部分のコードの編集に移りましょう。

Universal Analyticsのコードを編集します。

<script>
//Universal Analytics Setup
      (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','//www.google-analytics.com/analytics.js','ga');
 
      ga('create', 'UA-XXXX-Y', 'auto');

      // Optimizely Universal Analytics Integration Code
      window.optimizely = window.optimizely || [];
      window.optimizely.push("activateUniversalAnalytics");

// End Optimizely Code
      ga('send', 'pageview');
</script>

上記のように

ga('create', 'UA-XXXX-Y', 'auto');

と

ga('send', 'pageview');

の間に

// Optimizely Universal Analytics Integration Code
window.optimizely = window.optimizely || [];
window.optimizely.push("activateUniversalAnalytics");

の3行を追記します。

追記が終われば、本番環境に反映しましょう。

４．Google Analyticsの管理画面上でカスタムディメンションを作成する

いよいよ大詰めです。

Google Analyticsの管理画面での設定を行ない、送られているデータを正常に処理できるように分類していきましょう。

ということでGAの管理画面です。

アナリティクス設定のプロパティ設定画面より、カスタムディメンションを選択します。

そうすると、下記画像のような画面に移りますので「新しいカスタムディメンション」を選択して、新規カスタムディメンションを作成します。

カスタムディメンションの内容としては

名前：好きな名前
範囲：セッション（ユーザでも良いが、Optimizelyがセッションベースで送信するのでセッション推奨）
アクティブ：オン

で作成します。

これでOptimizelyから送られてきたデータをAnalytics側と紐付けることが出来ます。

番外編．カスタムレポートを作成して、データを見やすくする

データの連携が出来たので、各種のレポートのセカンダリディメンションなどでカスタムディメンションを選択すると、Optimizelyでどのパターンを表示していたのかで分割表示出来ます。

データをまとめて簡単に表示するためには、カスタムレポートを作成するのが便利です。

カスタムレポートは、カスタムタブを選択 > 新しいカスタムレポートをクリック

指標部分には見たいデータを選択。

今回は適当に

セッション
PV
ユーザー
直帰率
コンバージョン率

を選択しています。

次が重要な設定です。
ディメンションの詳細で作成したカスタムディメンションを選択します。

また、予想しないデータがレポートに紛れるのを防ぐため、フィルタを掛けることで、より正しいデータのみにします。

フィルタで今回作成したカスタムディメンションを選択。
一致は「正規表現」とし、内容はOptimizelyのテストIDを入力します。

こうすることで、このテスト以外のデータがカスタムレポートに紛れるのを防ぐことが出来ます。

これで設定は完了です。

OptimizelyとAnalyticsを連携して、よりA/Bテストの成果を上げていければと思います。

良いグロースハックライフを！