GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2016年07月26日

GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法

推奨はしていないですが、Optimizelyと解析タグをGTMで読み込みたい場合の最善の方法をご案内いたします。カギはGAタグが読み込まれる前にOptimizelyがアクティブ化しないと、統合が機能しない点となります。

上記に当てはまらない場合はこちらへ
Optimizelyタグ、GAタグが共にページに直貼りの場合
旧Google Analyticsの場合
Universal Analyticsの場合
Optimizelyタグが直貼り、GAタグがGTM経由の場合
用意されたGAタグを使用している場合
カスタHTMLタグでGAの記述をしている場合

GAのカスタムディメンション作成方法

OptimizelyとGAの統合を行うためには、GAの設定画面で、カスタムディメンションを指定する必要があります。

  1. GAのメニューの[アナリティクス設定] から、該当のプロパティの [カスタム定義] < [カスタムディメンション]を選択
  2. ページ内の[新しいカスタムディメンション]作成ボタンをクリック
    ua-004
  3. カスタムディメンションの名前と範囲[セッション]を選択し、[作成]をクリックして下さい。
    ua-003

    ※ 同時に動いている実験毎にカスタムディメンションを使い分けることができない場合は、1つのカスタムディメンションで運用する場合は[ヒット]単位で取得していただき、[ヒット]単位でデータを取得していることを認識の上、分析を行ってください。

  4. 作成されたカスタムディメンションのインデックス番号を確認してください。
    ua-004

Optimizelyタグと解析タグを両方共、GTMで読み込む場合

  1. まず最初に、GTMの「カスタムHTMLタグ」にOptimizelyスニペットを追加します。GoogleはカスタムタグはA/Bテストのために使用すべきではないと告知していますが、GoogleタグマネージャからOptimizelyを実装する場合はこの方法が唯一の方法となります。
  2. スニペットの記述後に、解析プラットフォームで実行するdataLayer変数を追加します。
    GTMではタグは次のような記述になります。

    gtm-03
    <script src="//cdn.optimizely.com/js/123456789.js"></script>
    /*
    <script>
      dataLayer.push({'event':'optimizely_loaded'});
    </script>
    */
  3. GTMで「トリガー」に新規で、「All pages after Optimizely」と命名した新しいルールを作成します。
  4. イベントタイプ「カスタムイベント」で、以下の条件を指定します。
    イベント名に「optimizely_loaded」を記入し、「正規表現一致を使用」にチェックを入れ、トリガー条件にPage URL、正規表現に一致、「.*」を入力します。

    gtm-04
  5. タグの設定画面に戻り、「(2)タグを設定」をクリックし、[詳細設定]をクリックして、「タグ配信の優先度」に2をセットしてください。

    ※「タグ配信の優先度」は数値の大きいものから配信されますので、環境に合わせて適宜一番優先する形で配信してください。

    gtm-06
  6. そして、GAタグの配信設定を行います。GAはOptimizelyの後に展開されるように設定します。
    「タグ配信の優先度」に1をセットしてください。

    gtm-05
    <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','//www.google-analytics.com/analytics.js','ga');
     
    ga('create', 'UA-XXXX-Y', 'auto');
    
    window.optimizely = window.optimizely || [];
    window.optimizely.push("activateUniversalAnalytics");
    ga('send', 'pageview'); </script>

この方法で、GTMを使用して、UAが実行される前にOptimizelyを完全に読み込むことができます。しかし、このセットアップでは非同期処理を行っているため、「ちらつき」や、「フラッシング」の可能性は依然として残っています。

Optimizelyの設定

  1. Optimizelyの「ホーム」画面から、[統合]タブをクリックしてください。
    表示されたリストから[Google Universal Analytics]を選択し、右サイドバーに表示された詳細画面のボタン[オン]をクリックしてください。

    ua-001
  2. Optimizelyの各実験毎の編集画面上で、[オプション] > [統合] > [Google Universal Analytics]にチェックを入れてください。
    ua-008

    ※ この統合を有効にすることで、UA setDimensionコードを実質的に置き換えます。
    もし、サイトに ga(‘set’, ‘dimension1′, dimensionValue); のコードがあると、Optimizely/UAの統合を上書きしてしまうことがありますのでご注意下さい。

  3. 先程作成したGAの[カスタムディメンション]の値をを選択します。
    このカスタムディメンションはOptimizelyの機能ではなく、ユニバーサルアナリティクスのものであることに注意して下さい。このカスタムディメンションの値は、ユニバーサルアナリティクスの別の箇所で使用されておらず、また、Optmizelyの別の実験で使用されていないことを確認して下さい。
  4. もし、デフォルト以外のEvent Trackingを使用している場合、[Custom Tracker]を指定します。
    例えば、以下のコールを使用している場合、

    ga('tracker2.send', 'pageview');

    [Custom Tracker]に「tracker2」を入力すると、OptimzelyはデフォルトのEvent Trackingに代わり「tracker2」と統合します。

  5. 最後に、[適用]をクリックします。

※ もしOptimizelyで、アクティブ化モードを使用した実験を行っている場合、ユニバーサルアナリティクス(Step1)の設定に加えて、Optimizelyの実験がアクティブになった後に、Google Analyticsへ情報を送る必要があります。

カスタムレポートの作成方法

ここでは、ユニバーサルアナリティクス内の実験レポートの確認方法をご説明いたします。

  1. GAの管理画面から、[カスタマイズ] タブをクリックしカスタムレポートを表示させます。

  2. Optimizelyの実験結果を表示させるために、[新しいカスタムレポート]をクリックしてください。カスタムレポートのタイトルを付け、レポートに表示したい指標グループを追加して下さい。
  3. レポートにOptimizelyの実験を適用するには、「ディメンションの詳細」に、先ほど設定したカスタムディメンションを選択してください。

  4. 次に[フィルタ]に、このディメンションを追加し、正規表現一致で、「.*」を使用してください。これでユニバーサルアナリティクス上で特定の実験結果を表示させることができます。

  5. [保存]をクリックします。以上で設定は完了です。

以上で、Optimizelyとユニバーサルアナリティクスの統合は完了です。
実験が開始されると、GAのカスタム変数に結果が表示されていきます。
カスタムディメンションは作成後1日程度時間が立たないとデータが入ってきませんので、実験結果のデータがGAに反映されるまで1日以上の余裕を持つ必要がありますので、実験をスタートする前にあらかじめ設定のご確認をお願いします。

gtm-cd1

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

Optimizely⇒UA_GTM 連携方法について
投稿日: 2017年01月10日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日
リダイレクト実験:個別URLのテスト
投稿日: 2016年09月16日
CSSだけでテスト作成 : テストバリエーションにのみ適用されるCSSを書く方法
投稿日: 2016年09月16日
テストの実装でよく使われる jQuery の機能のご紹介 vol2
投稿日: 2016年09月14日

ヘルプのよく読まれている記事