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

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

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

GTM イベントトラッキング WEB制作

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

公開日:
最終更新日:

GTM イベントトラッキング 関連ワード #124
HTML
使い方
SEO
WEB制作
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

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」は大体導入されていると思うので、知っとくだけでもちょっとはいいじゃないかと思います。

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

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

文中で紹介している商品

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

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

3,886円 (Amazon価格)

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

デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書 マーケティング・セールス 全般 【デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書】

3,126円 (Amazon価格)

GTM イベントトラッキング オススメ関連コンテンツ

SEO 関連記事はこちら すべての WEB制作 記事はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon