*

Googleタグマネージャ基礎:クリック計測する設定


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


クリック計測

クリック計測できない!そんな人は、この記事を読めばすっきり納得できます。

こんにちは、GTM好きのカグア!です。

みなさんはGoogleタグマネージャを使っていますか。わたしは最近がっつりとはまっていて、とても便利に使っています。いっぽうで、クリック計測や電話コンバージョンが計測できない、という声が聞かれます。

そこで本記事では、Googleタグマネージャを使ったクリックイベントを計測する方法を解説します。なお情報は2016年4月時点でのものです。

最新バージョンでの解説、プレビューモードで変数を確認しながらの設定と、あまり出回っていない情報を可能なかぎり具体的に書きました。とくにプレビューモードは理解していただけますと、後半の実践編で紹介した手順を、自分なりの設定に変更するなど応用がきくようになるかと思います。

GTMを未実装という方は、ぜひこの機会に入れてみてください。楽しいですよ!

追記:2016年4月14日 コンソールと全クリックトリガーの話を加筆しました。

関連記事
>>Googleタグマネージャでクリック計測とクロスドメイン設定
>>Googleタグマネージャに予め設定しておくと便利な変数12本
>>Googleアナリティクス応用:GTMで日ごとに変えるバナーA/Bテスト
>>WordPress記事の複数タグをGoogleアナリティクスのeコマースで集計

Googleタグマネージャでクリック計測しよう

すみれ
Googleタグマネージャでクリック計測ですか!

カグア!
そうだね。Googleタグマネージャ(以下GTM)を使うと、プログラム無しでクリック計測ができるんだ。

さくら
電話コンバージョンでクリック計測だとonClick~みたいなのを書かないといけないケースもありましたものね。

カグア!
そうだね。あとは完了ページにCVタグを入れるとか。

すみれ
つまり・・・GTMだとクリック計測が簡単にできちゃう!ってことですか。

カグア!
いや、じつはそんなことはない。

さくら
無いんかい!

カグア!
クリック計測はとても奥が深いんだ。でも、GTMを使えばその奥深さを追求することも楽しくなると思うよ。

すみれ
プログラム無しでいいなら、たしかにそうかも!

カグア!
もちろん、プログラム無しとはいってもGTMの基本やクリックそのものの仕組み、基本操作はマスターする必要があるよ。

すみれ
は~い。

Googleタグマネージャの基本

タグマネージャーの基本

Googleタグマネージャをサイトに入れてない人は、早速登録して、タグ(正確にはコンテナタグ)をホームページのBODYタグ直下にいれましょう。
>>Google タグマネージャ公式サイト

Googleタグマネージャのタグは入れただけでは、何も機能しませんので安心してください。Googleアナリティクスのトラッキングコードがすでに貼ってあるサイトに併記しても全然問題ありません。コンテナタグ単体では、機能しないのですね。

Googleタグマネージャが動く仕組み

上図のように、Googleタグマネージャでは、タグ・トリガー・変数という設定項目があります。これらを設定していくことで、稼働するタグを増減できます。また全てを設定する必要はなく、最低限はタグとトリガーです。

例えばこんな感じ。タグに「Googleアナリティクス」、トリガーに「全てのページ」として、画面右上の「公開」ボタンをクリックしますと、タグを貼り付けた全てのページでGoogleアナリティクスが稼働(発火)するようになるのです。そして、トリガーをタグから外してしまえば、稼働しなくなります。

これらのことをすべてGoogleタグマネージャの管理画面内で出来てしまうのです。ですから、稼働中のサイトでも運営者が能動的にタグ管理をすることができます。

すみれ
変数は必須じゃないんですね。

カグア!
変数は、タグやトリガー、また変数内で利用されることはあっても、標準で足りるならば使わなくてもいいんだ。

すみれ
トリガーって、ようはタグが動く条件ってことですよね。

カグア!
その通り。なので、トリガーを外しちゃえばタグは動かなくなる。また復活したいときは、タグにトリガーを設定しなおせばいいから、本当に管理が楽になるよね。

すみれ
ですねー。

クリック計測には2種類ある

V
Photo:license by poppacket

Googleタグマネージャには、2種類のクリック計測のためのトリガーが用意されています。

これらのトリガーにクリックを検知させ、あとはコンバージョンタグやGoogleアナリティクスのイベントトラッキングのタグなどを発火させます。

クリック計測トリガー

すべてのクリックを検知しトリガーにできます。便利な分、多くのクリックを取るため、発火のための識別をさせることが面倒。

リンククリック計測トリガー

Aタグなど、リンクのクリックにのみ反応するトリガー。リンクがないところに設定ができないぶん、簡易に設定が可能。

すみれ
クリック計測にも2種類あるんですね。

カグア!
Aタグの文字リンクだったらリンククリックトリガーで簡単に習得できるよ。

すみれ
すべてのクリックを調べられるトリガーもあるんですね。

カグア!
そう。リンクかどうかに関わらずすべてのクリックを検知できるんだ。

すみれ
すごーい。

かつては、クリックリスナーという設定が必要だったのですが、GTMを使いますと、簡単にクリックイベントの常時監視をしてくれるのです(リスニングしてくれる)。そして、発生したイベント(挙動)を、gtm.click、gtmlinkClickなどと分類し、そこから様々な動きに連動させることができます。

