イベントトラッキングの設定、ユニバーサル・タグマネージャ対応2015

X (Twitter) Facebook Hatena Pinterest Email Pocket

こんにちは。Googleアナリティクス公式ヘルプフォーラム・アンサリストLevel10のカグア！です。

今日はGoogleアナリティクスでクリック検知などができるようになる、イベントトラッキングについて紹介します。使えるようになりますとホント便利ですよー。

追記：2018年2月22日　本記事は gtag.js では動作しません。＞＞公式ヘルプを参照する
追記：2015年8月5日　タグマネージャー(v2)の設定方法を加筆。

この記事の目次

イベントトラッキングとは
イベントトラッキングの書き方
イベントトラッキングのデータを設計する
タグマネージャー（v1）でイベントトラッキングをする方法
jQueryを使って一括でイベント計測
コンバージョンにイベントを設定する
イベントトラッキングをつかった分析
イベントトラッキングのメリット・デメリット
- イベント計測をするメリット
- あまり期待してはいけないところ
参考図書と関連リンク

イベントトラッキングとは

「PDFダウンロードのクリック数が知りたい」「どれくらいスクロールされたのか」「外部への発リンク先を知りたい」など、ユーザーのページビュー以外の行動を計測するために、Googleアナリティクスでよく用いられますのが、イベントトラッキングです。

スクロール量検知などは、さすがに多くのプログラムの仕込みが必要になるため、あまり見かけませんが、前述のようなクリック検知については、実装もしやすく使いやすいため利用も増えているようです。たとえば、アフィリエイト（Affiliate）のクリックとその内容（BookLive!など）を、イベントトラッキングで計測しますと、Googleアナリティクスのレポート画面で以下のように分析できます。

また、アプリなどではそもそもページを見るという概念が薄かったり、Webページでもページ遷移をせず、アコーディオン式のメニューや、スワイプで画面遷移したりするなどといったアクションを計測したい、という場面で用いられます。

Googleアナリティクスでは、現行バージョンの2世代前からすでに提供されていて、技術的にも安心できる精度と情報量となり人気の計測テクニックです。

ただ、標準では計測できず、計測者が意図的に組み込まなくてはいけません。

イベントトラッキングの書き方

イベントトラッキングは、Googleアナリティクスのバージョンによって表記が変わりますので、気をつけてください。

ユニバーサルアナリティクス

ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value,{nonInteraction:true});

ga(‘send’,’pageview’・・・)などといったコードを含む、Googleアナリティクスの最新版のトラッキングコードがこれにあたります。最後のnonInteraction部分は、ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, true) として、trueだけでもOKです（trueは何らかのデータがある状態をさし1でも同様の動きをします）。
※追記：2016年2月23日　nonInteractionというプロパティを入れませんと稼働しません。申し訳ありませんでした。

非同期コード

_gaq.push([‘_trackEvent’, ‘category’, ‘action’, ‘label’,value,opt_noninteraction]);

_gaq.push([‘_trackPageview’,～])といった表記を含む、1つ前の世代のGoogleアナリティクスのトラッキングコードでは上記のように表記します。2015年3月現在ではこのバージョンがもっとも普及しているような気はします。opt_noninteraction部分は、前述のようにtureなどを入れます（意味は後述）。

同期コード

pageTracker._trackEvent(‘category’,’action’,’label’ ,value ,true);”

pageTracker._trackPageview(～)というくだりを含む、Googleアナリティクスのトラッキングコードをもつバージョンでは、この表記を使います。

タグマネージャー（v2向け）

基本的な流れ

１．クリック検知を有効化する。
１．ユニバーサルアナリティクスのタグでイベント設定をする。
２．配信タイミングを設定する。
３．有効化のタイミングを設定する。

1.クリックURL検知をできるようにする

変数メニューを選び、「Page URL」と「Click URL」にチェックします。これで、URLとAタグのリンク先URLが検知できるようになります。

2.ユニバーサルでイベントを選ぶ

タグメニューを選び、ユニバーサルアナリティクスを選び「イベント」を設定します。

3.イベントを設定する

これらは任意の名称で構いません。クリックURLも不要であれば、ここでは使用しなくとも大丈夫です。

