インターネット広告代理店|株式会社ユニークワン

コラム

alt属性を利用してGTMで画像クリックを計測する方法

alt属性を利用して画像クリックを計測

GTM(Google Tag Manager)を利用したイベントの計測の中で、画像のalt属性を利用した設定方法について紹介します。
この方法を活用することで、Click URL(リンク先のURLを指定)やClick Text(リンクに含まれるテキスト)では指定できないような計測(画像リンクのうちどのリンクの成果が高かったのか、など)ができるようになります。

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

***

 

1.alt属性はどんな時に使える?

リンククリックを計測する際、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ボタンのクリック数の計測が可能になります。

 

3.GTMでの設定方法

 

3-1.変数の設定

①『変数』をクリックし、ユーザー定義変数の横の『新規』をクリックします。

alt1

 

②ページ要素の『自動イベント変数』をクリックします。

alt2

 

③変数タイプを『要素の属性』に設定、属性名に『alt』をいれます。

この属性名を別のものにすることで他の属性も利用可能です。

変数名を『alt属性』とし、保存します。

これで、変数の設定は完了です。

 

3-2.トリガーの作成

①『トリガー』を選択し、『新規』をクリックします。

trigger1

 

②今回は「採用実績多数!信頼の製品2000点超!オンラインショップはこちら」のボタンを設定する場合で進めていきます。

alt属性設定

【設定内容】
トリガー名:『ボタン1クリック』
トリガーのタイプ:クリック₋すべての要素
トリガーの発生場所:一部のクリック
イベント発生時の条件:alt属性 含む
採用実績多数!信頼の製品2000点超!

『保存』をクリックして、トリガーの設定は完了です。

 

3-3.タグの設定

①『タグ』を選択し、『新規』をクリックします。

altタグ設定gtm

 

②タグの設定を下記のように行ってください。

alt属性gtm設定

【設定内容】
タグの種類:Googleユニバーサルアナリティクス
タグ名:【GA】連結金具LPボタン1クリック
トラッキングタイプ:イベント
アクション:btn1
トリガー:ボタン1クリック(3で作成したもの)

カテゴリ、アクションについてはGoogleAnalyticsで管理しやすいよう自由に入れてみてください。
『保存』をクリックして、トリガーの設定は完了です。

 

ここまで設定が終わったら、プレビューで確認後、公開しましょう。
公開し忘れが起きやすいので気を付けてください。
最後にGoogleアナリティクス側でも確認すると安心です。

 

まとめ

GTMでのalt属性の取得は、今回のような「同一ページ内で画像リンクが複数あり、それぞれの効果を計測したい場合」に効果的です。
設定について、もし不明な点がある方は、ぜひユニ―クワンにご相談ください。
初期設定の見直しから解析までお手伝いさせていただきます。

 

【関連リンク】

ユニークワンの「サイト分析」サービス

リスティング広告・SNS運用・動画活用など
デジタルマーケティング全般は私たちにおまかせください。

今すぐ無料相談をする