【Googleタグマネージャー】イベントトラッキングで alt 等、任意の属性名を取得する

2018/11/07 内容訂正
「Click Classes」ではなく、「Click Element」では?とのご指摘をいただきました。
お詫びして訂正いたします。


イベントトラッキングでクリックされた要素の任意の属性名を取得したい場合があります。
今回は参考に img がクリックされた前提で alt を取得するまでをご紹介します。

下準備

Click Element を有効に

Googleタグマネージャー 1
変数に移動して設定から Click Element を有効にします。

トリガーの作成

新しいトリガーを作成

Googleタグマネージャー 2
「新規」をクリックして新しいトリガーを作成します。

トリガータイプを指定

Googleタグマネージャー 3
「トリガータイプ」は クリック → すべての要素 を選択。

トリガーの発生場所を指定

Googleタグマネージャー 4
「このトリガーの発生場所」を「一部のクリック」にして
先程有効にした「Click Element」を選択。
「CSSセレクタに一致する」を選び、
今回対象にしたい要素のセレクタをCSSと同じように指定します。

タグの作成

新しいタグを作成

Googleタグマネージャー 5
「新規」をクリックして新しいタグを作成します。

タグの設定

Googleタグマネージャー 6
「タグタイプ」はユニバーサルアナリティクスを選択します。
※古いGAタグを利用の場合は「従来の Google アナリティクス」

「トラッキングタイプ」は「イベント」を選択します。

「カテゴリ」と「アクション」を指定します。
この時点では「ラベル」は空にしておいてください。

さらに上記画像には写っていませんが、
「このタグでオーバーライド設定を有効にする」にチェックを入れて、
「トラッキングID」を入力します。

※「トラッキングID」はタグマネージャで管理したい
Google アナリティクスのUA-から始まるトラッキングIDです。

すべて入力したら「ラベル」横のボタンをクリックします。

カテゴリ、アクション、ラベルの役割

なお、カテゴリ、アクション、ラベルの役割は下記のようになっています。

カテゴリ = イベントが発生している場所の詳細
アクション = ウェブサイトでのユーザー行動
ラベル = クリックされた対象物に関する詳細情報

変数の作成

新しい変数を作成

Googleタグマネージャー 7
「ラベル」横のボタンをクリックすると変数の一覧が出てきます。
右上の「+」ボタンをクリックします。

変数の種類

Googleタグマネージャー 8
「自動イベント変数」を選択します。

変数の内容

Googleタグマネージャー 9
「変数タイプ」を「要素の属性」にします。
属性名を取得したいHTMLの属性名(今回はalt)にします。

「保存」をクリックします。

完成!

Googleタグマネージャー 10
変数の設定を終えるとタグの設定画面に戻り「ラベル」に「{{alt}}」と入ります。
以上で設定作業は完了ですので保存後にプレビューをして問題がなければ公開してください。

Writer

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。