実践Googleタグマネージャ入門 実践 Googleタグマネージャ入門

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

リンクのクリックを計測するのに、もうHTMLにJavaScriptのコードを書く必要はありません
書籍の4-8<リンククリックリスナー>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

特定の行動やタイミングを感知する「イベントリスナー」

「リンクがクリックされたときにGoogleアナリティクスで計測したい」という需要はかなり高いのではないでしょうか。これまでは、リンクのクリックを計測する際にはそのリンクのHTMLへ専用のタグやJavaScriptを記述する必要がありました。Googleタグマネージャには、「リンクのクリック」など特定のタイミングでGoogleタグマネージャを呼び出せる機能があります。それが「イベントリスナー」と呼ばれる機能です。

イベントリスナーにはいくつか種類があり、トリガーの新規登録画面で「イベントの選択」から選択することができます。例えば、リンクなど何かしらがクリックされたタイミングを感知する「クリック」、フォームが送信されたタイミングを感知する「フォーム」、一定時間ごとに繰り返し呼び出せる「タイマー」、JavaScriptでエラーが発生したタイミングを感知する「JavaScriptエラー」などがあります。

●主なイベントリスナーの種類

v20408a
「イベントの選択」で「ページビュー」以外のイベントリスナーを選択できる。

これらのイベントリスナーは、選択肢から目的のものを選択して使えるようになっています。そして選択した種類によって、ページの読み込み時以外にも例えば「リンクのクリック時」などのタイミングのトリガーを作成できるようになるわけです。

「リンクがクリックされたとき」のトリガーを作成する

さて、ここでは最も需要が高いであろう「リンクがクリックされたとき」のトリガーを例として解説しますが、ほかの「○○されたとき」系のトリガーも登録の仕方の流れは同じです。トリガーの新規登録画面で、これまで解説してきた「特定のページが表示されたとき」というトリガーは、「イベントの選択」で「ページビュー」を選択してきました。今回は「リンクがクリックされたとき」なので、「クリック」を選択します。すると「フィルタの追加」が表示されるので、ひとまず今は「すべてのクリック」を選択して先に進みましょう。

v20408b
「イベントの選択」で、「クリック」を選択する。「フィルタの追加」はひとまず「すべてのクリック」を選択して「続行」をクリックする。

すると、「トリガーの設定」が表示されるので、そこで表示される「トリガーのタイプ」で「リンククリック」を選択します。これで、「リンクをクリックしたとき」というトリガーは設定完了です。

なお、「タグの配信を待つ」オプションは基本的にはデフォルトのままオンにしておきます。これは、確実にタグが配信されるようにページ遷移を一瞬停止させるためのオプションです。このオプションがオフだと、サーバーにデータを送信完了する前にページが遷移してしまい、正常に計測できない可能性があるので、オンのままにしておくことをおすすめします。もう1つの「検証をチェック」は、リンクが正常に動作したときのみリンククリックリスナーを起動するというオプションです。基本的にはこちらもオンで構いませんが、気になるようであればオフにしてもいいでしょう。

v20408c
「トリガーのタイプ」で「リンククリック」を選択する。オプションは2つともオンで構わない。

これで、「リンクがクリックされたとき」というトリガーが作成できました。ただし、このままでは「ページ内のどれかのリンクがクリックされたとき」というトリガーでしかなく、あまり実用的ではありません。リンクのクリックを計測したいときは、例えば「特定のリンクを計測したい」とか「外部リンクを計測したい」という場合がほとんどですよね? そこで、続いてどのリンクかを限定する条件を追加していきます。

特定ページでのみリンクのクリックを計測したい場合

サイト内の全ページではなく、特定のページでのみ、そのページ内のリンクがクリックされた場合にだけ計測したい、ということもあるかと思います。そのときは、4-1を参考にPage Path変数などを使って、トリガーに「ページを指定する」条件を追加しましょう。例えばPage Path変数で「先頭が一致」「/category/」のような条件にすれば、「/category/ディレクトリ以下のページで」「リンクがクリックされたとき」というトリガーにできます。

「特定のリンクが」という条件を追加する

どのリンクのクリックを計測するのかは、「トリガーの設定」で変数を使って条件を追加します。リンクには、リンク先URLやtarget属性、class属性、id属性、アンカーテキストなどいくつかの情報がありますが、Googleタグマネージャにはそれらの情報を取得する専用の変数が用意されています。これらは「自動イベント変数」と呼ばれ、デフォルトでは無効になっているので、「変数」で有効にする必要があります。以下の変数にチェックを付けて、有効にします。

v20408d
「変数」をクリックして「クリック」にある変数にチェックを付けて有効にする。

●よく使う自動イベント変数

  • Click Element ―― リンク全文(aタグから含んでいるテキストや画像などすべて)
  • Click Classes ―― リンクのaタグが適用されているCSSのclass名
  • Click ID ―― リンクのaタグが適用されているid名
  • Click Target ―― リンクのaタグに記述されているtarget属性(_blankなど)
  • Click URL ―― リンク先URL(href属性)
  • Click Text ―― リンクに含まれているアンカーテキスト全文

