64
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Google Tag Manger から Google Analytics にカスタムイベントを送る方法


Google Analytics → 以下、GA と略します
Google Tag Manger → 以下、GTM と略します

前提

  • GAをセットアップ済み
  • GTMをセットアップ済み
  • GAとGTMの連携をセットアップ済み(GAタグをGTMによって配信している)

概要

GTMの dataLayer というAPIを使って、GAにカスタムイベントを送信する方法を説明します。

*参考: dataLayer についてのGoogle公式ガイド(英語)

カスタムイベント実装のベースはGAの イベントトラッキング と呼ばれている仕組みです。
この仕組みをGTMの dataLayer で実装するようにします。

ga 関数の場合

GAのイベントトラッキングを行う場合、通常は以下のような ga 関数を使うと思いますが、

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

GTMは 非同期に GAのタグを配信するので、ga 関数を使う場所すべてで ga 関数がが定義されているかチェックする必要があります。
(このチェックがないと、ReferenceError: ga is not defined といったエラーが発生する可能性があります)

if ('ga' in window) {
  ga('send', 'event', 'sample category', 'sample action' /* ... */);
}

*2017-04-17 修正(@1987yama3 ご指摘ありがとうございました :bow:
また、上記のようなコードが実行された後にGAタグが配信される可能性もあるため(配信が非同期なため)、イベントがGAに送信されないケースも出てきます。
また、GTMのデフォルト設定だと ga('create') 関数に指定されるトラッカー名がランダムな値に設定されるために特定できず、イベントが送信されません。

// GTMにより発行される
ga('create', 'UA-XXXXX-Y', { name: 'gtm1454402957304' });

// `trackeName` が指定されていないため、イベントが送信されない
ga('send', 'event', 'sample category', 'sample action');

// 正しくはこうしなければならないが `gtm1454402957304` は特定できない
ga('gtm1454402957304.send', 'event', 'sample category', 'sample action');

dataLayer の場合

dataLayer.push({
  event: 'analytics',
  eventCategory: 'sample category',
  eventAction: 'sample action'
  /* ... */
});

dataLayer の初期化コード(GTMのセットアップコード)は <head> タグの開始直後に置くことが推奨されているので、普通は window.dataLayer が定義済みであると考えてよく、 if ('dataLayer' in window) { ... } といった存在チェックのコードが不要になります。

*参考: Google公式のGTMクイックガイド

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

(関数冒頭の w[l]=w[l]||[]; というコードは、window['dataLayer'] = window['dataLayer'] || []; と同等です)

また、dataLayer にイベントデータを push さえしておけば、非同期な実行タイミングのことは考慮せずに、GTMの方でよしなにイベントデータを処理してくれます。

GTMダッシュボードでの設定

とはいえ、これまではお手軽に ga 関数を実行すればよかったのですが、GTM経由でイベント送信する方法では、GTMダッシュボードでの設定が必要になります。
1つレイヤーが増えてしまうので、ga 関数を使う方法よりは理解が難しくなります。このあたりはデメリットですね :sweat:

*2017-04-17 追記
GAタグ設定画面で「詳細設定>高度な設定>トラッカー名を設定する」チェックをONにして、トラッカー名」を空欄すると、これまで通り ga 関数が使えるようになりオススメです。

スクリーンショット 2017-04-17 18.22.41.png

// `trackeName` を指定しなくてもイベントを送信できる
ga('send', 'event', 'sample category', 'sample action');

変数の設定

:point_down: のGTMダッシュボードのスクリーンショットを見てください。

スクリーンショット 2017-04-14 0.09.22.png

この中で重要なのは、以下の変数です。

  • 組み込み変数
    • Event: dataLayer.push() に渡す event フィールドを指す。
  • ユーザー定義変数
    • ANALYTICS_TRACKING_ID: UA-XXXXX-Y 形式のGAトラッキングID。定数にしておくことで、複数のタグから参照しやすくなります。
    • GAイベントフィールド。ga 関数に設定するデータと同じです。
      • eventCategory
      • eventAction
      • eventLabel
      • eventValue

スクリーンショット 2017-04-14 0.17.20.png

GA公式ドキュメントのスクリーンショット)