4.トリガーを設定する

イベントを設定しますと、タグの配信タイミングを設定します。「クリック」を選びますと、上図のように「トリガー」の設定画面にいきなり遷移します。焦らないようにしてください。

トリガーとは、タグを配信する条件やきっかけという意味です。Googleタグマネージャーでは「クリックのトリガーによってタグが発火する（クリックを条件にしてタグが動く）」などといいます。

トリガーに、リンクを設定し、配信するタイミングに「PageURL」「正規表現」「.*」を設定します。「.*」は「すべての」という意味です。それを有効にする意味として「正規表現」を選んでいます。つまり、すべてのPageURLで配信せよ、という意味になります。つまり、クリック検知をするタグの配信自体は全ページでせよ、という意味です。

次の有効化のタイミングで、「ClickURL」「含む」「tel:」とします。クリックされたURLのなかに、「tel:」という文字が含まれていれば、それが有効になる（動く）という意味です。

つまり、クリックで有効になり、前述のユニバーサルアナリティクスのイベントトラッキングが発動することになるわけです。

なお、前述の「tel:」は、スマホなどでの電話をかけるリンクに含まれる文字列です。電話をかけるリンクをタップしたら、イベント発動させる、という意味になります。

タグマネージャー（v1向け）

ページ内にgoogletagmanager.comなどの表記があって、Googleアナリティクスらしきトラッキングコードがなければ、それはGoogleタグマネージャーというプログラムを使って計測をしています。

タグマネージャーでも比較的簡単にイベントトラッキングを実装できますので、詳しくは後述します。

Measurement Protocol（メジャーメントプロトコル）

