【2016年】Google タグマネージャーでイベントトラッキングをアクセス解析用に設置する方法

web制作

読了の目安時間: 620

GTM-top

ブログサイトを運営し始めて、はや1年半。

「・・・そういや、クリック関連の解析ってなんもしてなかったな・・・」

web屋としてあるまじき愚行ですね。

ということで、今回の記事では、本ブログサイトにGoogleタグマネージャーでイベントトラッキングを設定した時の具体的な方法をまとめてみました!

Googleタグマネージャーでイベントトラッキングを設定する方法

まずは作業の全体像を把握しよう

今回の作業では、自分が管理しているGoogleタグマネージャー(GTM)のうち、本ブログサイトと紐づいているコンテナに、新たに「イベント解析用のタグ」を設定し、「すべてのページにおいてクリックされたリンクの情報を解析できるようにすること」が目的です。

GTM00

なお本記事では、Googleタグマネージャのアカウントを持っており、またGoogleアナリティクスとの連携を終えている前提で話を進めていきますので、Googleアナリティクス・Googleタグマネージャーをまだ使ったことがない人は、まずは導入・設定するところから始めてください。

Google タグマネージャとは
一言でいえばウェブサイト解析用のコードを一元管理するツールです。Googleタグマネージャーのトラッキングコード一つをウェブサイトに埋め込んでおくことで、ウェブサイト側のソースコードを一切いじらず、Googleタグマネージャー側の操作だけで、さまざまなアクセス解析を可能とします。一番の強みは、ページ数が何百以上あるような大型ウェブサイトを運営する時でも一元管理できて、KPI達成・導線設計の情報集めができるため、web制作者には必須のツールとして知られています。

1.まず最初に、イベント解析に必要な変数を設定しておきます

Googleタグマネージャーのトップページを開いたら、イベント解析用のタグを設定するコンテナを選択します。

GTM0

コンテナを選択したら、左側サイドメニューの「変数」項目から、有効な組み込み変数を表示し、必要な項目をONにしておきましょう。(使うモノだけでもOKですし、下図をONにしておけばとりあえずOK。)

GTM1

2.Googleタグマネージャーのコンテナに「イベント解析用のタグ」を設定していきます

左側サイドメニューの「タグ」項目を選択すると、自分の管理しているタグが一覧表示されます。下図では、過去に作成していたGoogleAnalyticsのページビュー解析用のタグが表示されています。イベント解析用のタグ作成では、このタグをベースにしたほうが早いので、コピーします。

GTM2

コピーをするためには、タグ名をクリックして、表示される詳細内容のうち、ウィンドウ右下の「コピー」ボタンを押せばOKです。

GTM3

ほとんど画面に変化が起きないので分かりにくいですが、タイトルのところに「~~~のコピー」という表示がされたら、これでコピーはできています。さっそく編集していきましょう。

GTM4

タイトル名を「kiyotatsu_blog_UA_click_affiliate」に変更し、プロダクトを「Googleアナリティクス」のまま、タグの種類を「ユニバーサルアナリティクス」のままで、「タグを設定」を下記のように設定していきます。

GTM5

カテゴリ:link_click
>イベントのカテゴリ名を指定。(自由に決めて良い)

アクション:{{Page URL}}
>リンクをクリックしたアクションがどのページで起きたか表示。

ラベル:{{Click Text}}{{Click URL}}
>どのリンクをクリックしたか表示。(対象aタグのテキストとURL)

配信するタイミングは、クリックを選択します。すると、トリガー作成の画面がポップアップ表示されますので、「イベント解析用のトリガー」をひきつづき作成します。

GTM6

3.イベント解析用のトリガーを作成する

「イベントを選択」では「クリック」を選択します。

GTM_tri1

「トリガーを設定」では、ターゲットを「リンクのみ」にして、下図のように設定します。
GTM_tri2

「有効化のタイミング」は、この今現在制作中のトリガーを含む「タグ」が有効になる条件を指定します。条件には、「Page URL」、「Page Hostname」、「Page Path」等の指定ができます。今回は本ブログサイト「http://kiyotatsu.com」のディレクトリ階層化にある全ページでタグが有効になるようにしたいので、下記のように正規表現を入力します。
GTM_tri3

「配信するタイミング」では、「タグ」が有効になっている条件下におけるフィルタ条件を作成できます。計測を一部のページや一部のリンクだけ実施したい時は、ここでフィルタ条件を設定できますが、今回はとくにフィルタをしないので、すべてのクリックを選択します。
GTM_tri4

入力が終わった後、「トリガーを作成」ボタンをクリックすると、「トリガー名」を聞かれますので、好きな名前を入力します。今回は「クリック解析用トリガー」と命名しました。これでトリガーの完成です。
GTM_tri5

4.作成したトリガーを埋めて、タグ完成

トリガーの完成後、タグ画面に戻ります。「配信するタイミング」の「クリック」と「トリガー」が反映されたら設定終了ですので、画面下部の「タグを作成」ボタンを押して「イベント解析用のタグ」を完成させましょう。
GTM7

「タグ」のページに戻ると、タグが新規に作成されていることが分かります。しかし、まだ保存されているだけの状態なので、使うためには画面右上の「公開」ボタンを押します。
GTM8

今すぐ公開を押します。
GTM9

これで「イベント解析用のタグ」完成です。
GTM10

さっそくGoogleアナリティクスと連動して解析されているかどうか、確認してみよう!

Googleアナリティクスを開き、すぐにイベントを確認したいので、「リアルタイム>イベント」をクリックしてアクティブユーザーの情報を見ましょう。すると、さっそくリンクをクリックしてくれている人がいました。
GTM11

イベントカテゴリをクリックすると、イベントアクションとイベントラベルの詳細が確認できます。下図の場合、http://kiyotatsu.com/pcinfra5/のページ下部にあるテキストリンク「「WinSAT Viewer」・・・WEIの出力結果xmlを視覚的に表示してくれるサイト」をクリックした計測結果が反映されていることになります。
GTM12

翌日以降はデータが集計されるので、「行動>イベント>サマリー」から全体のイベント結果を確認することができます。

関連・参考リンク

タグの一括管理ができる!Googleタグマネージャの使い方

リンクのクリックをGAで計測するのも簡単! タグマネージャの「イベントリスナー」の使い方(全20回の15)

新しくなったGoogleタグマネージャ(GTM)でイベントトラッキングを設定する(前編)

まとめ

いかがでしたでしょうか。今回の作業を通すと分かりますが、Googleタグマネージャーの最大のメリットは、ウェブサイト側の操作をせず、Googleタグマネージャー側の一元操作だけでウェブサイト全体の解析ルールを作成・実行できることです。どんなに大規模なサイトであろうと集計できますので、まだ使ったことのない方は、ぜひ使ってみてください。解析なしにはウェブサイトの改善は見込めませんので、メリットは計り知れないものです。(自分は今の今まで導入していない体たらくぶりですが・・・。)

今読んだ記事をシェアする

GTM-thumb

【2016年】Google タグマネージャーでイベントトラッキングをアクセス解析用に設置する方法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。