Googleタグマネージャーでボタンごとのクリックイベントを計測する方法

コラム

Googleタグマネージャーでボタンごとのクリックイベントを計測する方法

公開：2020.07.22 更新： 2022.08.04 アナリティクス

gtmでボタンのクリックイベント計測

GTM（Google Tag Manager-グーグルタグマネージャー）を利用したイベントの計測の中で、画像のalt属性を利用した設定方法について紹介します。
この方法を活用することで、Click URL（リンク先のURLを指定）やClick Text（リンクに含まれるテキスト）では指定できないような計測（いくつかある画像ボタンのうちどのリンクの成果が高かったのか、など）がGoogleアナリティクスできるようになります。

ぜひ参考にしてください。

過去に実施しお客様に好評だった「アクセス解析の基礎セミナー」の動画も配信中です！Googleアナリティクスの基本的な使い方からサイト改善につなげる具体的なプロセスを余すことなくお届けしています。ぜひこちらもご覧ください。

セミナーを見てみる

1.GTMでボタンのクリック数を取得するメリット

リンククリックを計測する際、GTMにはあらかじめ「Click Text変数」が用意されています。

これはテキストリンクを取得する変数なので、画像リンク（ボタンリンクなど）の場合は活用できません。

そこで役に立つのが、今回紹介する、alt属性を取得する計測方法。

同じWebページ内に同じリンク先が設定されているボタンが複数ある場合、alt属性が異なっていれば、それぞれのボタンについてクリックイベントを計測できます。

2.設定事例(「浅野金属工業様」LP)

浅野金属工業様LP

https://asano-metal.com/rigging-lp/

alt属性の取得を設定する事例として、弊社クライアント・浅野金属工業様のLPを例に説明します。

このLPの目的は「ECサイトへの誘導」。
ページ内には「オンラインショップはこちら」のCTAボタンが3つあります。
どれもリンク先は同じURL。alt属性のみテキストが異なっています。

onlinshopcta1

上記のCTAボタンには以下のalt属性を設定しました。

<a href="https://unique1.co.jp//www.asano-metal.co.jp/asano-metal-cgi/secure/ec/EcTop.php" target="_blank">
<img src="https://unique1.co.jp/bnr_ec_01.png" alt="採用実績多数！信頼の製品2000点超！" class="pc_tb">
</a>

onlineshopcta2

こちらのCTAボタンには別のalt属性を設定。

<a href="https://unique1.co.jp//www.asano-metal.co.jp/asano-metal-cgi/secure/ec/EcTop.php" target="_blank">
<img src="https://unique1.co.jp/bnr_ec_02.png" alt="最短即日出荷ですぐ届く。" class="pc_tb">
</a>

すべてのリンククリックを同一のものとして計測する場合は変数「Click URL」を使用すれば計測できますが、CTAボタンのクリック数をそれぞれ計測したい時は、alt属性による指定を行います。

以下で紹介する手順に沿ってalt属性で変数を指定することで、各CTAボタンのクリック数の計測が可能になります。