ページ内の値を取得しGTMのカスタムイベントでGAに渡す方法

公開日: : 最終更新日:2019/02/01 タグマネージャー , , ,


LINE facebook twitter URLコピー
B! pocket note 楽天


RSS購読のURLが変わりました。
新しいFEED購読方法を見る

カスタムイベントで発火
突然ですが、私のGAを運用は、Googleタグマネージャ(以下GTM)です。ただ、トリガーはカスタムイベントです。All Pages やDOM Ready などではありません。

こんにちは、GTM大好きカグア!(@kagua_biz)です。今回の記事は「あくまでいち事例」として私の手法を共有します。

これが正解というものでは決してありませんし、またリスクやデメリットも当然存在しますし、JavaScriptの専門家でもありませんので、運用される方は自己責任にてお願いします。なお、執筆や動作確認やキャプチャは2018年11月14日時点でのものです。

>>人気の「Googleタグマネージャ」最新関連書籍一覧はこちら。
Amazonで詳しく見る

関連記事
>>レスポンシブ含むウィンドウサイズをGoogleタグマネージャで取得した
>>Googleタグマネージャだけで仮想PVを計測する方法
>>タグマネージャー | カテゴリー

カスタムイベントトリガーとは

ある特定のカスタムイベントの発生を検知したら発火させることができるトリガーです。トリガー>新規作成>トリガーの設定>カスタム イベント から作成できます。
カスタムイベントトリガー

設定自体はとても簡単で、上図ですと、「float」というイベントを検知したらxxxを発火させる、みたいな感じで使用します。

わたしは、このトリガーをGoogleアナリティクスタグの発火に使っています。

カスタムイベントの発生させ方

そもそも検知するイベントはどのようにして発生させるのでしょうか。イベントはJavaScriptから簡単に発生させることができます。

<script type="text/javascript">
dataLayer.push({
 "event" : "float" // イベント名
});
</script>

ここで発生したイベントを検知するトリガーがカスタムイベントトリガー、となります。

ですからコンマ何秒という差異に目をつむれば、以下は同じ挙動をします。

  • トリガー「All Pages」でGoogleアナリティクスタグ発火
  • トリガー「All Pages」でカスタムHTMLタグを発火させ、カスタムイベント発生、そのイベントでGoogleアナリティクスタグ発火

ではなぜこういう面倒なことをするのでしょうか。それは予めGoogleアナリティクスにデータを渡したいときに便利だからです。

値を取得してGAに渡す

eコマースをdataLayer.push

例えば、Googleアナリティクスのeコマース機能を使いたいとき、カートのプログラムがいじれないとします。そういうときに、画面上に表示される金額などをJavaScriptで取得して、Googleアナリティクスのヘルプにしたがってデータをpushします。この最後に、カスタムイベントもpushしますと、ちゃんと発火します。
>>Google アナリティクスの e コマース – タグマネージャ ヘルプ

<script type="text/javascript">
now = new Date();
//<![EDATA[
var transactionId = now.getTime();
var cartProducts = [];
cartProducts.push({
	"id": transactionId, // 受注ID
	"name" : "xxxxx" , // 商品名
    "sku": "yyyyy", 
	"category" : "zzzzz" , // 商品カテゴリ
	"price" : "ppppp" , // 単価
	"quantity" : "aaaaa" // 数量
});
dataLayer.push({
	"transactionId" : transactionId,
	"transactionTotal" : "mmmmm" , // 合計
	"transactionTax" : "nnnnn" , // 税金
	"transactionShipping" : "ppppp" , // 送料
	"transactionProducts" : cartProducts, // 商品情報
	"event" : "trackTrans" // カスタムイベント名
});
//]]>
//	"name" : "" , // 商品名
</script>

記事情報をカスタムディメンションへ

コンテンツ本文のHタグの文字列を取得し、Googleアナリティクスに渡したい、そういうときにも便利です。
>>要素の取得方法まとめ – Qiita

タグにid指定がしてあれば簡単に要素を取得できます。以下は、id指定がされているタグのなかの文字列を取得し、consoleに出力できている様子です。
idがわかれば取得可能

