実践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ページ
  • 書籍内容&販売サイト紹介
この記事が役に立ったらシェア!
tweet24このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

専用線
ネットワーク接続の(契約)方式。 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore