【失敗作】GTMでチェックボックスのクリックイベントを取得する方法

coding Google Tag Manager
Google Tag Manager
この記事は約6分で読めます。
スポンサーリンク

今回はGTM(Google Tag Manager)を活用して、チェックボックスのクリックイベントを取得する方法をご紹介。
と思って意気揚々と検証して見たら穴があったので失敗作としてご紹介…!

めっちゃ書いた最後の最後に現環境では計測できないことに気づいたので、以下意気揚々とできる風に書かれていますが、できませんのでご注意ください。

それでは見ていきましょう!
※失敗作ですのでマネは自己責任でお願いします笑

GTMでチェックボックスのクリックイベントを取得する方法

今回は実際に作業して検証した結果、途中で設定を変える必要が出てきました。
理由は、当初意図していた値をしっかりと取得できていなかったから。

イベント設定時、計測設定時には基本的な設定であってもしっかりと検証をして意図した値を取れているか確認することが重要です。それでは見ていきましょう。

GTMでワークスペースを新設する

まずGTMで作業をする場合には必ずワークスペースを1つ新設しましょう。無料版でも3つは作成することができます。

ちなみにワークスペースとは、いわゆるバージョン管理ができる機能で、他の人と編集がバッティングしてもそれぞれの更新が反映されるような仕組みになっています。

具体的な新設方法を見ていきましょう。

Default Workspaceをクリック

gtm_1

右上の「+」ボタンをクリック

gtm_2

名前を入力して保存

gtm_3

これでワークスペースの作成は完了です。続いてトリガーを設定していきます。

トリガーを設定する

トリガーは「どんな条件でタグを発火させるか」という条件を指定する機能です。設定に変数を使ったりすることもあります。

変数についてはこちらを参照頂ければと思いますが、ざっくり言うと、同じタイプのデータが格納されている箱だと思って頂ければ大丈夫です。

変数について - タグ マネージャー ヘルプ

それではトリガーの設定方法を見ていきましょう。

左メニューにある「トリガー」をクリック

gtm_4

「新規」から新規トリガーを設定する

トリガー名を入力

gtm_6

トリガータイプ「すべての要素」を選択

リンクのクリックを取得する場合はその下にある「リンクのみ」でOkですが、リンクでない場合は「すべての要素」を選択します。

gtm_7

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

以下、問い合わせページにあるフォームのチェックボックスをデベロッパーツールで確認します。
※F12を押すか右クリックで「検証」を選ぶかでデベロッパーツールは立ち上がります。

お問い合わせ

上の矢印がついているボタンを押すとページ内の要素ごとのコードを確認できます。

gtm_20

今回のチェックボックスを確認すると、1つ1つのチェックボックスにはclass=”checkbox-multiple”というクラスがついていますが、これをトリガーに設定するとテキスト文字列が取得できず、どのチェックボックスかが一目でわからなくなってしまいます

そのため今回はその1つ上の階層にあるclass=”grunion-checkbox-multiple-label checkbox-multiple”を取得します。これが各チェックボックス共通で、かつチェックボックス+文字列までを囲っている要素のclassなのでこれを使ってあげればテキスト文字列まで取得できると考えられます。

classはページ内に同じclassが複数存在し得ますが、idはページに1つしかないので1つ1つ固有のイベント設定をするときは idを活用します。イベント設定で活用するclassが他ページあるいは同一ページの他にある可能性もあるので、あまりclassを元に設定するのは望ましくありませんのでご注意ください。

確認した要素をトリガーに設定

今回は確認して以下を設定します。

class:grunion-checkbox-multiple-label checkbox-multiple
ページ:問い合わせページ(今回はPage Path 含む、で指定)

gtm_10

これでトリガーの設定は完了です。

タグを設定する

続いてタグを設定していきます。

左メニューにある「タグ」をクリック

「タグ」>「新規」で新規タグを作成します。

gtm_19

タグの名前を入れる

gtm_12

「Google アナリティクス:ユニバーサルアナリティクス」を選択

イベント設定時などGAにデータを飛ばしたいときは基本的にこちらを活用します。

gtm_13

トラッキング情報を入力

トラッキングタイプを「イベント」にすると、カテゴリ・アクション・ラベルが出てきます。なお、それぞれがGA上の「イベントカテゴリ」「イベントアクション」「イベントラベル」に該当します。

ここでは以下のように設定します。

カテゴリ:チェックボックスのクリックだとわかるような任意の文字列(click)
アクション:チェックボックスのクリックだとわかるような任意の文字列(checkbox)
ラベル:チェックボックスの問い合わせテキスト文字列

ラベルの設定のみ変数というものを活用して入れていくので、右側にあるマークをクリックしましょう。

gtm_14

「click Text」を選択

gtm_15

Googleアナリティクス設定とトリガーを設定しておしまい

最後に、Google アナリティクス設定を設定し、トリガーに作成したトリガーを設置すればタグの作成も完了です。

gtm_16

なお、非インタラクションヒットについては「偽」を選択しましょう。
理由は以前以下に記載済みです。

非インタラクションヒットとは「ユーザーの行動とは関わりがないヒット」のこと。イベントが発生(ヒット)した際に、そのヒットがユーザーの行動と関わりがない場合は「真」、関わりがある場合は「偽」を選択することになります。
(参照元:https://www.log-stocker.com/google-analytics/357/)

検証する

最後に実際に動作するか検証します。

方法としてはGTMのプレビュー画面で発火しているか確認する方法と、デベロッパーツールで確認する方法の2つがあります。

↓具体的な方法は以下を参照ください↓

404 NOT FOUND 現在工事中 | Log Stocker
デジマのインハウス運用に役立つメディア

ちなみに検証したところ、テキストをクリックした場合の値は取れているものの、チェックボックスをクリックした場合には取得できていないことが発覚しました(泣)
また、クリックするたびにイベントが発生するので、チェックを外す・付けるを繰り返すとその都度イベントが発生してしまうというエラーも発覚しました。。。

良い子の皆様はぜひマネをしないようにお願いします。

まとめ

以上、GTMでチェックボックスのイベントを取得する方法(失敗作)でした。

なお、当然サイトの環境によって計測の仕方は異なりますし、どのような設定をしたらいいかというのは検証が必要です。

結果として今回のように失敗する可能性もありますが、未然に失敗を防げるという意味では検証の重要性を理解頂けたのではないでしょうか!笑

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
Log Stocker
タイトルとURLをコピーしました