こんにちは。スプマロです（@649Ga4）
Google Tag Manager(以下、GTM)には、便利な変数がいっぱいありますよね。ただ、その中にある「Click Eelment」変数は使ったことありますでしょうか？
意外と使われていないかもしれないこの変数、実はとても便利な活用方法があります。少し中級者向けの内容かもしれませんが、覚えておくとGTMの活用の幅が広がります！
この記事では、Click Element変数についての解説と活用方法を説明しますので、
GTMで計測設計する際に是非参考にしてください。
Click Element変数ってそもそも何だろう？
Click Element変数は、組み込み変数の1つでクリックされた要素を取得する変数です。デフォルトでは、無効になっているので、有効にする必要があります。
■設定方法
[変数]>組み込み変数の[設定]>[Click Element]にチェック
※その他のクリック変数もとてもよく使うので、一緒に有効化するのがオススメ！
変数の設定を有効化しただけではプレビューやデバッグモードには何も表示されません。この変数を使うにはクリック用の「すべての要素」か「リンクのみ」トリガーが1つでも用意されていることが必要です。
例えば「リンクのみ」トリガーでリンクをクリックをした場合、Click Element変数はキャプチャのような値を取得することができます。
このようにClick Element変数は、クリックされた要素の値を取得することができます。
どうやってクリック要素のデータを取得しているのか？
ではClick Element変数がどうやってクリックされた要素のデータを取得することができるのか、この仕様についても説明していきたいと思います。
イベントリスナーについて
その前に前提の知識として、GTMの仕様についても少し説明をします。
サイトが表示されてGTMのコンテナを読み込んだり、リンクがクリックされたなどの動作を「イベント」と呼びます。また、イベントに応じて諸々の処理(関数の実行)をすることを「イベントリスナー」と呼びます。
GTMも各動作(イベント)をイベントリスナーで処理をしています。プレビューモードでみる「Container Loaded」「Dom Ready」「Window Loaded」などがありますが、これらもイベントリスナーになります。
Click Element変数がデータを取得する方法
Click Element変数は、このイベントリスナー(トリガー)で処理された内容の一部からデータを取得しています。Click Element変数がデータを取得するトリガーは下記のいずれかになります。
- クリック>すべての要素
- クリック>リンクのみ
- ユーザーエンゲージメント>フォームの送信
- ユーザーエンゲージメント>要素の表示
これらのトリガーはインタラクション(クリックなど)を検知すると、特定のデータをデータレイヤーにプッシュします。
プッシュするデータの内容は、インタラクションされた要素についてで、次のキーが含まれます。
| データレイヤーのキー名 | 内容 |
| gtm.element | クリックされた要素すべての値 |
| gtm.elementClasses | クリックされた要素のクラス属性の値 |
| gtm.elementTarget | クリックされた要素のターゲット属性の値 |
| gtm.elementUrl | クリックされた要素のURL |
| gtm.elementId | クリックされた要素のid属性の値 |
実際のプレビューモードで、データレイヤーを見てみるとキャプチャのようになります。
※もちろん値はインタラクションに応じて変動します。
Click Element変数は、クリックがされたときにデータレイヤーにプッシュされた「gtm.element」キーの値を取得します。
余談ですが、データレイヤーにプッシュされたキーの値は、「データレイヤー変数」でも取得をすることができます。
それでは実際に見てみましょう。まずはデータレイヤー変数を作成します。変数名は「gtm.element」を入力して保存します。
プレビューモードでクリックをした際の各変数の値は以下のキャプチャになります。Click Element変数とデータレイヤー変数の値は全く同じですね。
このデータレイヤー変数も駆使すると、実はかなり多くの情報を取得することができます。こちらは別の解説記事にまとめたいと思いますので楽しみにしていてください！
Click Element変数の活用方法
Click Element変数の仕様について解説していきました。ここからは実際の活用方法について説明します。
トリガー条件の「CSSセレクタに一致する」に使用する
Click Element変数の代表的な使い方としては、トリガー条件として「CSSセレクタに一致する(しない)」に使用することです。
CSSとは簡単にいうとサイトのデザインや文字装飾をするための言語になります。この記事ではCSSの説明は割愛しますが、GTMのトリガー条件にCSSを使うことはよくあるので覚えるとGTM活用の幅が広がります。
早速例を見てみましょう！
例えば、以下のようなコードのボタンがサイトに設置をされており、このボタンが押されたことをイベント計測したいとします。
<button type="button" id="buttonID">
<img src="button.png" alt="button_IMG" />
<span>サンプルボタン</span>
</button>
どのようにして、トリガー条件を設定するのが良さそうでしょうか？
まず、リンクが設定をされていないので、「リンクのみ」トリガーは使用することができません。なので、「すべての要素」トリガーで対応する必要があります。
次にトリガーの発生条件はどうしたらよいでしょうか。一般的なのは、Click ID変数やClick Classes変数を使って条件を指定することですね。しかし、今回のケースだとどうでしょうか。
ボタンは3つの要素(タグ)で構成されておりclass属性は設定されていません。また、id属性は親の<button>タグのみに設定されています。
ここで問題なのは、「すべての要素」トリガーの場合、Click ID変数やClick Classes変数はクリックされた箇所のみの要素を取得するということです。
実際にそれぞれのタグをクリックした場合、プレビューモードで見てみると以下のキャプチャのようになります。ボタンタグのみがClick ID変数に値が入ってきます。
■ボタン(buttonタグ)の要素をクリックした場合
■画像(imgタグ)とテキスト(spanタグ)の要素をクリックした場合
このようにクリックした箇所(要素)によっては、IDを取得することができないので、トリガー条件にClick ID変数を使うことは適切ではありません。
力技で、3つの要素それぞれに専用のトリガーを作って、1つのタグに割り当てることももちろん可能ですが、シンプルではありませんよね。GTMコンテナは可能な限りシンプルな構成にするべきです。
このようなケースの場合、Click Element変数がとても役に立ちます。Click Element変数とCSSセレクタを使って、1つのトリガーを作成してみましょう！
GTMで[トリガー]>[新規]>[すべての要素]を選択し、次のように設定を入力します。
CSSセレクタの条件の「*」がポイントです！
「*」は、指定した条件以降の値をすべて対象に含める際に使います。
※「*」の前には半角スペースが入るので注意です
※「#」はidを指定する場合に先頭につけます
「#buttonID *」の意味合いとしては、「buttonID」を持つ要素と、その子孫の要素すべてが範囲となります。
imgタグや、spanタグはIDが「buttonID」のボタンタグの子要素になります。そのため、imgタグや、spanタグの要素がクリックされてもトリガー条件に一致することができます。
このように、Click Element変数を使うことで複数の要素を条件にトリガー設定をすることができます
CSSをトリガーの条件にする際には注意です。CSSは、本来HTMLのデザイン装飾用の言語であるため、デザイン変更などで値が変更され計測できなくなるリスクがあります。
カスタムJavaScript変数と併用して要素の値を取得する
カスタムJavaScript変数と併用することで、様々な要素の値を取得することもできます。
例えば、以下のようなHTML構造があるとします。
<div id="product_list">
<div class="details">
<h2>商品リスト</h2>
</div>
<div class="link">
<ul>
<li><a href="product1.html"> Product 1 </a></li>
<li><a href="product2.html"> Product 2 </a></li>
</ul>
</div>
</div>
「リンクのみ」トリガーをつかって、リンクのクリックをイベント計測したいとします。
ただし条件として、IDが「product_list」を持つ要素の配下のリンクである必要があるとします。
これを取得するためには、次のようなカスタムJavaScript変数を作成します。
function() {
var el ={{Click Element}}.closest("#product_list");
return el.id
}
このカスタムJavaScript変数は、以下のステップで処理がされています。
- Click Element変数がクリックされた要素を取得する(今回はaタグ)
- ①の要素からIDが「product_list」をもつ要素があるかをチェックする
- IDが一致する要素があったらその要素のIDの文字列(=product_list)を変数に格納する
実際にプレビューモードで確認すると、以下のキャプチャのようにIDの文字列を変数として格納します。
後はこの変数をトリガー条件に使うことで、IDが「product_list」を持つ要素の配下のリンククリックのみイベント計測をすることができます！
まとめ
今回は、GTMのClick Element変数の使い方について説明しました。
Click Element変数は使えるようになると、HTMLの要素を自由に扱うことができるようになり、計測の幅がとても広がりますので是非使ってみてください！
この記事のポイントをまとめると以下のようになります。
- Click Element変数は、クリックされた要素の値を取得する
具体的には、データレイヤーの「gtm.element」キーのデータを取得する - 他のクリック用変数とは異なり、複数の要素を扱うことができる
- トリガー条件のCSSセレクタの一致に使用することができる
- カスタムjavascript変数で、要素自体も自由に操作することができる
最後までお読みいただき、ありがとうございます！
ご感想やご意見などがあれば、ぜひTwitterまでご連絡ください。
