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

X (Twitter) Facebook Hatena Pinterest Email Pocket

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

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

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

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

この記事の目次

カスタムイベントトリガーとは
カスタムイベントの発生させ方
値を取得してGAに渡す
- eコマースをdataLayer.push
- 記事情報をカスタムディメンションへ
ページ情報をGAに送るまとめ
関連情報リンク
編集後記

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

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

設定自体はとても簡単で、上図ですと、「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指定がない場合でも、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

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

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

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