*
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 ご指摘ありがとうございました )
また、上記のようなコードが実行された後に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
関数を使う方法よりは理解が難しくなります。このあたりはデメリットですね
*2017-04-17 追記
GAタグ設定画面で「詳細設定>高度な設定>トラッカー名を設定する」チェックをONにして、トラッカー名」を空欄すると、これまで通り ga
関数が使えるようになりオススメです。
// `trackeName` を指定しなくてもイベントを送信できる
ga('send', 'event', 'sample category', 'sample action');
変数の設定
のGTMダッシュボードのスクリーンショットを見てください。
この中で重要なのは、以下の変数です。
- 組み込み変数
-
Event
:dataLayer.push()
に渡すevent
フィールドを指す。
-
- ユーザー定義変数
-
ANALYTICS_TRACKING_ID
:UA-XXXXX-Y
形式のGAトラッキングID。定数にしておくことで、複数のタグから参照しやすくなります。 - GAイベントフィールド。
ga
関数に設定するデータと同じです。eventCategory
eventAction
eventLabel
eventValue
-
(GA公式ドキュメントのスクリーンショット)
トリガーの設定
次に、トリガーを設定します。トリガーとは、タグを配信させるための条件のことです。
イベント名は何でもいいのですが、ここでは analytics
と設定することにします。
先ほどの組み込み変数 Event
に analytics
が設定されることをトリガー条件とします。実際のコードでは、以下のようになります。
dataLayer.push({ event: 'analytics' });
タグの設定
最後に、タグを設定します。タグタイプに「ユニバーサル アナリティクス」を選び、 のスクリーンショットのように設定していきます。
非インタラクションヒット
ここで注意しておきたいのは、「非インタラクションヒット」です。
GA公式ガイドにある nonInteraction
のことです。
例)
ga('send', 'event', 'Videos', 'play', 'Fall Campaign', {
nonInteraction: true
});
「非インタラクション」を真(true
)に設定していないイベントをGAに送信した場合、そのセッションは直帰とカウントされません (GA公式ヘルプ)。
「非インタラクションが偽(false
)」、つまり、ユーザーのインタラクションがあると見なされて、ユーザーがそのページで何もせずに直帰した場合でも、直帰と見なされなくなります。
これはデフォルトの動作です(nonInteraction: false
)。
カスタムイベントをログのように使う場合(ページに来たセッションすべてでイベントを送信するなど)、デフォルトのままだと直帰率が急激に低下します。
用途にもよりますが、「非インタラクション」は注意深く設定するようにしてください!
(私はまさに全ページでログ用途にイベントを送信していたため、直帰率が急激に低下して困りました )
参考:
動作確認
設定が完了したら、プレビュー機能を使って、タグが想定通りに配信されているか、dataLayer
にきちんとデータがプッシュされているか、などを必ず確認しましょう。
もちろん、実際に 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の日本語公式リファレンスを出してくれると、もっとありがたいのですが… )
GTMの設定やUIはかなり頻繁に変わっている印象なので、最終的には公式ドキュメントを確認するのが一番確実かと思います
(この記事の情報も数ヶ月ですぐに陳腐化するかもしれませんので)
参考情報
- GAのデバッグに便利: Chrome拡張 Google Analytics Debugger