background-image:url(‘http://www.google-analytics.com/collect?v=1&…&ec=Category&ea=Action&el=Label&ev=100’);

ユニバーサルアナリティクスになってから、Measurement Protocol（メジャーメントプロトコル）という、新しいデータ送信の形式が追加されました。通常のトラッキングコードに加えて、Measurement Protocolというデータ送信もできる、という感じです。そして、そのMeasurement Protocolでも、勿論イベントトラッキングは使えます。

＞＞Measurement Protocol のパラメータリファレンス – Google アナリティクス — Google Developers

Measurement ProtocolはIMGタグなどで使えますので、イベントトラッキングにかぎらず、ガラケーのGoogleアナリティクス利用としても使え、とても便利です。興味のある方は、いろいろなAPIやパラメーターがありますので、スキルアップしておくとトラッキングの幅が広がりますよ！

実際の組み込み方の例

もともと入っていますトラッキングコードに合わせた、イベント計測用のタグを把握しましたら、それを計測するために、各所に組み込む必要があります。詳しくは後述しますが、一般的に利用されていますのは以下のようなケースです。

クリックを検知する、ということではリンクに該当しますAタグ内に、onClickで挿入することが多いと思います。もちろん、トラッキングコード内に書いたり、ページの任意の箇所に書いても構いません（トラッキングコードより前には書けません）。

タグマネージャーは、タグマネージャーの管理画面内で実装します。また、Measurement Protocolを使った表記では任意の箇所で、IMGタグなどを使い呼び出せばOKです。

記述例（１）Aタグ内

<a href="map.pdf" onClick="ga('send','event','Click','Download','MAP',100,{'nonInteraction':1});">ダウンロード</a>

（意味）Clickをして、MAPをDownload したらイベント発生！100円に相当させよう。ページビューに影響させないように（nonInteraction）する（1）よ！

となります。このClickやDownloadなどの名称は任意で決めてかまいません。日本語も使えますし、URLのような長い文言でもOKですので、記録用変数としては、非常に使い勝手の良いものと言えます。

このイベントを発生させるごとに、Googleへのデータ送信（ヒット）が発生します。

ただし、Aタグ内のonClick計測はブラウザによって挙動がまちまちなことが知られてます。100%検知できるかというと難しいというのが現状で、あくまで参考値としてとらえるほうが良いかと思います。そのあたりを検証した記事が以下になり、とても良いエントリーですのでぜひ一読をおすすめします。

＞＞Googleアナリティクスでの外部リンククリック計測3つの手法の利点と欠点を整理してみた | Web担当者Forum

記述例（２）JavaScriptでブラウザをこえる

Aタグではなく、フォームボタンなどでかつJavaScriptでブラウザをこえるようなイベントの場合、JavaScriptで以下のようにイベントリスナーをかまえると良いでしょう。、addEventListener関数をつかえば、ブラウザをまたいでイベントリスナーを追加できます。

<button id="button">こちらをクリック</button>
～
var downloadLink = document.getElementById('button');
addListener(downloadLink, 'click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});
function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

＞＞イベントトラッキング – ウェブトラッキング（analytics.js） – Google アナリティクス — Google Developers

イベントトラッキングのデータを設計する

それでは、各項目を詳しく見て行きましょう。それぞれの値は、以下のように管理構造としてデータ蓄積が可能です。ga(‘send’,’event’ ～ );部分は、決まり文句です。GA（Googleアナリティクス）にイベントというデータを送信（send）するよ！という意味になります。

なお、値は省略も可能ですが、数値を入れた場合は集計などができ、平均値など算出可能なデータです。たとえば、ダウンロードにそれぞれ内部的に評価のためのポイント点数をつけておき（地図なら100ポイント、見積もり書ならば500ポイントなど）、それらの平均値を出すなどできます。

ヒットタイプ（Event）※必須

Googleアナリティクスでは、データ送信をヒットとよびますが、イベントトラッキングにおいては、すべて「event」というヒットタイプを送信することになります。したがって、ここは変えてはいけません。

いっぽう、ユニバーサルアナリティクスでは、以下のような表記も可能です。

ga(‘send’, {
‘hitType’: ‘event’,
‘eventCategory’: ‘button’,
‘eventAction’: ‘click’,
});

イベントカテゴリ（Category）※必須

イベントカテゴリは、イベントトラッキングで取得したデータのもっとも大きな分類になります。わかりやすく大きなジャンルで区分すると良いでしょう。CLICK、SCROLL、FORM など。ちなみに、「CLICKはアクションじゃないの？」と疑問にもつ人もいるかもしれません。しかし、その分類は管理者に委ねられていますので、柔軟に運用して構いません。

イベントアクション（Action）※必須

イベントカテゴリ配下に管理されるデータです。そのカテゴリーにおいて、もちろん、ここにCLICKやSCROLLなどアクションを分類しても良いでしょう。ただ、その内訳として、MAPやDOWNLOADなどがきて、さらにその中身にURLを入れたい・・・とするならば、カテゴリーにはCLICKを入れ、アクションにMAP、ラベルにダウンロードしたURLを入れる、などと設計することになるでしょう。

ここまでが必須のデータになります。2階層くらいでしたら、さくっとActionまでをカジュアルに実装してしまうのがいいかもしれません。

イベントラベル（Label）

ラベルは必須の項目ではありませんが、より詳細な中身を入れておくときに便利です。たとえば、私はリンク先のURLですとか、クリックされたそのページのURLなどを入れることが多いです。それらは自動で取得が可能ですので、とりあえず入れておくというような定型句的にも使っちゃいます。

◇クリックしたAタグのリンクURLをラベルに格納。
ga(‘send’, ‘event’, ‘category’, ‘action’, this.href ,true);

◇クリックしたページのURLをラベルに格納。
ga(‘send’, ‘event’, ‘category’, ‘action’, location.href ,true);

JavaScriptで、this.href ですとか、location.href といった命令がそもそもあり、それをGoogleアナリティクスにも転用できるのです。それらの前後に”などクォテーションマークは必要ありません。

イベント値（Value）

ここには数値を入れます。Googleアナリティクスの公式ヘルプには、たとえば、動画の再生ボタンをクリックされたときのイベントで、再生秒数を入れるなどという事例が書かれています。平均値を出すなど、計算による算出が分析に役立つのであれば、設定すると良いと思います。

後述しますが、いっぽうでイベントはコンバージョンに紐付きません。ですから、たとえばこれをソーシャルゲームの課金イベントに設定したとしてもちょっと分析は一手間余計にかかってしまいます。その値がビジネス的に重要な位置を占める場合、たとえばこの場合でしたら、eコマースによる金額として設定するほうが無難かと思います。あくまでゴールではなく単なるアクションに紐づく数値にとどめたほうがあとあと融通がききます。

タグマネージャー（v1）でイベントトラッキングをする方法

タグマネージャーを使いますと、トラッキングコードやAタグなど直接タグをいじることなく、クリックの計測であれば簡単にできます。Googleタグマネージャーにはリンククリックリスナーという、クリック検知のための機能が用意されていますので、それを使います。

１．リンククリックリスナーをすべてのページで稼働
２．クリック内容を調べるルールを作成
３．クリック内容が期待する内容であれば、イベントトラッキングのタグを稼働

という流れになります。

※タグマネージャーv2については以下、マクロを変数、ルールをトリガーと読み換えてください。

1.リンククリックリスナータグの発行

任意の名前をつけて、リンククリックリスナーというタイプのタグを発行します。このとき稼働条件としては、ルールで「すべてのページ」としておきましょう。とりあえず全ページでクリックを検知できる状態にしておきます。

2.クリック内容を調べるルールを作成

前述のリンククリックリスナーが稼働している状態で、リンクがクリックされますと、タグマネージャーの内部的にはgtm.linkClickという信号が送られます。それを感知させ、そして、リンク内容（element url）が、外部リンク（http）であり、かつ、自分（kagua.biz）を含まない、というすべての条件を満たすとき、というルールを設定します。

これで実質、自分以外の外部リンク、つまり発リンクを検知できることになります。

3.イベントトラッキングする

あとは、イベントトラッキング用のタグを新規追加します。このタグの配信されるためには（２）で設定したルールとします。

element title（リンクタイトル）、element url（リンク先URL）としておきますと、自動でそれらがアクションとラベルに格納されます。値は空欄でも構いません。とくに100には意味がありませんが、まあ何かに使えるかなということで私は入れることが多い、というだけです。※ただしAタグでIMGタグなど画像を囲んでいた場合は、文字ではないためelement titleには機械的にIMGタグが格納されます。

あとは、プロパティIDなどは、すでに入っているであろうユニバーサルアナリティクスのタグと同様の設定にします。

ちなみに、イベントトラッキングタグで、Actionの部分が操作になっているのはよくわかりません。とりあえず、Actionが入りますのでそう解釈してください。

また、{{url}} を使いますと、そのクリックが発生したページのURLが取得できます。

非インタラクションヒットは、ここをTRUEにしますと、クリックが直帰率に影響しなくなります。逆にFalseとしますと直帰してもしても直帰にカウントされなくなるんですね。ただ、ここをFALSEにしますと、その瞬間から影響がはじまり、たとえばサイト全体の直帰率がとつぜん80%だったものが20%になるなど、影響が大きいので、理由が無い限りはTRUEで良いかと思います。

これで、タグを発行・公開しますと、イベントを計測してくれます。

jQueryを使って一括でイベント計測

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){$("a").click(function(e){ 
var ahref = jQuery(this).attr('href');
if(ahref.indexOf("http://")!=-1 && ahref.indexOf("kagua.biz")==-1){
 ga('send', 'event', 'click', this.innerText ,this.href );
}
});});
</script>