トリガーの設定

次に、トリガーを設定します。トリガーとは、タグを配信させるための条件のことです。
イベント名は何でもいいのですが、ここでは analytics と設定することにします。

スクリーンショット 2017-04-14 0.21.19.png

先ほどの組み込み変数 Eventanalytics が設定されることをトリガー条件とします。実際のコードでは、以下のようになります。

dataLayer.push({ event: 'analytics' });

タグの設定

最後に、タグを設定します。タグタイプに「ユニバーサル アナリティクス」を選び、 :point_down: のスクリーンショットのように設定していきます。

スクリーンショット 2017-04-14 0.26.53.png

非インタラクションヒット

ここで注意しておきたいのは、「非インタラクションヒット」です。
GA公式ガイドにある nonInteraction のことです。

例)

ga('send', 'event', 'Videos', 'play', 'Fall Campaign', {
  nonInteraction: true
});

「非インタラクション」を真(trueに設定していないイベントをGAに送信した場合、そのセッションは直帰とカウントされませんGA公式ヘルプ)。
「非インタラクションが偽(false)」、つまり、ユーザーのインタラクションがあると見なされて、ユーザーがそのページで何もせずに直帰した場合でも、直帰と見なされなくなります。

これはデフォルトの動作です(nonInteraction: false)。

カスタムイベントをログのように使う場合(ページに来たセッションすべてでイベントを送信するなど)、デフォルトのままだと直帰率が急激に低下します。
用途にもよりますが、「非インタラクション」は注意深く設定するようにしてください!
(私はまさに全ページでログ用途にイベントを送信していたため、直帰率が急激に低下して困りました :sob:

参考:
- イベントについて - アナリティクス ヘルプ
- 直帰率 - アナリティクス ヘルプ
- 離脱率と直帰率の違い - アナリティクス ヘルプ

動作確認

設定が完了したら、プレビュー機能を使って、タグが想定通りに配信されているか、dataLayer にきちんとデータがプッシュされているか、などを必ず確認しましょう。

スクリーンショット 2017-04-14 0.46.37.png

スクリーンショット 2017-04-14 0.47.21.png

スクリーンショット 2017-04-14 0.48.00.png

もちろん、実際に dataLayer.push() を実行するコードが必要です。
このコードはGTMで配信しても、アプリケーションのソースコードに埋め込んでも、どちらでも構いません。

例)

dataLayer.push({
  event: 'analytics',
  eventCategory: 'フォームトラッキング',
  eventAction: 'click',
  eventLabel: '性別',
  eventValue: 0
});

GTMのプレビュー画面で dataLayer にプッシュされていることが確認できたら、GAのダッシュボードの

リアルタイム > イベント > イベント(直前の 30 分間)

で実際にイベントが送信されているか確認してみましょう。
うまくいっていれば、dataLayer にプッシュされて数秒後に、GAダッシュボードに反映されるはずです。

まとめ

GTMに関しては日本語の情報が少ないので、正しい情報を探すのにかなり苦労しました。また、ダッシュボードのUIも数年前と比べてかなり変わっているので、ググった情報を参考にしても情報が古かったりして余計に混乱します。

GTM経由にすると、レイヤーが1つ増えるので理解が難しくなりますが、タグの非同期配信・高速配信などメリットもありますので、もっと使う人が増えて日本語の情報が増えるといいなと思います。
(GoogleがGTMの日本語公式リファレンスを出してくれると、もっとありがたいのですが… :sweat_smile:

GTMの設定やUIはかなり頻繁に変わっている印象なので、最終的には公式ドキュメントを確認するのが一番確実かと思います :smile:
(この記事の情報も数ヶ月ですぐに陳腐化するかもしれませんので)

参考情報

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
64
Help us understand the problem. What are the problem?