グーグルアナリティクスで外部リンクを全て自動的にイベントトラッキングする設定方法
公開日:2013年11月5日 更新日:2016年1月15日

グーグルタグマネージャーの機能を使って外部リンクのクリックしたイベントを全てトラッキングする設定方法です。本記事の設定をすると、どのページのどの外部リンクがクリックされたか計測する事ができます。
Javascriptの記述など無しで簡単に同じ様な設定ができるようになりました。
超簡単に外部リンクを全てトラッキングするグーグルタグマネージャーの設定
さらに追記:2015/1/28
上記の超簡単な方法は画像のaltが取得できないので、結局当記事の方法に戻しました。
さらに追記:2016/1/15
久々にタグマネージャーの管理画面にログインしたら以前と全く違うUIになっていて驚きました。デザインだけではなくいろいろと仕様も変わったみたいで、本記事の方法はもうできなくなってました。
取り急ぎ必要だったので下記のサイトのとおりに設定し、無事導入できました。
グーグルタグマネージャーの機能を使って外部リンクのクリックしたイベントを全てトラッキングする設定方法です。
イベントトラッキングというのは、サイト閲覧者がスクロールしたりクリックした事を取得するってことですが、今回は外部リンクをクリックした時のイベントをトラッキングする方法についてです。
本記事の方法だとリンクごとにonclickの記述をしなくても、全ての「外部リンクがクリックされた情報」を取得できます。(以前設定したonclick〜の記述は無視されます)
参考:
Googleタグマネージャに自動イベントトラッキング機能が登場
Googleタグマネージャに新しく追加されたマクロ「カスタムJavaScript」
アユダンテ様 様々です。
タグマネージャーでイベントがトラッキングできてなかった
当ブログでは、10月の下旬からグーグルタグマネージャーを使い始めたのですが、数日してからイベント情報がトラッキングできていないことに気がつきました。
最近ではリンクごとに「onclick=”_gaq.push([ ‘_trackEvent’,〜〜」を設定するのが面倒で、イベントトラッキングしてもしてなくてもよかったのですが、使えるはずの機能が作動してないってのも気持ちが悪いので、この度トラッキングするようにしました。
グーグルタグマネージャーの設定
http://www.google.co.jp/tagmanager/
グーグルタグマネージャーについて最初から書くと長くなりますので端折ります。
下図のようにbody直後にタグが貼ってある前提で進めます。
【参考までに】PVやユーザー数などを計測する設定
タグマネージャーを使っているなら、既に設定済みだと思います。
「すべてのページでページビューをトラッキングする」というタグです。イベントトラッキングとは直接関係ないのですが、念のため確認まで。
【タグ設定1】リンククリックリスナー
ここからイベントトラッキングに関する設定です。
画面上部の「新規タグ作成」をクリック
タグの種類を「イベントリスナー」の中の「リンククリックリスナー」にします。
配信のルールは、デフォルトで用意されている「すべてのページ」で。
このタグ名は、他のタグやマクロに影響ないので何でも良いです。
【マクロ設定1】自動イベント変数
マクロタイプは「自動イベント変数」、変数タイプは「要素」です。「要素URL」ではありません。
マクロ名は何でもいいのですが、他のマクロで使うので個人的には半角英数で付けました。【マクロ設定2】をコピペで済ますために「vari-element」にしといてください。
【マクロ設定2】カスタムJavaScript
これは「何というテキストがクリックされたか?」を取得するマクロです。
どのページでイベントが発生したかは、デフォルトのマクロで取得できますが、「ページ内のどのテキストが」については、これが無いとわかりません。
マクロのタイプは「カスタムJavaScript」
カスタムJavaScriptの内容は、特にアユダンテ様 様々です。
Googleタグマネージャに新しく追加されたマクロ「カスタムJavaScript」のものを使わせていただきます。(3行目だけ当方で修正)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
function(){ // ---- 初期化 var linkElement = {{vari-element}}; // 【マクロのタイプ:自動イベント変数】【変数タイプ:要素】で作成したマクロを読み込み var linkText = ''; // 返し値格納用変数 // ---- テキスト要素の抽出(3階層まで子要素をドリルダウン) for (var i = 0; i < linkElement.childNodes.length; i++){ if(linkElement.childNodes[i].nodeValue != null && linkElement.childNodes[i].tagName != 'img'){ linkText += linkElement.childNodes[i].nodeValue; }else if(linkElement.childNodes[i].tagName != 'img'){ linkText += linkElement.childNodes[i].getAttribute('alt'); }else{ for (var j = 0; j < linkElement.childNodes[i].childNodes.length; j++){ if(linkElement.childNodes[i].childNodes[j].nodeValue != null && linkElement.childNodes[i].childNodes[j].tagName != 'img'){ linkText += linkElement.childNodes[i].childNodes[j].nodeValue; }else if(linkElement.childNodes[i].childNodes[j].tagName != 'img'){ linkText += linkElement.childNodes[i].childNodes[j].getAttribute('alt'); }else{ for (var k = 0; k < linkElement.childNodes[i].childNodes[j].childNodes.length; k++){ if(linkElement.childNodes[i].childNodes[j].childNodes[k].tagName != 'img'){ linkText += linkElement.childNodes[i].childNodes[j].childNodes[k].nodeValue; }else{ linkText += linkElement.childNodes[i].childNodes[j].childNodes[k].getAttribute('alt'); } } } } } } // ---- 値の取得 return linkText; // リンクに含むテキスト要素を全抽出 } |
マクロ名は上記設定1と同様、何でもいいのですが、個人的に半角英数。
【ルール設定1】外部リンククリック
条件を指定します。
1つ目 「{{event}}」を選択、「等しい」を選択。テキスト記入欄に「gtm.linkClick」。
2つ目 「{{vari-element}}」を選択、「前方が一致」を選択。テキスト記入欄に「http」。
3つ目 「{{vari-element}}」を選択、「含まない」を選択。テキスト記入欄に’自分のドメイン’。
ルール名は何でもいいです。個人的には半角英数で付けたいのですが、何でもいいので「外部リンククリック」と全角で付けてみました。
【タグ設定2】グーグルアナリティクス 外部リンク計測
最後にグーグルアナリティクスタグの設定です。ページビュートラッキングとイベントトラッキングは別のタグになります。通常のアナリティクスの仕様から考えると馴染めない感じですが、そういうものらしいです。
タグの種類「Googleアナリティクス」。
ウェブ プロパティ IDは「UA-xxxxxxxxxxx-n」というお馴染みのIDです。
リマーケティング云々のチェックは「無し」で(PVトラッキングでチェックしとけばいいです)
トラッキングタイプ「イベント」
イベントトラッキングのパラメータ
各自で自由に決めていただいていいのですが、当ブログの場合は、
カテゴリ「click」
操作(アクション)「external」
ラベル「{{url path}} | {{get-click-text}}」
としました。
カテゴリについては、今後「scroll」など追加するかもしれませんし、アクションには「PDF-DL」など追加するかも知れませんので、このようにしました。
そしてラベルで「どのページのどのテキスト」というイベントを取得します。
「{{url path}}」はデフォルトで用意されているマクロです。URLのドメインより下の部分を取得します。
「{{get-click-text}}」はマクロ設定2で作成したマクロです。
私の場合2つのマクロの間に「 | 」(スペースと縦棒)を入れてます。
配信ルール
先ほど作ったルール「外部リンククリック」にします。
タグ名は何でもいいです。
バージョンの作成と公開
グーグルタグマネージャーの基本的な事になりますが、タグやマクロを作成してもそのままでは自分のサイトに反映されません。
なので、タグやマクロを作成したら「バージョンの作成」をクリックします。
で、バージョンを作成しただけでもサイトに反映されないので、「公開」をクリック。
キャッシュ系のプラグインやCDNなどリセットしたりもしてみてください。
通常数十秒もあれば、新しいバージョンは反映されます。(たまに遅い時があったけど)
何が原因かわからないけど、普通のPV計測もできなくなってしまったといった場合は、バージョンを戻せば元に戻ります。グーグルタグマネージャーは、特にバックアップを意識しなくてもバックアップされていますので、以前のバージョンを選択して公開するだけで元通りです。
トラッキングしたイベントデータ
トラッキングデータはグーグルアナリティクスで確認できます。
イベントラベルをクリックすれば、上図の様に「ページパス | クリックされたテキスト」が記録されてます。画像のクリックはaltが入るようです。
グーグルタグマネージャーによる外部リンクを全てイベントトラッキングする方法については、以上です。
URLを間違えたことに、公開してから2カ月経って気がつきました。
「/event-tracking-all/」にしたかったけどもういいか。
カテゴリー:webマーケティング » マーケティングツール
作成者:けん