前述のAタグ内に、onClick=で記述する方法は、数が増えますと記述や管理が煩雑になります。jQueryという便利なプログラムがあり、それを追加で実装しますと、その機能をつかって、クリック検知を一括で計測できるのです。

もしすでに、ヘッダなどでjQueryを読み込んでいれば、上記 jquery.min.js のくだりは不要です。

意味としては、前述のタグマネージャーのように、リンククリックを検知（$(“a”).click(function(e)）し、外部リンク（http://）であり、自分（kagua.biz）を含まなければ（-1）、event発生させるという仕組みです。リンク内の文字（this.innerText）とそのリンクURL（ this.href ）を、アクションとラベルに格納しています。

注意点があり、フッターなどで良いのですが、必ずトラッキングコードよりも下に記述してください。そうしませんと、そもそもga(‘send’,～というくだりが機能しないんですね。

コンバージョンにイベントを設定する

Googleアナリティクスのリアルタイム解析のイベントなどで、クリックなどイベントの計測ができていることを確認します。うまくトラッキングできていましたら、目標設定もできます。

たとえば、資料ダウンロードをサイトの目標にしている、というときには目標設定しておくと分析がしやすくなります。

1.イベントを目標に設定

Googleアナリティクスで、画面上方の「アナリティクス設定」から、「目標」を選び、「新しい目標」をクリックします。そして、上図のように目標のタイプをイベントにして次に進みます。

2.ゴールとしてカウントさせる

あとは、これを目標としてカウントさせるようにします。上図では、downloadというアクションが実行されれば、コンバージョンとしてカウントするようにしています。

コンバージョンの目標値に数値を設定しておきますと、ページの価値といって、どのページがどれくらいコンバージョンに貢献したのか、がわかるようになります。どのページがゴールに役だったのかがわかりますので、平均客単価やゴールの金額換算値などを入れておくことをおすすめします。※eコマース機能を使っている場合は、ここを設定してしまいますと、合計金額などに影響してしまいますので、設定は不要です。売上が前述のページの価値に反映されます。

3.正規表現もつかえる

たとえばアフィリエイトなどで、amazonとrakutenのクリックは同等に扱いたい、というときがあるかもしれません。そういうときは、目標を複数設定しても良いですし、上図のように、正規表現を使って複数設定することもできます。

|（パイプ）といって、これがありますと、「もしくは」という意味になり、より高度なマッチングができます。

イベントトラッキングをつかった分析

分析につきましては、イベントを目標設定してゴールにしている場合と、そうでない場合とがあります。いずれも、セグメントで絞り込むことで分析が可能になります。

以下のようにセグメントを作り、セッション（訪問）を絞り込むことで、その傾向を把握し改善に役立てます。

分析1:イベントをコンバージョン設定している場合

画面上方の「すべてのセッション」をクリックしますと、セグメント作成画面になります。

そこで、「+新しいセグメント」をクリックし、条件をクリックします。そして、目標完了数を選び、たとえば1以上と設定し保存します。

これで、前述のようにイベントを目標設定しれあれば、クリックなどイベント発生した訪問だけに絞り込むことができ、分析がしやすくなります。

分析2:イベントをコンバージョン設定していない場合

いっぽうでイベントを目標設定していないケースもあるかと思います。たとえば、ゴールというほどではないけれど、このバナーをクリックした人と、そうでない人は違いがあるかな？などです。そういった場合も、セグメントすることが可能です。

上図のように、イベントカテゴリ、イベントアクション、イベントラベル、イベントの値など、さまざまな項目を絡めることができます。分析に役立ちそうなイベントを設定し、絞り込みましょう。

分析3:分析の基礎テクニック

セグメントを作り絞りこみましたら、たとえば以下のような操作をしますと傾向がわかります。「イベント発生した訪問というのはこういう傾向があるのか！」「では、それに近づけるには・・・」と、仮説をたて検証します。

・ユーザー＞モバイル＞サマリー
（スマホ、PC、タブレットの割合がわかります）

・集客＞すべてのトラフィック＞チャネル
（ソーシャルからなのか検索からなのか、訪問の分類がわかります）

・ユーザー＞キャンペーン＞オーガニック検索トラフィック
（Yahoo!などでの検索キーワードがわかります）

・ユーザー＞行動＞サイトコンテンツ＞すべてのページ
（人気ページがわかります）

・ユーザー＞行動＞サイトコンテンツ＞ランディングページ
（1番最初に見た見はじめのページがわかります）

これらのメニューをたどりデータを俯瞰（ふかん）しますと、イベント発生した訪問の傾向がわかります。逆に、イベントが発生していない（含まない）セグメントを作り、比較します。

すると、両者の違い（ギャップ）がわかり、ではそのギャップを埋めるにはどういう施策があるのか、もしくはそういうギャップを埋めている成功事例はないかな、と探せるわけです。

サイト改善の第一歩は課題を認識し、そのギャップを埋めるための施策や仮説を考え、それを実行し試すほかありません。そのときに、セグメント機能はとても役立つのです。

分析4:行動フローでページ閲覧とイベントを掌握する

これはしっかりと設計しないと効果がありませんが、Googleアナリティクスでは、ページビューとイベントを同時に分析するメニューがあります。それが行動フローです。ページを指定しますと、そこで発生したイベントと次のページへの遷移などをビジュアル化してくれます。

たとえば、上図ではスクロールとクリックをイベント検知していますが、クリックしてもらうのにスクロール量は40%程度でも良いことがわかります。ページによって差異はあるかもしれませんが、傾向をざっくりとつかむには重宝します。

イベントトラッキングのメリット・デメリット

イベント計測をするメリット

イベントトラッキングは、ページビューだけでは取れないデータを取れるところが最大の魅力です。また、クリックに限らずさまざまな動きを検知させれば、汎用的な変数としても利用できることも人気となっています。保存できる情報に日本語や、長い文章まで入れられるなど、その使い勝手の良さが評価されています。

・タグに1行入れるだけで計測が始められる。
・カテゴリー、アクション、ラベルと値、という最大3階層まで情報設計が可能。
・ページビューに影響を与えること無く計測が可能。
・Googleアナリティクスの初期の頃から存在するため周辺情報も豊富で扱いやすい。
・PV以上のことを知ることができるので、ちょっと嬉しい。
・コンバージョンに設定可能なため、たとえばクリックをゴールにして運営が出来る。

あまり期待してはいけないところ

ですから、デメリットは前述のメリットのほぼ裏返しがそれに当たります。

・あえて実装しないといけない。またはコーディングの権限やスキルが必要。
・タグに直接書くと、命令が変わったときには再び書き換える手間が発生。
・多くのことがわかるが、それをどうアクションにつなげるのかなど設計や準備が必要。
・1セッション内でPVやイベントを含むヒット数上限が500を超えると計測不能になる。
・ノンインタラクション設定をミスすると直帰率などに影響してしまう。
・標準メニューからはコンバージョンとの関連性を追えない。

ヒット上限がある

＞＞Google アナリティクスのデータ収集上限 – Google アナリティクス Google Developers

上記リンクはアプリSDKのドキュメントですがウェブトラッキングでも同様です。PVを含め500ヒット（ヒットとは、Googleアナリティクスに対して何らかのデータ送信をすることを指します）と言いますと、問題無さそうに見えます。

いっぽうで、10秒おきにページ表示位置を把握して、スクロール量を測るなどといったイベント検知では、すぐに上限が来てしまうでしょう。

500を越えますと、ほんとうに計測されなくなります。超焦ります。その解除期間が明記されていないのですが、すぐには復活しませんでした。ですので、上限を超えることは絶対に避けるべきです。

CVとの相関はメニューからは簡単にわからない

Googleアナリティクスでは、行動＞イベント＞上位のイベント というメニューから、どういうイベントが発生したのかがわかります。ただ、そこには、目標完了数の指標は出ないんです。eコマースであればその画面内ですぐに関連性がわかるのですが、なぜか出ません。

じつは、これはイベントがコンバージョンはひも付けされないために起こる現象です。

イベント自体をコンバージョンとして設定をすることはもちろん可能です。しかし、このクリックがCVにどれくらい影響したのか、といった関連性を見るには、前述のようにセグメントを作るなど、じつは一手間必要になります（そのイベントでセグメントをつくって絞り込んで見るなど）。

イベントは実装は簡単ですが、その活用はしっかりと設計をしませんと、「たしかにたくさんクリックされてるね！」など、分かった気になって終わりということになりかねません。使いどころをしっかり考えて実装しましょう。

参考図書と関連リンク

イベントトラッキングはそもそも設置から仕込みをしないといけません。また、実装は簡単でも、それをどう役立てるのか、というところは経験から学ぶことが重要です。簡単に取れるからといって、多くのイベントを取ることに終始していては本末転倒です。

以下の書籍や関連情報を参考に、あなたなりのイベントテクニックを磨いてください。

イベントトラッキングは仕込んでからがはじまり

また、今後イベントトラッキングの新機能や事例などがありましたら、こちらに追加していきますね。

お楽しみに！

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

イベント変数ともいう。

Post Views: 810