Googleタグマネージャー（GTM）でクリックイベントを設定する
Googleタグマネージャー（GTM）でクリックイベントを設定するには、下記の手順で進めます。
クリックイベントの設定手順
- ページのaタグにdata属性を設定する
- クリックイベント用の変数を設定する
- クリックイベント用のトリガーを設定する
- クリックイベント用のタグを設定する
まずは、ページのaタグから設定していきます。
ページのaタグにdata属性を設定する
クリックイベントを計測したいaタグに「data-link-click」のdata属性を設定します。
<a data-link-click="testlink01" href="https://example.com">テストリンク01</a>
ページ内に複数のリンクがある場合は、data-link-clickの値を変更することで（testlink02、testlink03など）、どのリンクがクリックされたかが分かります。
メモ
data属性の属性名は「data-xxxx」という名前であれば、上記以外で設定しても問題ありません。
ただし、この記事で紹介している「data-link-click」という部分を変更した属性名で設定してください。
次に変数を設定していきます。
クリックイベント用の変数を設定する
クリックイベントで利用するための変数を作成します。
メモ
aタグがクリックされた時に、Googleアナリティクスのイベントでどのリンクがクリックされたかを確認するために使います。
「変数」＞「新規」をクリックします。
下記の内容で「変数」を設定します。
| 変数名 | クリックイベント（※任意文字） |
| 変数のタイプ | 自動イベント変数 |
| 変数タイプ | 要素の属性 |
| 属性名 | data-link-click（※任意文字） |
どのGoogleアナリティクスで集計するかを指定するための変数も作成しておきます（すでに作成済みの場合は不要です）。
| 変数名 | Googleアナリティクス設定(UA)（※任意文字） |
| 変数のタイプ | Googleアナリティクス設定 |
| トラッキングID | UA-xxxxxxxx-1（※自分のGoogleアナリティクスのトラキングID） |
| Cookieドメイン | auto |
次はトリガーを設定します。
クリックイベント用のトリガーを設定する
クリックイベントで利用するためのトリガーを作成します。
メモ
aタグがクリックされた時に、どういう条件ならクリックイベントとして集計するのかを決めます。
「トリガー」＞「新規」をクリックします。
下記の内容で「トリガー」を設定します。
| トリガー名 | クリックイベントトリガー（※任意文字） |
| トリガーのタイプ | クリック-リンクのみ |
| このトリガーの発生が | 一部のリンククリック |
| イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します |
|
もし、上記の設定でうまくいかない場合は、イベント発生の条件を下記のようにゆるく設定します。
| イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します |
|
最後にトリガーを設定します。
クリックイベント用のタグを設定する
クリックイベントで利用するためのタグを作成します。
メモ
aタグがクリックされた時に、トリガーを発火するためのタグを作成します。
「タグ」＞「新規」をクリックします。
下記の内容で「タグ」を設定します。
| タグ名 | クリック01（※任意文字） |
| タグの種類 | Googleアナリティクス：ユニバーサル アナリティクス |
| トラッキング タイプ | イベント |
| カテゴリ | リンククリック（※任意文字） |
| アクション | {{Page URL}}（※任意文字でも可） |
| ラベル | {{クリックイベント}}（※今回作成した変数名、任意文字でも可） |
| 非インタラクションヒット | 真 |
| Googleアナリティクス設定 | {{Googleアナリティクス設定(UA)}} |
| 配信トリガー | クリックイベントトリガー（※上記で作成したトリガー） |
メモ
変数を指定する時は「{{変数名}}」のように書きます。任意の文字と変数は間違えやすいので注意。
設定で「カテゴリ」は固定の任意文字を設定していますが、「アクション」には「{{Page URL}}」の変数を指定しているので、どのページのクリックなのかが分かるようになっています。
また、「ラベル」には「{{クリックイベント}}」の変数を指定しているので「data-link-click」の値を変更していれば、どこのリンクがクリックされたかが分かります。
Googleアナリティクスでクリックイベントを確認する
設定はすぐに反映されるのでGoogleアナリティクスのイベントですぐに確認できます。
結果確認には2つの方法があります。
Googleアナリティクスでクリックイベントを確認する方法
- リアルタイムで確認する
- 行動で確認する
リアルタイムで確認する
クリックイベントは「リアルタイム」＞「イベント」＞「イベント（直前の 30 分間）」で確認できます。
※「イベント（直前の 30 分間）」は「表示」にあるリンクをクリックして変更できます。
書かれているとおり、「直前の30分間」のイベントしか表示されません。
行動で確認する
「行動」＞「イベント」＞「概要」で確認できます。
GoogleアナリティクスとGoogleタグマネージャーで下記のように紐づいています。
| Googleアナリティクス | Googleタグマネージャー |
| イベントカテゴリ | カテゴリ（リンククリック） |
| イベントアクション | アクション（{{Page URL}}） |
| イベントラベル | ラベル（{{クリックイベント}}） |
各項目をクリックすると詳細を確認できます。
【まとめ】GTMでクリックイベントを設定する
Googleタグマネージャー（GTM）でクリックイベントを設定するには、下記の手順で進めます。
クリックイベントの設定手順
- ページのaタグにdata属性を設定する
- クリックイベント用の変数を設定する
- クリックイベント用のトリガーを設定する
- クリックイベント用のタグを設定する
もし、うまくいかない場合は、プレビューを使ってチェックしてみましょう。
-
-
Googleタグマネージャー（GTM）でクリックイベントが発火しない時の確認方法【プレビューを使ってチェック】
疑問 Googleタグマネージャー（GTM）でを設定したけどうまく発火しない。どこが悪いのかよくわからない。 Googleタグマネージャー（GTM）で設定したクリックイベントが発火しない場合、プレビュ ...