GTM中級

クリックトリガー

ボタンやリンクなど、押されたときにタグを発火する設定
「申込完了」や「資料請求」といったボタン押下でCV計測をしたい場合など
実装パターン
- ボタンがリンクになっている（押すとどこか別ページに飛ぶ）
  - 「Click URL」変数で指定できる
- それ以外
  - 「CSSセレクタ」を使って要素を特定
「CSSセレクタ」を使った指定ならどちらでも対応でき、汎用性が高い。

CSSセレクタ

Webページ上の要素（ボタンや文字、帯、線など、見えるもの全て）を特定する「住所」のようなもの
ページを構成する「HTML（≒設計書）」は階層構造になっている

<html> → <body> → <header> → <div>という階層

階層をたどることで、この要素（着色部分）が特定できる
これを「CSSセレクタ」の記法で表現すると以下の通り（一例）
```
html > body > header > div
```
この<div>にはidと呼ばれる識別子がついているので、以下のように詳細に書くことも出来る
```
html > body > header > div#header_text
html > body > header > #header_text
```
識別子には「class」と「id」があり、ページを作る人が自由に決められる
- class：複数の要素に付けて使う（「赤色の文字」「中央寄せの要素」等、グループの名前を付けるイメージ）
  
  例）
  
  HTML
```
<p class="red_text">
```
  CSSセレクタ
```
p.red_text
.red_text
```
- id：ページ内で特定の一要素に付ける（コンテンツ①、コンテンツ②など、個々の要素にユニークな名前を付けるイメージ）
  
  例）
  
  HTML
```
<div id="contents_1">
```
  CSSセレクタ
```
div#contents_1
#contents_1
```
階層の指定の仕方は色々ある（とりあえずこの2つ覚えておけばOK）
```
div p
```
半角スペースで区切ると、自分より下の指定要素は全て該当する
```
                        div > p
```
>で区切ると、自分の「直下の」指定要素のみが該当する

参考：CSSセレクタチートシート

デベロッパーツールでの要素確認

ブラウザに備わっているページの検証ツール
多くの場合、「F12」キーを押すと出てくる
要素を右クリックして「検証」でもOK　※こちらの方が使い勝手良い

右クリックした要素の部分までジャンプしてくれる！便利！
スマートフォン版ページの確認にも活用できる

GTM「プレビュー」での確認

「Click」イベントが発生している箇所を選択して「Click Element」変数を確認すると、押された要素のCSSセレクタが出てくる
「Click」イベントを拾わない場合
- クリックトリガーが設定されていない
「Click Element」変数が出てこない
- 組み込み変数で「Click Element」が有効になっていない
  
  ここに出ていればOK
- 出ていない場合は、右上の「設定」から「Click Element」にチェックを入れる