【GTM】ボタンがクリックされると効果測定！クリックトリガーの使い方を徹底解説

Google タグ マネージャーを使用して、ユーザーがWebページ上にあるボタンをクリックしたタイミングでGoogle広告やGoogleアナリティクスでの効果測定を行う事が出来ます。本記事では、Google タグ マネージャーのクリックトリガーについて詳しく解説しています。

クリックトリガーでできる事

Google タグ マネージャーで使用できるクリックのトリガーでは、特定のボタンやリンクをユーザーがクリックしたタイミングでコンバージョンタグを動作させます。つまり、ユーザーが電話番号をクリックしたタイミングや、ページにあるボタンがクリックされたタイミングを指定して効果測定を行う事が出来ます。

クリックトリガーの種類

クリックを条件として設定する事ができるトリガーの中には、以下の２つが存在しています。

全ての要素

全ての要素のクリックトリガーでは、HTMLのどのブロック要素でもクリック対象として指定することが出来ます。特定のボタンのみを対象としたクリックの効果測定を行いたい場合、そのクリック対象のボタンのHTML要素をGTM側から指定するだけで設定出来ます。

設定方法

クリック対象の要素の指定では、GTMでデフォルトで用意されている変数を使用します。メジャーなところで紹介すると、要素のidやclass名、CSSセレクタあたりでしょうか。例えば、以下のようなHTML要素のボタンがあるとします。

<button class="tel"><span>電話お問合せ</span></button>

このボタン要素には、class名が付与されているので、GTM側では、以下のようにclassの変数を使用する事が出来ます。

以上の設定で、『telというclassの名前を含むHTML要素がクリックされたらトリガーが発動する』という条件設定になります。

リンクのみ

クリックトリガーのリンクのみでは、名前の通り、リンクがクリックされたタイミングでトリガーが発動します。リンクの要素を指定するので、HTML要素の指定はhrefでリンク化されたものに限定されます。ほとんどの場合、ページ上に掲載されている電話番号がこの形なので、電話番号クリックでの効果測定を行いたい場合はこのリンクのみのトリガーが適しています。

設定方法

リンクの要素の指定では、GTMでデフォルトで用意されている変数を使用します。このトリガーでは、指定したURLがクリックされるタイミングを発動条件とするので、『Click URL』の変数を設定します。

例えば以下のHTMLリンク要素があるとします。

<a href="tel:0120123123">0120-123-123</a>

このHTML要素のリンクの部分のみを指定します。Click URLの変数を使用して、href=”xxxxxxxx”に設定されているリンク部分のみをトリガー側へ設定します。

以上の設定で、『0120-123-123のURL含むHTML要素がクリックされたらトリガーが発動する』という条件設定になります。

動作確認

タグとトリガーの設定が完了すると、動作確認を行います。GTMでは、テスト環境のプレビューモードを使用して動作確認を行うことが出来ます。プレビューモードの使用方法についてまだ知らない方は、以下リンク先ページを確認してください。

動作確認をし、問題がなければ最後に忘れずにGTMコンテナを公開し、本番環境へ反映させましょう。