id指定がない場合でも、document.querySelectorAll() などのメソッドを使いますと、CSSセレクタをうまく指定してあげれば、大丈夫かと思います(このあたりは詳しくないので、用語の使い方は、間違っているかもしれません)。

例えばこんな感じに、ブログ記事のカテゴリーとライター名をコンテンツ内から取得し、それをpushしてから、カスタムイベント「tagget」でGoogleアナリティクスを発火させるなどです。

<script>
var a = document.getElementById("category").innerHTML;
var b = document.getElementById("author").innerHTML;
var dataLayer = dataLayer || [];
dataLayer.push({
 'category': a ,
 'author': b ,
 'event' : 'tagget' // イベント名
});
</script>

なお、Googleタグマネージャでデータをキャッチできるように、あらかじめデータレイヤー変数を作成しておきましょう。
>>Googleタグマネージャのデータレイヤーで、Googleアナリティクスのカスタムディメンションをいれてみた – Qiita

  1. カスタムイベントでdatalayer.push
  2. データレイヤー変数でデータをキャッチ
  3. Googleアナリティクスタグにデータレイヤー変数を使用

そうしますと、上記のような流れで、コンテンツ内の情報をデータレイヤー変数にキャッチさせ、その変数をGoogleアナリティクスのカスタムディメンションで使えば、ちゃんと記録される、ということになります。なお、Googleアナリティクスのプロパティ設定画面で、予めカスタムディメンションは用意しておきましょう。

いずれにせよ、カスタムHTMLでページ上の特定の文字列を取得してからカスタムイベントを発生させ、その上でカスタムイベントトリガーでGoogleアナリティクスを発火させれば、GAのカスタムディメンションなどにデータを送ることもできるようになるはずです。

ページ情報をGAに送るまとめ

  1. 予めGAで、eコマースやカスタムディメンションの設定しておく
  2. 予めGTMで、dataLayer変数を設定しておく
  3. 予めGTMのGAタグに、dataLayer.push変数を仕込む
  4. JavaScriptを使ってページ内情報を取得(カスタムHTMLタグ)し、カスタムイベントを発生させる
  5. カスタムイベントトリガーでGAを発火させる

基本的な流れは上記のようになります。予め作っておく箱が多いため、こんがらがってくるかもしれません。dataLayer.push変数名など、計画的に命名しましょう。

お疲れ様です。

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社)

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社) |本 | 通販 | Amazon
Amazonで詳しく見る

関連情報リンク

アユダンテ畑岡さんの神記事。
>>実践 Googleタグマネージャ入門 コーナーの記事一覧 | Web担当者Forum

CSSセレクタを調べるのに、デベロッパーツールは必須。
>>Chrome デベロッパーツールの使い方まとめ – Qiita

本当にそうだと思います。
>>dataLayerを制するものはGTMを制す – Qiita

慣れてしまえば、テンプレ化できる作業かと思います。
>>Google Tag Manger から Google Analytics にカスタムイベントを送る方法 – Qiita

GIFアニメで視覚的にわかりやすそう。
>>できるだけ簡単に解説!dataLayerを使ってGoogleタグマネージャーをさらに使いこなす方法 – Life Design Edit

GTMの基本を知りたいかた向け。
>>Googleタグマネージャの導入から設定方法の手順まで!簡略化完全ガイド | tree

Googleアナリティクス公式フォーラムで超有名アンサリストRayさんの珠玉の記事。
>>customTaskを用いてClient IDをカスタムディメンションに送信する方法 – Google 広告主コミュニティ

編集後記

Googleタグマネージャは本当に便利です。そして、JavaScriptは本当にいろいろなことができて便利です。

ただおそらく一般の人にわかりにくいのが、非同期と呼ばれるタイミングの問題です。カスタムイベントは発火タイミングをコントロールできる手段の1つです。

私も、データレイヤーの扱いも含め、JavaScriptがもっと書けるようになって、もっとGoogleタグマネージャを便利に使いたいと思います。

「カスタムイベント」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile


Yoshihiko Yoshida
ブロガー兼ユーチューバー。個人事業主でネット業界のお仕事24年目です。40代で2児の父。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