Googleタグマネージャでクリックイベントを計測する3つの方法

Webサイト運営で欠かせないのがアクセス解析です。Googleアナリティクスで解析されている方も多いと思います。解析しているときにこんなこと思いませんか？

「リンクごとにクリック数がわかればな〜」
「サイドバーのリンク、本当にクリックされてるのかな？」
「サイトの回遊率あげたいんだけどどうすれば？」

そんなとき、Googleタグマネージャを使えば、リンククリックを個別に計測することができます。リンク、ボタン、バナーのクリックを個別に計測できますし、同じリンクURLでも別として計測することも可能です。

イベントの計測と言えば従来は、HTMLソースに以下の内容を埋め込むことが主流でした。

<a href="/" onclick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', '1')">

この方法は、あらゆるリンクに設定が必要、管理が大変、などデメリットが多いです。それを解消してくれるのがGoogleタグマネージャを使う方法です。かんたんなステップで設定できます。難しいJavaScriptを書く必要もなく、方法によってはソースをまったく修正せずに対応できます。

それでは順に説明していきます。てっとり早く設定方法が知りたい方は、目次から初期設定（変数設定）のところから読み進めてください。

クリックイベントを計測する三つの方法

本記事では以下3つのクリックイベント計測方法について説明します。

• サイト内すべてのリンクを計測
• 特定CSSクラスを含むリンクを計測
• 特定CSSセレクタのリンクを計測

それぞれにメリット、デメリットがあります。かんたんに説明します。

サイト内全てのリンクを計測

これが一番かんたんな方法です。サイト内すべてのリンククリックが計測できます。

設定がかんたん。ソースを修正する必要がない。

サイト内に複数箇所ある同じリンク内容（例、グローバルナビとサイドバーに同じメニューがある等）のどれがクリックされたか判別できない。

当サイトの場合、グローバルナビとサイドバーに同じメニューを設置しており、例えば、WordPressをクリックされた場合、どちらをクリックされたのか判別できません。

特定CSSクラスを含むリンク

HTMLソースにCSSクラスを設定する方法です。計測したい要素ごとに分類することができます。

クラス名を判別したいリンクごとに分類することで、ページ内のどの要素がクリックされたか判別できる。例えば、クラス名のルールをga_としておくことで、トリガーはひとつだけ作成すればよくなる。（トリガーについてはのちほど説明します。）

例、ga_nav,ga_sidebarなどクラス指定し、ga_を含むという条件で指定できる。

HTMLソースにCSSクラスを設定する必要がある。クリックされた要素の判別にクラス名を使う場合、別のクラスが同時に設定されているとそれも出力される。WordPressなどで、動的に生成される要素でクラスを設定するのがむずかしい場合に使えない。

当サイトの大半のリンクはこの方法でクリックイベントを計測しています。

特定CSSセレクタのリンク

CSSセレクタでリンクを指定する方法です。専用のCSSを用意することなく、計測したい要素ごとに分類することができます。

作成済みのHTMLソースやCSSクラスが利用できるので、ソースを修正する必要がない。例えば、.gnav aといった指定ができるので、動的生成要素などで、直接CSSクラスを指定できない場合でも対応できる。

分類したいリンクごとにトリガーを作成する必要がある。例えば、ヘッダー内のリンクとサイドバー内のリンクをひとつのトリガーで設定することはできない。

※Googleタグマネージャの仕様で、ひとつのトリガーに複数条件を指定した場合、AND条件になります。OR条件は指定できません。

当サイトでは、グローバルナビとサイドバーのカテゴリにて設定しています。（WordPressが動的に生成するソースなので、CSSクラスの設定がかんたんにできないため）

前提条件

Googleタグマネージャでクリックイベントを計測する前に

• Googleアナリティクスの導入
• Googleタグマネージャの登録

が必要です。本記事はGoogleアナリティクスの導入、Googleタグマネージャの登録とコンテナ作成まで済んでいる方が対象です。

イベントトラッキング設定の流れ

Googleタグマネージャーでイベントを計測設定する基本的な流れは以下の通りです。

1. トリガーを作成する
2. タグを作成する

イベントトラッキングとは

イベントトラッキングとは、イベント（クリックなどのユーザー行動）を計測することです。計測することでサイト内行動が意図したものとなっているか判断できるようになります。

トリガーとは

トリガーとは、イベントを計測する要素・条件・タイミングを指定するものです。