この中でも特に重宝するのは「Click URL(リンク先URL)」変数です。この変数を使うだけでも、例に挙げたような「特定ページへのリンク」や「外部サイトへのリンク」などの条件を作成できます。ここでは、リンク先URLを指定して「『amazon.co.jp』へのリンクがクリックされたとき」というトリガーを作成してみましょう。

先ほどのトリガーの「トリガーの設定」の一番下にある設定欄で「Click URL」を選択します。「含む」を選択して、目的のリンク先URLの条件を入力します。「+」ボタンで追加した条件は4-5で解説した通りAND条件なので、たくさんあるリンクから絞り込まれる形となります。

v20408e
「Click URL」「含む」の条件を追加して、どのリンク先かを特定する。ここでは、「『amazon.co.jp』を含むページへのリンク」という条件を表している。

これで保存すれば、「特定のリンクがクリックされたときに」というトリガーが作成できました。あとは、例えばGoogleアナリティクスのイベント計測タグなど、そのリンクがクリックされたときに配信したいタグと作成したトリガーをひもづければ設定完了です。

もちろん、条件の数は制限があるわけではありません。必要に応じて、いくつ条件を増やしても構いません。例えば、「リンク先URLに自社サイトのドメインを含まない」かつ「リンク集のページで」「target="_blank"のリンク」といった条件も設定可能です。使いこなせばいろいろと活用できる機能ですので、ぜひ試してみてください。

外部リンクを条件にするには

例えば「外部サイトへのリンク」を条件にしたい場合は、「リンク先URLが自社サイトのドメイン以外である」という条件で定義できます。

  • 「Click URL」「含まない」「example.com(自社サイトのドメイン)」
「フィルタの追加」でも絞り込める

ここでは設定画面の一番下にある「トリガーの設定」の中で「どのリンクか」を絞り込む条件を追加しましたが、この条件は上部にある「フィルタの追加」で「一部のクリック」を選択することでも設定できます。どちらでも結果は同じなのでやりやすい方で構いませんが、「フィルタの追加」は大まかなページの条件を指定し、「トリガーの設定」はリンクの細かな条件を設定するなど、自分がわかりやすい方法で使い分けましょう。

イベントの値に使うこともできる

実際にリンククリックをGoogleアナリティクスのイベント計測タグで計測した場合、おそらくリンク先URLやアンカーテキストを「アクション」や「ラベル」の値にして計測したくなると思います。その場合は、配信するイベント計測タグの設定画面を表示して、それぞれの項目に右側の変数ボタンから「Click URL」などの自動イベント変数を選択すればOKです。ちなみに、イベント計測タグの4つの項目のうち「値」は数値のデータしか対応していないので、ここにリンク情報を入れようとしてもエラーになってしまい計測できません。それ以外の「アクション」か「ラベル」で情報を取得するようにしましょう。

v20408f
イベントリスナーによって取得する内容が異なる

ここでは「リンクがクリックされたとき」の自動イベント変数の値を紹介しました。ほかのイベントリスナーを利用したときは、それぞれ取得する値が異なってきます。実際には、リンククリック以外のイベントリスナーはあまり使うことがないかもしれませんが、以下のような仕様になっています。

  • クリック ―― 「クリックされた要素」の情報が取得される。例えば画像(imgタグ)がクリックされれば{{Click URL}}には画像のURLが入り、ページ上のテキストをクリックしたときはURLを持たないため{{Click URL}}は空欄になる。
  • フォーム ―― 送信されたフォームのformタグにまつわる情報が取得される。例えば{{Click URL}}であればformタグに記述されたaction属性の値になり、{{Click Classes}}や{{Click ID}}もformタグに適用されているものが値として取得される。
  • タイマー ―― 基本的に取得する情報はない。

この記事は、Googleタグマネージャの初心者向け入門本となる電子書籍『実践 Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。

実践 Googleタグマネージャ入門
時間を「劇的」に生み出すサイト修正不要のタグ管理術

本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。

2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。

電子書籍『実践 Googleタグマネージャ入門』の中身や購入についてもっと見る
  • 実践 Googleタグマネージャ入門 時間を「劇的」に生み出すサイト修正不要のタグ管理術
  • 品種:電子書籍(リフロー形式/4.39MB)
  • 著者:畑岡大作(アユダンテ株式会社)著
  • 電子基準価格:1,000円+税(販売価格はストアにより異なる場合があります)
  • 発行:インプレス
  • 発売日:2014年11月10日
  • ページ数:160ページ
  • 書籍内容&販売サイト紹介
用語集
CSS / Googleアナリティクス / Googleタグマネージャ / HTML / JavaScript / アンカーテキスト / ディレクトリ / ページビュー / リンク / 外部リンク
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]