■概要
初めまして。2023年に入りGoogleTagManagerと出会い、計測周りを担当している池内です。
現在弊社ではGoogleTagManagerを使用し、計測イベントタグの管理、設置を行っております。
GoogleTagManagerと出会い、沢山学びを得たので今回はイベントタグ（クリックが発火条件）のトリガー設定にフォーカスしブログを書いていきたいと思います。
▼内容
- トリガーの基本的な設定方法
- トリガーを設定する上で使用する変数
- CSSセレクタとdata属性の違い
▼おまけ
- CSSセレクタでのトリガー設定方法
- data属性でのトリガー設定方法
※以下GoogleTagManagerをGTMと記述します
■トリガーの基本的な設定方法
GTMでイベントタグを設定するには必ずトリガーが必要になります。
トリガーは、どういうタイプでどのページでどういう挙動をしたらイベントタグを発火させるのか指定するものとなります
-
どういうタイプで：
トリガータイプの選択。今回はクリックなのでクリック関連を選択 -
どのページで：
Page HostnameとPage Pathを指定して発火させたいページを指定します -
どういう挙動で：
どこをクリックしたらタグを発火させるのか詳しく指定します。指定の方法は開発のいらないGTM内の機能（変数）で6つ。開発がいる変数が1つあります
この後各方法の違いについて説明します
■トリガーを設定する上で使用する変数
どこでクリックするのか詳しく指定するトリガー内で使う変数について解説します
開発なしver よく使う変数は★を付けています
- ClickElement：クリックされた要素をまるごとCSSセレクタで指定 ★
- ClickClasses：クリックされた要素のClass属性で指定
- ClickID：クリックされた要素のID属性で指定
- ClickTarget：クリックされた要素のTarget属性で指定
- ClickURL：クリックされた要素のURL情報で指定
※指定したページ内に同じURLが複数あればそれぞれ発火 - ClickText：クリックされた要素に記載されているテキストで指定
※テキストが変わったら発火しなくなります
開発ありver よく使う変数は★を付けています
- data属性：data-●●という名前付けしたdata属性をページ内のクリックしたい部分に埋め込み、そのdata属性を目印としてトリガー設定 ★
弊社ではClickElementを選択しCSSセレクタで指定するかdata属性をページに埋め込み、指定するかの二択の手法を使っています
■CSSセレクタ（ClickElement）とdata属性の違い
| システム | 指定方法 | メリット | デメリット | |
|---|---|---|---|---|
| CSSセレクタ | なし | ClickElementを選択しCSSセレクタを抜き出して指定 | 開発不要のためすぐに設置可能 | 他の改修でCSSセレクタが変更した際に計測不可 |
| data属性 | あり | 開発で入れたdata属性をGTMで登録し指定 | 改修が入ったとしても計測が漏れる可能性が低い | 開発が必要なので設置に時間と工数が必要 |
弊社としては下記で使い分けています。
- 定常的に取りたいイベント：data属性
- 一時的に見たいイベント：CSSセレクタ
特に外部へ提供する予定のあるものはすべてdata属性で対応するようにしています
おまけ
■CSSセレクタ（ClickElement）の指定方法
1.クリック箇所をページ内で表示
2.検証環境を開き、該当箇所にカーソルを当てる
3.青くなった箇所を右クリックしcopy→copy selectorでCSSセレクタをコピー
4.トリガー設定にてClickElement・CSSセレクタに一致するを選択し、コピーしたCSSセレクタを貼り付け
■data属性の指定方法
1.クリック箇所に入れたいdata属性名を検討しこの時になんの値を送るかも同様に検討。値はパラメーターを取得したいときに活用できます
例：data-active = true or false
2.ページ内のどこに入れたいのか、data属性名と値を指定して開発依頼
3.開発された後にdata属性の変数を登録
- 変数のタイプ：自動イベント変数
- 変数タイプ：要素の属性
- 属性名：開発で入れたdata属性名
4.3で作成された変数を使って下記のようにトリガー設定
値で指定したくない場合は下記のように設定
true以外の値だったとしてもdata-activated-flagがある箇所で発火することが可能
