GTMのイベントトラッキングと独自変数の使い方

GTMのイベントトラッキングと独自変数の使い方

GTMを使ってイベント計測を簡単に行う方法

#124 GTM イベントトラッキング

WEB制作

GTMのイベントトラッキングを使うことで、設置している広告のクリック数やクリックされたページ、クリックされた商品名が取得できます。 data属性をユーザー変数に設定するという少し手間のかかる方法ですが、わかりやすく手順を図解で説明しました

公開日:
最終更新日:

サイトマップサイトマップ

Google Tag Manager でイベント計測をしよう

前回のGTM導入偏で、イベントトラッキングの話をしたまま終わったので、今回はイベントトラッキングの説明をします!

GTMを個人サイトで入れるメリットはこれだけだと捨て台詞を吐いて終わったので、ちゃんと説明したいと思います。

前提として、GTMの導入がすでに終わっている、というところから始まります。
よろしくお願いいたします。

グーグルタグマネージャー導入偏はこちらから

イベントトラッキング用のトリガーを作成する

アナリティクスのイベントトラッキングの設定を行います。
先に説明した、どんな広告がクリックされたかを計測するための設定です。

トリガーを作って、計測したいURLを登録して、タグに紐づければ完了です!

商品名を取得するdata属性を設定する

一番難しいところから先に説明します。
トリガーを独自変数で設定することで、指定した文字を取得することができるようになります。

イベントトラッキングの設定
data属性に商品名を指定

HTMLタグのデータ属性とは

データ属性というのは、好きなタグに設定して、自由に使える情報を渡すための項目、とでもいいましょうか。

例えば、リンクを設定するタグに<a>~</a>タグがありますよね。
このタグにデータ属性を振ると<a data-name="テキスト">となります。

タグの中に 「data-XXX="テキスト"」とするだけで使えます。
data-の右側のXXXを英数で名付けて、= の右側に取得したいテキストをいれます。
このテキストは日本語も使えます。

そのデータ属性をGTMで取得する設定をすると、データ属性で指定したテキストがイベントラベルに表示されます。

Amazonのアフィリエイト管理画面だと、クリック数はわかるけど、何がクリックされたかはわからないんですよね。
売れた商品は教えてくれるけど。

data-nameを取得する変数を作る

「data-name」というデータ属性を取得するための変数を定義します。
GTMの変数に入ってユーザー定義変数の新規をクリック。

GTM 変数の定義
変数の定義をする

変数タイプを「データレイヤーの変数」

変数タイプから「データレイヤーの変数」を選択してください。

GTM変数タイプの設定
変数タイプの設定

データレイヤーの変数名を指定

データレイヤーの変数名を設定します。

「gtm.element.dataset.name」と入力してください。

GTM変数名設定
データレイヤーの変数名を設定

これは「gtm」の「element」の「dataset」から「name」を取得するという意味なので、data-testだったら
gtm.element.dataset.testになります。

入力が終わったら変数名に名前を付けて保存をします。
私は「data-name取得」という名前で保存しました。

このあと出てきますので覚えておいてください。

トリガーを作って設定する

変数の定義が終わったので、次はクリックで測定できる「トリガー」を作ります。

左にある「トリガー」を選択し、「新規ボタン」を押してください。

GTMトリガーの設定
トリガーを作る

トリガータイプをクリックから選ぶ

トリガーのタイプをクリックにある「リンクのみ」を選びます。

GTM トリガータイプの選択
トリガータイプを選択

計測するURLを設定

クリックの中にある項目から「一部のリンククリック」にチェックを入れて、
イベントから「Click URL」を選び「先頭が一致」を選んで、前方一致のURLを入力します。

GTM URLの設定
計測するURLを設定

この作業をURLの分だけ繰り返します。
Amazonのリンクと、A8のリンクと、バリュコマースのリンクを取得したいので、3つトリガーを作ります。

計測するURLについて

私は、Amazonのクリックと、A8のクリック、バリューコマースのクリックの計測がしたいのでその3つを入力しています。
AfiBでも、もしもでも、レントラックスでも、フェルマでも入力規則は同じだと思います。(全部ASPの名前です)

AamzonのURL設定

https://www.amazon.co.jp
これを入力しています。APIのアマゾンアフィリエイトの設定です。

A8のURL設定

https://px.a8.net

バリューコマースのURL設定

ck.jp.ap.valuecommerce.com

URLを入力したら名前を付けて保存

私は1URLごとにトリガーを分けています。
それぞれわかりやすい名前をつけて、保存をクリックします。

