GTMでOptimizelyタグとGAタグ(カスタムHTML)両方を配信して連携を行う方法 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年03月10日

GTMでOptimizelyタグとGAタグ(カスタムHTML)両方を配信して連携を行う方法

推奨はしていないですが、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. 「Optimizelyタグを配信」するタグを作成

    GTMで新規でタグを作成し、タグタイプ「カスタムHTMLタグ」を選択し、Optimizelyスニペットを追加します。
    スニペットの記述後に、Googleアナリティクスを実行するdataLayer変数を追加します。
    詳細設定の「タグ配信の優先度」を「2」に設定します。
    GTMではタグは次のような記述になり、全てのページ(All Pages)で発火させます。

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

    <script src="//cdn.optimizely.com/js/123456789.js"></script>
    
    <script>
      dataLayer.push({'event':'optimizely_loaded'});
    </script>
    
  2. 「Optimizelyイベント」のトリガーを作成

    GTMで新規でトリガーを作成し、トリガー名「All pages after Optimizely」を作成します。
    イベントタイプ「カスタムイベント」で、以下の条件を指定します。
    イベント名に「optimizely_loaded」を記入し、「正規表現一致を使用」にチェックを入れ、トリガー条件にPage URL、正規表現に一致、「.*」を入力します。

    gtm-04
  3. 「Googleアナリティクス」のタグを作成

    GAタグの配信設定を行います。GAから取得したタグの”send”の前に、Optimizely用の記述を2行記載する必要があります。
    GAはOptimizelyの後に展開されるように設定します。
    「タグ配信の優先度」に1をセットし、先ほど作成した「All pages after Optimizely」トリガーをセットします。

    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のサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

Cross-Project Events(プロジェクトをまたいだ目標計測)の設定方法
投稿日: 2017年07月28日
テストバリエーションをテストを開始せずに実際の画面で確認する ( Optimizely X )
投稿日: 2017年06月20日
Optimizely X と Ptengine の連携方法(Optimizely X)
投稿日: 2017年05月15日
GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法(Optimizely X)
投稿日: 2017年03月10日
Optimizely社公式の拡張機能を利用して編集画面への読み込みを補助する方法
投稿日: 2017年03月03日

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