＜この記事はこんな方が対象です＞
・GoogleAnalyticsのイベント計測がどんなものか分かる
・Googleタグマネージャーを使ったことがある

---

イベントの計測には、Googleタグマネージャー(GTM)を使うととっても楽ですよね。

今回はこのサイト、Tips Noteにイベントを設定してみようと思います。
https://www.tam-tam.co.jp/tipsnote/

前提条件
・記事のURLは以下のルールで統一されている。カテゴリの指定は必ずされている。
https://www.tam-tam.co.jp/tipsnote/（記事のカテゴリ）/（記事ID）.html
・投稿日、著者の記述は必ずある

どの記事の外部リンクが押されているのか知りたい

という要望があったとします。

どの記事の/外部リンクが/押されている（クリックされている）　という３つの要素になります。

↓↓レポートで見るにはどういうデータの作り方をしたら良いか↓↓

・どの記事か判別するためのユニークな要素は何か→ URL、投稿日など
・クリックされた外部リンク→ リンク先のURLがhttp://www.tam-tam.co.jp/以外

簡単に設定するとこう

イベントカテゴリ	TIPSNOTE_外部リンククリック_例
イベントアクション	リンクがクリックされたURL GTMで用意されている変数 {{Page URL}}
イベントラベル	リンク先の外部URL GTMで用意されている変数 {{Click URL}}

※トリガーでは「www.tam-tam.co.jpを含まないリンククリック」を指定しています

GTMでのイベント設定画面はこんな感じ

レポートに上がってくるとこんな感じ

これでも取りたい情報は取得できていますが、数が多いとちょっと分かりにくいですね。
レポートを見たときに、「記事のカテゴリ」「著者名」「投稿日」がパッと分かるといいかもしれません。
今回GTMで用意されている変数では欲しいデータが取れないため、ユーザー定義変数を設定します。

ゴールはこう

イベントカテゴリ	TIPSNOTE_外部リンククリック
イベントアクション	「記事のカテゴリ」「著者名」「投稿日」 例：javascript_kanke_2015.08.05
イベントラベル	リンクを指定しているテキスト 例：XXX オフィシャルサイトはこちら （{{Click URL}}のままでも良かったのですがせっかくなので変えてみました）

URLからカテゴリを、HTMLから著者名と投稿日を取得していこうと思います。

1.現在のURLを取得し、そこからカテゴリ部分を抜き出す

取得できるもの：「記事のカテゴリ」
使うもの：カスタムjavascript

記事のカテゴリがURLに必ず入っているので、URLから抜き出します。
URLのルールは以下
https://www.tam-tam.co.jp/tipsnote/（記事のカテゴリ）/（記事ID）.html

この（記事のカテゴリ）の部分を取得します。
変数-ユーザー定義変数-新規で「カスタムjavascript」
以下のJavascriptを入力

function(){
var $dir = location.href.split("/");
var $dir2 = $dir[$dir.length -2];
return $dir2
}

一度現在のURL（全体）を取得し、length -2のところでディレクトリを指定します。

もしURLが以下のようなルールであれば、後ろから3つ目のところを取得するので、length -3となります。
https://www.tam-tam.co.jp/tipsnote/（記事カテゴリ）/（著者ID）/（記事ID）.html

※カスタムjavascriptでは[return ***]のように値を返さないとデータが取得できません

これで変数「カテゴリ名を取得」にはカテゴリ名が入りました。

2.DOMから著者名を取得する

取得できるもの：「著者名」
使うもの：DOM 要素

著者は各記事に必ず入っており、HTMLだとこの部分になります。

変数-ユーザー定義変数-新規で「DOM 要素」
要素セレクタを指定します（クラス名のとき.を忘れずに！）

これで変数「著者を取得」には著者名が入りました。

3.DOMから投稿日を取得する

取得できるもの：「投稿日」
使うもの：DOM 要素

投稿日も各記事に必ず入っています。

変数-ユーザー定義変数-新規で「DOM 要素」

これで変数「投稿日取得」には投稿日が入りました。

---

変数の設定が完了したので、トリガーでは「www.tam-tam.co.jpを含まないリンククリック」を指定し、
タグを作成します。タグの名前は「TIPSNOTE_記事内外部リンククリック」とします。

タグ-新規-トラッキング タイプ「イベント」

アクションには先ほど作成した３つの変数を入力します。
{{カテゴリ名を取得}}{{著者を取得}}{{投稿日取得}}

タグを設定したら、GTMのプレビューで確認します。

記事の中の外部リンクをクリックすると……

「TIPSNOTE_記事内外部リンククリック」のタグの発火が確認できました。

無事動いているので、GTMの公開をし、GoogleAnalyticsのほうでレポートを確認します。

レポートに反映されました。

このようになっていますね。

イベントカテゴリ	TIPSNOTE_外部リンククリック
イベントアクション	「記事のカテゴリ」「著者名」「投稿日」 例：javascript_kanke_2015.08.05
イベントラベル	リンクを指定しているテキスト 例：XXX オフィシャルサイトはこちら （{{Click URL}}のままでも良かったのですがせっかくなので変えてみました）

＜変更前＞

↓　↓　↓

＜変更後＞

変更後のほうがパッと見でわかりやすくなった気がします。

---

※今回はトリガーに「www.tam-tam.co.jpを含まないリンククリック」を設定し、すべての外部リンクを対象にしていますが、
特定のサイト(AAA.com)への遷移を測りたい場合には「AAA.comを含むリンククリック」と設定します。

---

イベントで指定できるのはカテゴリ/アクション/ラベルと項目が限られていますが、
内容が組み合わせを工夫することによって使いやすいデータにすることができます。

Googleタグマネージャーを使うと手軽にデータの取得ができるので、必要があるときはユーザー定義変数などを使用してレポートを見やすくしていきましょう。