「シェアボタンをクリックされたときに計測したい」
「リンクをクリックされたときに計測したい」

といった内容を設定します。

タグとは

タグがトリガーの親、あるいは本体と思っていただければいいです。タグとトリガーを紐付けて、タグを配信することでGoogleアナリティクスで計測が開始されます。

初期設定（変数設定）

個別のイベント計測の前にGoogleタグマネージャの初期設定として、変数設定を済ませましょう。これは一回設定するだけです。

コンテナを開いた状態で、左にある変数をクリックします。有効な組み込み変数が表示されるので、ページとクリック欄すべてにチェックを入れましょう。デフォルトでいくつかはチェックが入っていると思います。

初期設定ができたらいよいよ、個別に設定していきます。まず、トリガーを設定していきます。

リンククリックすべて計測

サイト内のすべてのリンククリックを計測する方法です。左メニューからトリガーをクリックし、新規ボタンクリックで作成します。以下の手順で設定します。

1. イベントを選択

[クリック]を選択してください。

2. トリガーを設定

ターゲット[リンクのみ]を選択してください。その他はデフォルト（チェックが入ったまま）で大丈夫です。

3. 有効化のタイミング

[Page URL][正規表現に一致][.*]と入力してください。

この指定でサイト内の全ページでリンククリックを計測するようになります。特定のページのみ計測することもできます。例えば、[Page Path][/blog]と入力することで、blogディレクトリ配下のみ計測対象になります。

• [Page URL]：httpを含むサイトURL
• [Page Path]：ドメイン以降のURL（当サイトの場合、https://webtatan.com以降）

4. 配信するタイミング

[すべてのクリック]を選択してください。

5. トリガーに名前を付ける

トリガーを作成ボタンをクリックすると、名前を入力するダイアログが出てきます。タグを設定するときにこの名前を見て選びます。わかるように名前を付けてください。

これで完了です。あとはタグを設定してください。これ以降のトリガー作成手順についても、4. 配信するタイミング以外は同じ手順、同じ指定です。

特定CSSクラスを含む場合のみ計測

特定CSSクラスを含む場合のみ計測する方法です。イベントを選択〜有効化のタイミングまではリンククリックすべて計測と同じです。

4. 配信するタイミング

[一部のクリック]を選択してください。出てきたフォームで[Click Classes]を選択し、一致する条件とクラス名を入力してください。

私は[先頭が一致][ga_]としています。要素ごとにga_side_popular、ga_side_newなど、CSSクラスを設定しています。[先頭が一致]や[含む]を設定することで、ひとつのトリガーでまとめて設定することができます。

各リンククリックを個別に分類するのはタグの設定で行います。

CSSセレクタに一致する場合のみ計測

CSSセレクタに一致する場合のみ計測する方法です。イベントを選択〜有効化のタイミングまではリンククリックすべて計測と同じです。

4. 配信するタイミング

[一部のクリック]を選択してください。出てきたフォームで[Click Element]を選択し、[CSSセレクタに一致する]を選択、CSSセレクタを入力してください。

当サイトでは、グローバルナビに[.ga_gnav a]と指定しています。セレクタの書き方はまんまCSSセレクタです。

各リンククリックを個別に分類するのはタグの設定で行います。

タグを設定

トリガーが設定できたらタグを設定します。左メニューのタグをクリックし、新規ボタンクリックで作成します。以下の手順で設定します。

1. プロダクトを選択

Google Analyticsを選択してください。

2. タグの種類を選択

ユニバーサルアナリティクスを選択してください。

3. タグを設定

以下の項目を設定します。

• トラッキングID
• トラッキングタイプ
• カテゴリ
• アクション
• ラベル
• 値

トラッキングID

GoogleアナリティクスのトラッキングIDを指定します。トラッキングIDはGoogleアナリティクスの管理−トラッキング情報−トラッキングコードにて確認できます。

トラッキングタイプ

[イベント]を選択します。

カテゴリ

任意のカテゴリ名を指定します。Googleアナリティクスで参照するときのカテゴリと対応します。カテゴリ→アクション→ラベルの順で親子関係になります。複数のタグを設定する場合、タグ間で同じ名前にしておくと、Googleアナリティクス上で同じ分類になります。

例、ヘッダー用タグとサイドバー用タグのカテゴリに[内部リンク]と設定すると、どちらをクリックされても内部リンクとして計測されます。

分けたい場合、別の名前にしてください。

アクション

任意のアクション名を指定します。カテゴリと同じく、複数のタグ間で名前を同じにするか別にするかで管理しやすくなります。

例、ヘッダー用タグに[ヘッダークリック]、サイドバー用タグに[サイドバークリック]と設定すると、どちらをクリックされたかすぐにわかります。

ラベル

ラベルを設定します。ラベルの設定で、どのリンクをクリックされたかが判別できます。ラベル指定はいくつかの方法があります。設定したトリガーに応じて指定してください。

[Click Text]か[Click URL]がわかりやすいです。クリックしたリンクの表示名、リンク先URLと対応します。画像リンクの場合、[Click Text]では取得できないのでご注意ください。

[Click Classes]を選択してください。分類したい要素ごとにクラス名を指定しておくことで、どの要素がクリックされたかわかります。

[Click Text]か[Click URL]でいいと思います。

値

値は半角数字のみ入力可能です。通常は1でいいと思います。1にしておくと、10回クリックされた場合、10と記録されます。

4. 配信するタイミング

配信するタイミングはクリックを選択します。

既存のクリックトリガーから選択ダイアログが出るので、希望のトリガーをチェックし、保存してください。

タグを作成ボタンで完成です。

あとは公開するだけなのですが、公開する前にテストすることをおすすめします。テスト機能が付いているので、設定したトリガーやタグがちゃんと動いているか確認できます。

プレビューとデバッグ

画面右上の公開ボタン右にある下向き矢印をクリックします。開いたメニューからプレビューボタンをクリックします。

するとブラウザがプレビュー状態となります。

この状態でサイトを開き、動作確認してください。

プレビュー動作確認方法

サイトを開くと、下の方に専用メニューが出てきます。

クリック前は、Tags Not Fired On This Page: のところに設定したタグが出ているはずです。この状態でリンクをクリックすると、Tags Fired On This Page: に動作したタグ名が出てきます。

なお、クリックする際はCtrlを押しながらクリックし、別タブで開くようにしてください。同じタブで開くと計測する前にページが切り替わって確認できません。

計測できた場合、左のSummary欄にgtm.linkClickなどが表示されると思います。それを選択し、右の方のVariablesをクリックすると、クリックしたときに取れる情報が出てきます。

ここでタグで設定したラベルがうまく取得できるか確認できます。画像の例だと、画像リンクをクリックしたため、Click Textはundefinedになっています。正しく取得できるものを設定しましょう。

問題なければ、Googleタグマネージャ画面に戻り、プレビューモードを終了します。問題があった場合、修正して再度テストしてみてください。

問題なければいよいよ公開します。

公開する

画面右上にある公開ボタンをクリックします。ダイアログが表示されるので、今すぐ公開ボタンをクリックすると公開できます。公開したら動作確認をします。

Googleタグマネージャーの動作を確認する

公開したあと、Googleアナリティクスを開きます。レポートのリアルタイム−イベントとたどり、イベント（直前の 30 分間）をクリックします。その状態で、自分のスマホなどでサイトにアクセスし、リンクをクリックしてみてください。無事に計測されましたか？計測されたらちゃんと設定されています。

もし計測されない場合、どこかの設定に誤りがあります。プレビューモードで確認済みの場合、タグマネージャの設定は問題ないですが、他のどこかに問題があります。

• Googleタグマネージャの導入で失敗している
• Googleアナリティクスで自分を除外している

などが考えられます。ちなみに私は、Googleタグマネージャ導入時のタグを貼り付ける場所を間違えており、正しく動作しませんでした。Googleタグマネージャのコードは<body>開始タグの直後に貼り付けるのですが、<body>開始タグの直前に貼り付けていました。

無事計測されましたら、日頃のアクセス解析にて確認しましょう。

Googleアナリティクスでイベントを確認する

ここまでで設定されたタグはGoogleアナリティクスで確認できます。確認する場所は、レポートを開き、行動−イベントとたどると確認できます。イベントの中をそれぞれ確認してみてください。

なお、当日中のイベントは反映にタイムラグがある場合があります。

まとめ

無事設定できましたでしょうか。GoogleアナリティクスのイベントトラッキングにGoogleタグマネージャを利用すると一元管理できて手間がありません。一度設定すれば、イベントのカテゴリ、アクション、ラベルを変更する場合でもソースを触る必要がありません。是非、活用しましょう。