タグの設定をしてトリガーを紐づける

再び、タグを作って、今作ったトリガーを設定していきます。

タグの新規をクリックしてアナリティクスを選ぶ

最初にやった作業と同じです。
タグを選んで新規を押して、えんぴつを選んで下さい。

GTM タグの新規作成
タグの新規作成

これも同じ。
GAタグの一番上のやつを選びます。

GTM GAの選択
GAタグの一番上を選択

イベント計測用の設定

ここからイベント用に設定していきます。

トラッキングタイプをイベントに変更して、以下図のように設定します。

GTM イベントトラッキングの設定
イベントトラッキングの設定

トラッキングタイプは「イベント」を選択し、カテゴリ、アクション、ラベルは、横にあるブロックアイコンをクリックして選びます。

GTM変数の選択
変数の選択

カテゴリには「Page Path」
アクションには「Click Text」
ラベルには「data-nameを取得」を選びます。

HTMLにdata属性を設定

data属性の取得がなければ、GTM上の設定だけでイベントが完了するのですが、data-nameを取得したいタグに設定します。

<a>タグに、data-name="商品名"を設定します。

<a href="https://www.amazon.co.jp/dp/B07HCSL6BN?psc=1&SubscriptionId=AKIAJNYRHBEITTMFG3YA&tag=startpoint-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B07HCSL6BN" target="_blank" rel="noopener sponsored" class="ama_bt" data-name="Kindle Paperwhite 防水機能搭載 Wi-Fi 32GB 電子書籍リーダー">Amazonで詳細を見る</a>

長いので改行して一部省略して書くとこう。

<a href="https://www.amazon.co.jp/略" target="_blank" 
rel="noopener sponsored" 
data-name="Kindle Paperwhite 防水機能搭載 Wi-Fi 32GB 電子書籍リーダー">
Amazonで詳細を見る
</a>

こんな感じで、取得したいリンクにdata-nameを振って、設定する。
これで完了です。

GTM公開ボタンをおして完了

準備が整ったら「公開ボタン」を押して完了です。

GTM 公開ボタンを押す
公開を忘れると動きません

これでクリックイベントの計測ができるようになりました。
data属性使わなければ、GTM上の設定だけでクリックイベントが取得できるんで、簡単だったんですけど、data属性の話を入れたせいでものすごく大変なイメージがありますね。

イベントトラッキングの設定まとめ

この記事を読んで、やってみようという方が何人いるのか、誰もいないんじゃないかとそんな予感もありますが、とりえあず最後まで書きました。

めんどくさいんだけど、どんなリンクがクリックされたか知りたいじゃないですか。
ちょっと手間かかるけど、これによって色々なテストができるようになるので、役に立つ人もいるんじゃないかと、そういう気持ちで書きました。

導入せずとも、グーグルタグマネージャーがどんなものかが少しでも伝わったら嬉しいです。
仕事でEC系のWEBマーケティングやると「GTM」か「YTM」は大体導入されていると思うので、知っとくだけでもちょっとはいいじゃないかと思います。

ここまで読んでいただけたら、それだけでも幸いです。

GA4でGTMをつかったイベントトラッキングの方法

記事内で紹介している商品リスト
(価格はAmazon参考価格)

実践 Google タグマネージャ入門 増補版

381円(税込)

実践 Google タグマネージャ入門 増補版

デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書

433円(税込)

デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

3,278円(税込)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

2,585円(税込)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

これからのSEO内部対策 本格講座

1,980円(税込)

これからのSEO内部対策 本格講座

Webプロジェクトを成功に導く 戦略的SEO思考

1,980円(税込)

Webプロジェクトを成功に導く 戦略的SEO思考

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

1,738円(税込)

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

10年つかえるSEOの基本

1,628円(税込)

10年つかえるSEOの基本

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

1,540円(税込)

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

GTM イベントトラッキングの関連ページ

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

GA4カスタムイベント

GA4 GTMを使ったカスタムイベントの設定方法

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

GA4カスタムイベント
1位

GA4カスタムイベント

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

車用スマホホルダー
3位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

ツタヤディスカスでCDレンタル
4位

ツタヤディスカスでCDレンタル

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

PHPを使って作るCMS
5位

PHPを使って作るCMS

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

bookblock
6位

bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

CLS対策初級編
7位

CLS対策初級編

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

PHPで作るカレンダー
8位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

CSSで作る横スライド
9位

CSSで作る横スライド

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

MusicBeeのレイアウト変更方法
10位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

実践 Google タグマネージャ入門 増補版

381
(税込)