クリック計測できない！そんな人は、この記事を読めばすっきり納得できます。
こんにちは、GTM好きのカグア！です。
みなさんはGoogleタグマネージャを使っていますか。わたしは最近がっつりとはまっていて、とても便利に使っています。いっぽうで、クリック計測や電話コンバージョンが計測できない、という声が聞かれます。
そこで本記事では、Googleタグマネージャを使ったクリックイベントを計測する方法を解説します。なお情報は2016年4月時点でのものです。
最新バージョンでの解説、プレビューモードで変数を確認しながらの設定と、あまり出回っていない情報を可能なかぎり具体的に書きました。とくにプレビューモードは理解していただけますと、後半の実践編で紹介した手順を、自分なりの設定に変更するなど応用がきくようになるかと思います。
GTMを未実装という方は、ぜひこの機会に入れてみてください。楽しいですよ！
追記：2016年4月14日 コンソールと全クリックトリガーの話を加筆しました。
関連記事
＞＞Googleタグマネージャでクリック計測とクロスドメイン設定
＞＞Googleタグマネージャに予め設定しておくと便利な変数12本
＞＞Googleアナリティクス応用：GTMで日ごとに変えるバナーA/Bテスト
＞＞WordPress記事の複数タグをGoogleアナリティクスのeコマースで集計
この記事の目次
Googleタグマネージャでクリック計測しよう
Googleタグマネージャの基本
Googleタグマネージャをサイトに入れてない人は、早速登録して、タグ（正確にはコンテナタグ）をホームページのBODYタグ直下にいれましょう。
＞＞Google タグマネージャ公式サイト
Googleタグマネージャのタグは入れただけでは、何も機能しませんので安心してください。Googleアナリティクスのトラッキングコードがすでに貼ってあるサイトに併記しても全然問題ありません。コンテナタグ単体では、機能しないのですね。
Googleタグマネージャが動く仕組み
上図のように、Googleタグマネージャでは、タグ・トリガー・変数という設定項目があります。これらを設定していくことで、稼働するタグを増減できます。また全てを設定する必要はなく、最低限はタグとトリガーです。
例えばこんな感じ。タグに「Googleアナリティクス」、トリガーに「全てのページ」として、画面右上の「公開」ボタンをクリックしますと、タグを貼り付けた全てのページでGoogleアナリティクスが稼働（発火）するようになるのです。そして、トリガーをタグから外してしまえば、稼働しなくなります。
これらのことをすべてGoogleタグマネージャの管理画面内で出来てしまうのです。ですから、稼働中のサイトでも運営者が能動的にタグ管理をすることができます。
クリック計測には2種類ある
Googleタグマネージャには、2種類のクリック計測のためのトリガーが用意されています。
これらのトリガーにクリックを検知させ、あとはコンバージョンタグやGoogleアナリティクスのイベントトラッキングのタグなどを発火させます。
クリック計測トリガー
すべてのクリックを検知しトリガーにできます。便利な分、多くのクリックを取るため、発火のための識別をさせることが面倒。
リンククリック計測トリガー
Aタグなど、リンクのクリックにのみ反応するトリガー。リンクがないところに設定ができないぶん、簡易に設定が可能。
かつては、クリックリスナーという設定が必要だったのですが、GTMを使いますと、簡単にクリックイベントの常時監視をしてくれるのです（リスニングしてくれる）。そして、発生したイベント（挙動）を、gtm.click、gtmlinkClickなどと分類し、そこから様々な動きに連動させることができます。
便利ですね！
クリックがなぜ計測できないのか
クリックがなぜ簡単に計測できないのか。それは、クリックした時に得られる情報が、デザインによって変わるからです。
上図のように、現在のホームページではさまざまデザインのリンクがあります。さらにスマートフォンなどで、画面上部や下部にずっと止まっているホバータイプや、アコーディオンなど・・・。それら全てで取得できる情報が異なるため、一意に設定してどれもうまくいく、ということはありえないのです。
リンクの数だけクリック計測設定＝クリックトリガーが必要、くらいに思ってちょうど良いくらいです。
それでは、順をおって説明していきましょう。
基礎編：リンククリック計測の設定
まず、もっとも基本となるリンククリックのトリガーを設定してみましょう。<ahref="/index.html”>クリック</a> といったベーシックなAタグでのリンクとなります。
設定は以下のようになります。このトリガーを使って発火させれば、そのリンクのクリックを計測することができます。
それでは、個別に解説していきましょう。
トリガーを設定
クリック計測のトリガーには２種類あります。Aタグのようなリンクに絡むクリックを計測する「リンククリック」。もう一つは、全てのクリックイベントを計測できる「クリック」です。
待ち時間があるのは、リンクの場合、通常は次のページに遷移するわけです。つまり、いまそのページのコードがすっ飛ばされてしまう可能性があるわけです。ですから、ウェイトを入れて、トリガーによって発火したタグなどをちゃんと機能させてからページ遷移してね、という意味になります。
デフォルトでは、まあ２秒（２０００ミリ秒）もあればいいよね、となっているわけです。
有効化のタイミング
そもそも、このトリガーがどのタイミングで使えるようになるのか、という意味。
すべてのページで有効化させたい場合は、PageURLで全て・・・という設定はないため、正規表現でいう「全て＝.*」を指定しています。
PageURLは、http://～から含むアドレス、PagePATHにすれば、ドメイン配下からのURLになります。どちらもで良いと思います。
なお、「.*」というのは、.（ピリオド）＝どんな文字、が、*（0文字以上）＝何文字でも、あればマッチする、という意味なので、結果としてどんなURLでも有効化し、つまり「すべてのページ」で有効化されます。
配信するタイミング
有効化がされても、最終的にタグを発火させるきっかけとなるのが、こちらの設定です。
「すべてのクリック」を選びますと、すべてのリンククリックに反応します。
「一部のクリック」としますと、条件指定が出来ます。たとえば、リンク先のURLに「kagua.biz」が含まれていたら発火させる、という場合には以下のように設定します。
ただし、この「Click URL」ですが、あらかじめ変数メニューでチェックをしてオンにしておくことが前提ですので注意してください。
変数とは
変数とは、タグやトリガー、またはタグからも呼び出して、値を取得できる簡易プログラムのようなものです。以前のバージョンではマクロと呼ばれていました。
プログラムさえ書かれていれば、変数はさまざまな値を返してくれます。また、広く使われるであろう値取得のプログラムが用意されていて、それが前述のClickURLなどです。
つまり、前述のトリガーでもその値を利用できるようにしておかないと、ClickURL内のデータを識別に使えないわけですね。
クリック計測トリガー確認時の注意事項
リンククリックのトリガーを確認するときは注意が必要です。
操作は、プレビューモードで、タグの発火状況を確認します。
しかし、リンクの場合、確認しようとしてクリックしますと、そのページヘ遷移してしまいます。つまり、正常動作かどうかの確認情報が見られないのです。
ですから、リンククリックトリガーの確認をする際には、[CTRL]+クリックなどして、次のページが別タブなどで開いて前のページが、残るようにして確認しましょう。
上図のように、gtm.linkClick という動作が記録されていればOKです。じつは、リンククリックトリガーというのは、このgtm.linkClickを検知するトリガーなのです。
リンククリック計測のまとめ
・基本的なAタグのクリック計測であれば、リンククリックトリガーが便利。
・標準的な設定をひな形として覚えてしまおう。
・配信のタイミングで変数を使う。予めオンにしておこう。
あとは、トリガー名なども増えそうであれば、接頭詞をつけるなど（例：01_トリガー）して、探しやすくしておくと良いでしょう。
ですから、手順をまとめますと以下のようになります。
リンククリックトリガーを使ったクリック計測
1.変数をClickURLなど一通りオンにしておく
2.トリガー新規作成
3.リンククリックを選び、デフォルトの設定を進める
4.有効化：PageURL「正規表現」.*
5.配信のタイミング：発火させたいタイミング
6.トリガー保存
7.タグを新規作成し、2で作ったトリガーを発火条件に指定する
8.タグ保存
9.プレビューモードで確認
10.完成（プレビューモードの終了）
このようにして、Aタグなど基本的なクリック計測がGoogleタグマネージャで行えるようになります。
重要：クリック計測にはプレビュー確認が必須スキル
クリック計測は、そのクリックの後にコンバージョンタグを発火させるなど、クリックと何かを連携させたい目的でつくるはずです。たとえば、前述のリンククリックトリガーでは、「ClickURLでリンク先のURLが取得できる」ということが実は前提でした。ClickURL変数で、じつはリンク先のURLが取れないこともじつはあるのです。
つまり、クリック計測では、そのクリックで、一体どういう値が取得できるのか。それがわかっていませんと、じつは適切な設定ができないのです。その確認方法は以下です。
1.プレビューモードにする
トリガーとタグを作成したら、プレビューモードにします。
2.[CTRL]+クリックしてみる
トリガーが反応するであろう箇所をクリックしてみます。
3.gtm.linkClickとVariablesをクリック
ここで、クリック時に何が取得できているのかという情報を確認できます。
リンククリックであればgtm.linkClick、クリックであればgtm.Click を選びます。その上でVariablesを選びますと、変数と取得されたデータの中身が一覧されます。
ここで仮に、ClickURLで、リンク先のURLが取得できていなければ、他の方法を考える、となります。
じつは前述のリンククリックトリガーの解説では、まず導入の容易さをお伝えするために、あえてこの確認作業を省いていました。しかし、クリック計測は奥が深く、思った通りに取れないことも多いのです。そのときに、この確認方法を使い、そもそもどんな値が取得できているのか、ということを調べ、条件指定に使うことになります。
実践 Google タグマネージャ入門 増補版 | 畑岡 大作（アユダンテ株式会社）
応用編：クリックすべてを計測する設定
Aタグ以外のすべてのクリックを計測できるトリガーを設定してみましょう。
トリガーを設定
すべてのクリックに反応させるトリガーは思いのほか簡単です。以下のようにすれば、すべてのクリックに反応します。
プレビューモードではgtm.Click
プレビューモードにして、リンクなど何もないところを試しにクリックしてみてください。左側のSummery欄にgtm.Clickが表示されるはずです。これが、全クリックを検知した証左です。
では、Variablesを確認してみましょう。ちゃんと取得できています。もちろん、Aタグなどのリンクをクリックしてもちゃんと反応します。
取得できている変数を確認
たとえば、リンククリックなども、[CTRL]+クリックをして確認してみましょう。上図のように、ClickURLもクリックトリガーでも取得できていることがわかります。
ClickURLの指定例
ですから、リンククリックトリガーでなくとも、上記のようにクリックトリガーでも、ClickURLを検知させた発火は「可能」です。ただ、これはじつはケースバイケースです。
クリックトリガーも万能ではない
クリックしたい箇所のデザイン表現は、増える一方です。
・テキストリンク
・画像リンク
・マウスオーバーで画像が切り替わる画像リンク
・リンククリックしてもページ遷移はせずアコーディオン表示
・スマホ画面の下につねに表示される画像
・クリックしている箇所がじつはiFrame内で別ドメイン
上記以外にも多くのクリックパターンが存在し、それら1つ1つで取得できる情報が異なるのです。たとえば以下では、はてなブックマークボタンをクリックしていますが、ClickURLには何も入っていないことがわかります。
クリックの検知自体はできるものの、必要なデータを取得できるかどうかは、やってみないとわからないのですね。これがクリック計測の奥深いところ、難解なところとなっています。
クリックトリガーのまとめ
・トリガーで「すべての要素」「すべてのクリック」とすると全クリックが検知できる。
・「すべての要素」トリガーは、リンク以外の全クリックを検知可能。
・プレビューモードでは、gtm.clickを見る。
・クリック検知と情報取得はまた別。
・プレビューモードで、Variablesで取得できている変数の中身を確認する。
クリックトリガーは全クリックをとりあえずは全検知してくれます。ただ、そこで必要な情報を修得できているかどうかをプレビューモードで確認し、発火条件を指定します。
逆に考えれば、全クリックトリガーで取得できる情報をいったん調べておき、その上でクリックトリガーに条件指定するのか、リンククリックトリガーを使うのかなどを判断しても良いと思います。
実践編：クリック計測の実際の手順
・「電話をかける」ボタンクリックでコンバージョンとしたい。
・バナークリックをGoogleアナリティクスのイベントで計測したい。
ニーズとしては、上記のようなケースが多いのではないでしょうか。以下に実際にやってみましょう。順番はこのとおりでなくても構いません。
電話コンバージョンのクリック計測
0.電話コンバージョンの前提
クリック箇所は、テキストリンクで、<ahref="tel:03-xxxx-9999″>電話をかける</a> という記述。
1.コンバージョンタグの準備
GoogleタグマネージャでAdWordsのコンバージョンタグを作成。一旦はトリガーを設定せず先に保存。
2.変数をオンにする
ClickURLなどクリック関連を一通りオンにする。※ClickURLだけでもちろん構いません。
3.リンククリックトリガーを作成
トリガーを新規作成します。リンククリックトリガーを選び、以下の設定をして保存。
・有効化のタイミング PageURL「正規表現」.*
・配信のタイミング ClickURL「含む」tel:03-xxxx-9999
4.CVタグにトリガーオン
手順1のコンバージョンタグを再編集し、手順3のトリガーを設定します。
5.プレビューモードで確認
実際にタップしてみてタグが発火するか確認します。
左側の gtm.linkClickを選び、「Tags Fired On This Event」にコンバージョンタグが表示されていれば、発火OKです。電話コンバージョン計測のシグナルが送信されたことになります。
6.タグを公開
問題なければタグを公開し、プレビューモードを終了します。
バナークリックでイベントトラッキング
0-1.Click関連変数をオン
Googleタグマネージャの変数メニューにいき、Click関連の変数をすべてオンにしておきます。
0-2.変数で取得可能な値を確認
変数がデータを取得できているかどうかは、じつはタグを設定しなくとも確認が可能です。
ですから、まず前述の「全クリック計測」のトリガーをつくり、Click関連の変数をすべてチェックし、プレビューモードにします。
その上で、計測したいバナーをクリックしてみます。すると以下のように出ました。
ClickTextは「undefined」、ClickTargetは””(何もない＝null)となっていますね、これは条件指定には使えなさそうです。
いっぽう、ClickClassesやClickURLは、ちゃんと値が取得できていました。Classesは他でも使われている可能性があるので、ここではClickURLを使うことにしましょう。
1.トリガーの新規作成
前述の手順を参考にトリガーを作成します。banner.jpgをクリックしたら反応するようにしてみます。作成後、保存します。
2.イベントトラッキングタグの作成
タグメニューを選び、タグを新規作成します。Googleアナリティクスタグで「イベント」を選びます。ここで、手順1で作ったクリックトリガーを選びます。
上図のように設定し、保存します。
3.確認して公開
プレビューし、[CTRL]+クリックして、イベントっトラッキングタグが「Tags Fired On This Event」に出ていればOKです。
広告タグの設定と注意
Googleアナリティクスのイベントトラッキング以外でも、クリックと連携させたいトリガーを作れば、画像タップによる電話コンバージョン計測などにも使えます。
AdWordsはアドワーズタグがあります。Yahoo!など他の広告タグはカスタムHTMLに広告タグを貼り付けて使います。
Yahoo!などコンバージョンタグをカスタムHTMLに貼るときは、document.writeに注意をしてください。タグ内に、もしくはタグ内の.jsファイル先、いずれかにdocument.writeというくだりがあったら、「document.write をサポートする」にチェックをいれてください。
ただ、ここまでやってもうまく動作しないケースもあります。タグが多くなればなるほどその可能性が高まります。ここまでの手順はあくまで基本であって、ケースバイケースで対応していきましょう。
トリガーや変数にはフォルダ名を付けよう
フォルダといってもドラッグ＆ドロップで整理ができるわけではないのですが、少しでも分類しやすいようにつける目印みたいなものです。
たとえば、複数の代理店や担当者が絡むときは、各々が作ったタグやトリガー、変数にはそれらの名前のフォルダをつける、などというルールにしておくと良いでしょう。
コンソールも併用すると良い
前述のように変数として設定さえすれば、どういう値が取得できるのかということがわかります。
ただ、どうしてもそれで取得できない、もしくはそのためにあえて変数を作るのはどうか、というときに、わたしがよく使いますのはコンソールです。
コンソールとは、JavaScriptを使ってブラウザの内部的にデータを出力させることができる画面です。じつは、JavaScriptのプログラムなどでエラーがありますと、警告メッセージなどはここに表示されます。じつはここに、Googleタグマネージャを使って値を表示させることができます。
<script>console.log(location.href);</script>
カスタムHTMLにこのように入力します。その上で、タグをプレビューさせてみます。ブラウザでWindowsであれば[F12]、Macは[Command]+[Option]+[I]で、デベロッパーツールを出し、consoleを見てみます。すると、表示中のURLが表示されているはずです。
このように、表面上は影響しない場所に、内部で扱っているデータを確認できる箇所があるのですね。そこに表示させられるのがconsole.log();という命令なので、覚えておくと何かと便利です。
とりあえず「全クリック」
なので、わたしはよくとりあえず「全クリック」というトリガーを作って、どういう値が取得できるのか、という調査を行います。
ただ、それでも、リンククリックと取れる値が変わるケースもあるため、両方とも試して、うまく取れるほうを採用して、電話コンバージョンなどのトリガーを作ります。
ほら、こんなふうに取得できちゃう変数もつくれるんですよね。なので、クリックでどういう値が取得できるのか、という調査に「全クリック」トリガーは超便利なのでした。
関連情報リンク
クリックリスナーを詳しく知ることが次のステップ。
＞＞イベント リスナー – タグマネージャ ヘルプ
Googleタグマネージャはタグとトリガーと変数だ。
＞＞Googleタグマネージャの「三大要素」と公開の流れを押さえよう（全20回の3） | 実践 Googleタグマネージャ入門 | Web担当者Forum
GTMでプレビューモードなどデバッグ方法。これを使いこなせばGTM使いだ！
＞＞Googleタグマネージャ(GTM) タグ公開時のデバッグ方法 | UIDEAL
AdWordsのコンバージョンタグではIDなどを控えておけばタグは簡単にかけます。
＞＞AdWords コンバージョン トラッキング – タグマネージャ ヘルプ
YとGのコンバージョンタグ設定。
＞＞【Googleタグマネージャ】コンバージョンタグ設定 – 勝手にスマホサイトまとめ（ブログ）
クリックエレメントなど、どういう変数が使えるのかを知ることは重要。
＞＞トリガー – タグマネージャ ヘルプ
タグやトリガーは増えがち。命名ルールの提案。
＞＞Googleタグマネージャのタグやトリガーを分かりやすい名前で管理するコツ | Webコンサルティング/Webマーケティングのパワー・インタラクティブ
Googleタグマネージャで仮想ページビュー。トリガーの設定で例外を作るところなどがミソ。
＞＞URLが変わらないフォームをGoogleタグマネージャを使って正しく計測する設定 | Webコンサルティング/Webマーケティングのパワー・インタラクティブ
まとめ
クリック計測はじつはとても奥が深いテクニックです。ですので、複雑になりがちな手順を、なるべく具体的にわかりやすく書いたつもりですが、いかがだったでしょうか。
クリック計測は、トリガーでどういう値が条件指定できるかがポイントです。そのために、まずクリックしたときにどういう情報が取得できるのか、という事前調査が必要で、そこに慣れるまではぜひとも粘り強く取り組んでみてください。
デバイスもデザインも複雑化するなかで、マーケターはCVをしっかり計測していきたいものですね。
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