便利ですね!

クリックがなぜ計測できないのか

クリックがなぜ簡単に計測できないのか。それは、クリックした時に得られる情報が、デザインによって変わるからです。
リンクにもいろいろある

上図のように、現在のホームページではさまざまデザインのリンクがあります。さらにスマートフォンなどで、画面上部や下部にずっと止まっているホバータイプや、アコーディオンなど・・・。それら全てで取得できる情報が異なるため、一意に設定してどれもうまくいく、ということはありえないのです。

リンクの数だけクリック計測設定=クリックトリガーが必要、くらいに思ってちょうど良いくらいです。

それでは、順をおって説明していきましょう。

基礎編:リンククリック計測の設定

まず、もっとも基本となるリンククリックのトリガーを設定してみましょう。<ahref="/index.html”>クリック</a> といったベーシックなAタグでのリンクとなります。

設定は以下のようになります。このトリガーを使って発火させれば、そのリンクのクリックを計測することができます。
リンククリックトリガー

それでは、個別に解説していきましょう。

トリガーを設定

クリック計測のトリガーには2種類あります。Aタグのようなリンクに絡むクリックを計測する「リンククリック」。もう一つは、全てのクリックイベントを計測できる「クリック」です。

待ち時間があるのは、リンクの場合、通常は次のページに遷移するわけです。つまり、いまそのページのコードがすっ飛ばされてしまう可能性があるわけです。ですから、ウェイトを入れて、トリガーによって発火したタグなどをちゃんと機能させてからページ遷移してね、という意味になります。

デフォルトでは、まあ2秒(2000ミリ秒)もあればいいよね、となっているわけです。

有効化のタイミング

そもそも、このトリガーがどのタイミングで使えるようになるのか、という意味。

すべてのページで有効化させたい場合は、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タグマネージャで行えるようになります。

重要:クリック計測にはプレビュー確認が必須スキル

Day 33: Arm-Wrestling a Baby
Photo:license by quinnanya

クリック計測は、そのクリックの後にコンバージョンタグを発火させるなど、クリックと何かを連携させたい目的でつくるはずです。たとえば、前述のリンククリックトリガーでは、「ClickURLでリンク先のURLが取得できる」ということが実は前提でした。ClickURL変数で、じつはリンク先のURLが取れないこともじつはあるのです。

つまり、クリック計測では、そのクリックで、一体どういう値が取得できるのか。それがわかっていませんと、じつは適切な設定ができないのです。その確認方法は以下です。

1.プレビューモードにする

トリガーとタグを作成したら、プレビューモードにします。

2.[CTRL]+クリックしてみる

トリガーが反応するであろう箇所をクリックしてみます。

3.gtm.linkClickとVariablesをクリック

ここで、クリック時に何が取得できているのかという情報を確認できます。
変数の中身

リンククリックであればgtm.linkClick、クリックであればgtm.Click を選びます。その上でVariablesを選びますと、変数と取得されたデータの中身が一覧されます。

ここで仮に、ClickURLで、リンク先のURLが取得できていなければ、他の方法を考える、となります。

じつは前述のリンククリックトリガーの解説では、まず導入の容易さをお伝えするために、あえてこの確認作業を省いていました。しかし、クリック計測は奥が深く、思った通りに取れないことも多いのです。そのときに、この確認方法を使い、そもそもどんな値が取得できているのか、ということを調べ、条件指定に使うことになります。

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社)

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社) | 本 | Amazon.co.jp
Amazonで詳しく見る

応用編:クリックすべてを計測する設定

Aタグ以外のすべてのクリックを計測できるトリガーを設定してみましょう。

トリガーを設定

すべてのクリックに反応させるトリガーは思いのほか簡単です。以下のようにすれば、すべてのクリックに反応します。
全クリック

プレビューモードではgtm.Click

プレビューモードにして、リンクなど何もないところを試しにクリックしてみてください。左側のSummery欄にgtm.Clickが表示されるはずです。これが、全クリックを検知した証左です。

では、Variablesを確認してみましょう。ちゃんと取得できています。もちろん、Aタグなどのリンクをクリックしてもちゃんと反応します。
Variables

取得できている変数を確認

取得できている変数

たとえば、リンククリックなども、[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を使うことにしましょう。

すみれ
Classはタグのデザインを決めるときにつけるデザインの追加情報。

さくら
そのClassがついたタグは全部同じデザインになるから、指定は慎重に。

1.トリガーの新規作成

前述の手順を参考にトリガーを作成します。banner.jpgをクリックしたら反応するようにしてみます。作成後、保存します。
クリックURL

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をしっかり計測していきたいものですね。

「クリック計測し・た・い。」

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応: 木田 和廣, できるシリーズ編集部
Amazonで詳しく見る

BookLive!で詳しく見る

実践 Google タグマネージャ入門 増補版: アユダンテ株式会社

実践 Google タグマネージャ入門 増補版: 畑岡 大作(アユダンテ株式会社): 本
Amazonで詳しく見る

BookLive!で詳しく見る

HTML5プロフェッショナル認定試験レベル2攻略テキスト: 中島 俊治: 本

HTML5プロフェッショナル認定試験レベル2攻略テキスト: 中島 俊治: 本
Amazonで詳しく見る

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

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