【Google Tag Manager】先週リリースされたJavascript Error Eventlistnerを試してみる

先週の金曜日、Google Tag Manager(GTM)のタグにJavascript Error Eventlistenerが追加されました。
以前、解析界隈でJavascriptのエラーをtry/catchを使ってエラー計測出来るよねという話があったのですが、タイムリーな事にGoogleが正式にイベントリスナーとしてリリースをしたという感じです。
まだヘルプの更新はされていないのですが、使い方は通常のイベントリスナーと同じように設定します。とはいっても、毎回設定を忘れてしまうのでGoogle検索からスタートしてしまうダメな感じなのですが・・・(笑

1.タグでJavascript Error Eventlistenerを設定します。

2.マクロを設定します。
「Javascript Error Eventlistener」を設定すると、いくつかの変数を取得出来るようになります。
海外の情報だと・・・
「gtm.errorMessage」にjavascriptのエラーメッセージ、「gtm.errorLineNumber」にエラー行ナンバーがInt型で返ってくるようです。
「gtm.errorUrl」というものもあるようなのですが。

今回はjavascriptのエラー内容を取得したいので、単純に「gtm.errorMessage」だけをdataLayerとして指定します。

※エラー行数なども変数に指定して、一緒にエラーの状況を取得出来るようにできるはずです。


3.エラーをイベントで取得する。



発火条件は、eventがgtm.pageErrorと等しい場合です。

そんな感じで、今回はテスト的な感じですがサクッとエラーメッセージを取得できました。

 ぜひ試してみてください。

【参考】
Google Tag Managerに関するまとめ

Google Tag Manager(GTM)でDOMの準備が完了後、複数の回Eventを飛ばす

タイトルはうまく付けられなかったのですが、ある特定の1ページを読み込んだ時にdataLayerを読み込んで、例えばカスタム変数として処理を行う事は簡単に行えます。

例えば、こんなdataLayerをページ内に埋め込んでおいて、Analytics側とGTM側でカスタム変数を設定しておけば問題ありません。

dataLayer = [{
'custom1': '1',
'custom2': '2',
'custom3': '3'
}];

で、今回実現したかったのは、

dataLayer = [{
  'statusCode': ['500','502','503']
}];

のような配列データをGoogle Analyticsへ送りたいということでした。
例えば、ある特定の商品がAカテゴリ、Bカテゴリ、Cカテゴリなどに所属していた場合、こんなデータをAnalytics側に通知して、どの延べのデータになりますが、どのカテゴリが一番注目度を集めていたかということを集計したい。といった感じです。

dataLayer = [{
  'productCategory': ['500','502','503']
}];

実際、私のニーズもそれにかなり近いものではありますが、この場合データをカンマ区切りで、例えばこんな感じでdataLayerを設定することは直ぐに出来ます。

dataLayer = [{
  'productCategory': '500,502,503'
}];

ですが、この方法はあとで集計がとても面倒くさい。
できれば配列でデータを渡して、シンプルに集計をしたい。。。

そこで、色々調べてみたのですが、カスタム変数にこのようにデータを渡すと最初の1つしかAnalyticsには入ってきませんでした。

dataLayer = [{
  'productCategory': '500’,
  'productCategory':  '502',
  'productCategory':  '503'
}];

ということで同じ変数を複数並べて取得するという方法は失敗。
で、どうやらEventを使って取得は可能だということで、実際やってみたら成功しました。
海外では結構実践されているようです。いくつか方法があって、これから紹介するやり方よりも全然単純なやり方もあるようです。

まず私のやり方ですが、ページ側には以下の様な配列を置いておきます。

dataLayer = [{
  'productCategory': ['500','502','503']
}];

もちろん事前に「productCategory」というデータレイヤー変数を定義しておいてください。
そして、Eventを飛ばすのに使うものはタグの「Custom HTML Tag」で、こんなものを書きます。

var modelCode = [];
  var productCategoryList = {{productCategory}};
        productCategoryListCnt = productCategoryList.length;
  for(var i = 0; i < productCategoryListCnt; i++) {
    dataLayer.push({'event': '●●Event名●●', 'eventAction': '●●Action名●●', 'eventLabel': productCategoryList[i] });
  }

見れば非常に簡単ですよね。
マクロの変数名「productCategory」の値を読み込んで、あとは普通のjavascriptです。

ただし！発火条件に注意！
この「Custom HTML Tag」は全てのTagの発火が終わった後に読み込む必要があります。
それを実現する方法はGoogleのオフィシャルヘルプに記載されています。

DOM の準備ができた時点でタグを配信するよう定義するには、配信ルールに「イベントが gtm.dom と等しい」という条件を追加します。

という部分と、一番最後に書かれているこの1文。

window.onload でタグを配信するよう設定するには、「イベントが gtm.dom と等しい」という条件を使用します。

私も後で知っただけなのですが。
即ち、英語版ですが、こんな設定のルールを用意して、それを発火条件とします。

これで完了！
dataLayer.pushを利用しているので、イベントの受け口もちゃんと用意していただければ、1アクセスで配列データ分Eventが発火します。

GTMが出た時にこういう条件設定が出来ると聞いてはいたのですが、いままでちゃんと調べずにいました。

【参考】
Google Tag Managerに関するまとめ

Google Tag Manager(gtm)でブラウザの広告ブロックを計測する

ChromeやFirefoxなどのブラウザがだいぶ広まり、拡張機能として「広告ブロック」を導入される場合が増えています。
世界規模のデータですが、過去のデータによるとChromeで1500万人、Firefoxで1500～2000万人が広告ブロック機能を導入しているということで、フリーミアムモデルなどで広告モデルを採用されている場合、どのくらい広告がブロックされているのかが気になるところ。

それをGoogle Analyticsで調査しようぜ！というわけで、海外でAdsense + Universal Analytics例が掲載されていました。

ポイントとしては

・HTMLのdiv要素などで高さを計測し、バナーがブロックされた場合、高さが0になることを測定する。
・CSSで表示されているかいないかを判定する

などがあります。

今回は一つ目の高さ判定で、Google Tag Managerでやってみようと思いまして、こんなソースをタグの「カスタムHTML」で埋め込みました。
※heightの90という数字は広告の大きさによって変化させてください。

window.onload = function() {
    var height = document.getElementById('●●●●').offsetHeight;
    if(height < 90) {
      dataLayer.push({'event':'Ads', 'action': 'Blocked'});
    } else {
      dataLayer.push({'event':'Ads','action': 'not-Blocked'});
    }
}

今回は「イベント」で計測する方法で書きました。
本当はカスタム変数のセッションレベルでの計測がいいと思いますが、カスタム変数を消費するのもなぁと思い、イベントでユニークイベント値を拾おうかというものです。
onloadでfunctionを動かすのはイケてないような気がしていますが、データの取得は問題なさそうでした。

もっとこんなやり方がある！というものは色々とあると思いますが。

【参考】
Google Tag Managerに関するまとめ

Google Tag Manager(GTM)のデバッグモードで、発火状況だけでなくルール単位での発火状況を確認する

Google Tag Manager(GTM)ではデバッグモードがあり、どのタグが発火しているかを「ステータス」を見ることで確認することが出来ます。

今回ご紹介するのは、現在はまだ表示されていませんが、ソース上は更に詳細なデバッグを行うことが出来るというものです。

まずは、実際に詳細データを表示した時のデバッグモード画面がこちらです。

どのルールに合致し、そのページトラッキングなどのタグが発火しているかが一目で分かります。

カスタムHTMLなどの場合は、そのscript情報が「タグ」欄に表示されます。

で、実際のソースですけれども。

デバッグモードで表示されている発火状況のテーブルのtrのidが、簡易版を示す「tag-●●-brief」と「tag-●●-detail」の2つで構成されており、通常はbriefのみ表示され、detail側はスタイルシートで非表示扱いとなっています。

このdisplay noneをデバッグツールで非アクティブ化すれば、詳細な情報も見えるようになります。

ぜひ試してみてください。

Google Analyticsのサイト速度・ページ速度のサンプリングレートを10％以上にあげることも可能

Google AnalyticsにはHTML5のNavigation Timing APIを利用して、ユーザー環境における実際のページ表示速度、サイト全体における表示速度を計測する機能があります。

以前はユーザーのサンプリングレートが10%だったと記憶しているのですが、現在はデフォルトのサンプリングレートが1%に変更されています。

この辺りは情報を追いかけられていなかった自分の失態ですね。

Google 側のヘルプを見ると

setSiteSpeedSampleRate()

の利用を推奨しておりますが、

【非同期版】(サンプリングレートが5%の場合)

_gaq.push(['_setSiteSpeedSampleRate', 5]); 

※trackpageviewの前に書く

【Universal Analytics版】

ga('create', 'UA-XXXX-Y', {'siteSpeedSampleRate': 5}); 

Google Tag Managerの場合は単純に「5」という数字を入れるだけのボックスがありますので、そこでリリースが可能です。

で、このサンプリングレートですが、値のレンジを調べてみるとGoogleの資料には0～100まで指定することが出来ると書かれてありました。

今まではNavigation Timing APIに対応していないSafariなどもありますので、大規模サイトではそれなりにサンプリングデータが取れたとしても、小～中規模サイトではサンプリング数が少なくデータによる上下の振れ幅が大きかったのですが、このサンプリングレートを上げることで中規模サイトぐらいでも安定して数値を取得することができますね。

今は個人的にテスト中なのですが100%のサンプリングでデータをとっています。

Analytics側からサンプル数のカラムが無くなってしまったようなのですが、数値の安定性という面で検証していこうかと思います。

【非同期版】(サンプリングレートが100%の場合)

_gaq.push(['_setSiteSpeedSampleRate', 100]); 

※trackpageviewの前に書く

【Universal Analytics版】

ga('create', 'UA-XXXX-Y', {'siteSpeedSampleRate': 100}); 

Google Tag Manager(GTM)を利用してGoogle Analyticsのインタレストカテゴリを有効にするのに1週間悩んだ・・・笑い話

Google Analyticsに新しく追加された「インタレストカテゴリ」。

Doubleclickのクッキー情報を利用することで年齢や性別など、ユーザーの詳しい情報が分かるようになる。そして年齢ごとの行動パータンやバナー露出などへも展開がどんどん広がっていくという代物ですが、1週間ほど前からポツポツと利用可能なアカウントが出てきました。

すぐに利用したいと思って、Google Tag Manager経由でチェックボックスをONに。

参考にしたのはGoogleの中の人のサイト。

文章で言うとこれですよ。

「Please note that if you use Google Tag Manager, you should select "Add Display Advertiser Support" in your Google Analytics tag template」

つまり、GTMの中でAnalyticsのWeb Property IDを入力するボックスのすぐ下、「リマーケティングなどのディスプレイ広告主向けの機能を有効にします。Google アナリティクス ヘルプセンターでリマーケティングの詳細について確認し、お客様のプライバシー ポリシーに対する影響を把握してください。」にチェックを入れるだけで完了。

そして、「出来た♪」と思いながら毎日眺めていたのですが、どうしてもグラフが見えない。。。

毎日、「トラッキングコードを確認」のボタンをクリックしてもダメ・・・

gtm.jsで吐かれているソースをみると、ちゃんとdc.jsが存在している。。。

他の仕事も忙しかったので放置気味だったのですが、やっと分かりました(笑)

いつもの英語版ヘルプにだけ書かれているパターンなんですね。

「Skip validation」ですよ。

GTMで設定した場合は「確認をスキップ」ボタンを押せと。

「確認をスキップ」ボタンの横に「この警告を常に無視する場合にクリック」と書かれているから、押したらもうインタレストカテゴリが使えないのでは？と、まぁそこまでではないにしても同じくらい押してはイケないものだと思っていました。。。

まぁ、データは「有効化」した時から入っているので良かったのですが、こんな些細な事で1週間も(笑

補足

ちなみに、1サイトで複数のWeb Property IDで計測を行っていて、そのIDの一部がインタレストカテゴリ有効、その他はまだインタレストカテゴリがリリースされていなかった場合、計測データ的に問題はなさそうなのですが、Chromeの拡張「Tag Assistant」で見ると「Detected both ga.js and dc.js scripts which will make tracking ambiguous.」のエラーが出ます。

ヘルプにある通り、データの信頼性が揺らぐ事になりますので、その場合はインタレストカテゴリを有効化しないほうが良いでしょう。

補足2

Analyticsを見ていて、かつインタレストカテゴリのデータを見ている人であれば分かるかも知れませんが、年齢や性別、興味のある分野などの情報をサイト運営者へ通知されています。

このインタレストカテゴリのデータ取得に伴いサイトのプライバシーポリシーが変更されている事もあるでしょうが、ポリシーを変更する必要がないという企業も多いと思います。

この情報はもちろん、オプトアウト可能です。

Google アナリティクス オプトアウト アドオンを入れるなど、必要に応じてオプトアウトもご検討ください。

Google Tag ManagerのMacroで、「dataLayer」にVersion2が追加された

Data Layer Versionという項目が追加されて、「Version 2」というものが出来た。

日本語のヘルプだとまだ全く触れられていないけれども、英語のヘルプを見ると「ドット」の処理方法が変わったらしい。

Version 1: allow dots in key names. For example, for dataLayer.push('a.b.c': 'value'), interpret the name of the key as "a.b.c" (i.e. {'a.b.c': 'value'}).
Version 2: interpret dots as nested values. For example, interpret dataLayer.push('a.b.c': 'value') as three nested levels:{a: {b: {c: 'value'}}}. This allows you to read nested values; you could set the variable name to 'a.b' and it would return the object {c: 'value'} (according to standard JavaScript rules). Nested pushing also allows you to directly edit nested values, so executing:
    dataLayer.push('a.b.c': 'value')
    dataLayer.push('a.b.d': 4)
on your page would result in a dataLayer that looks like {a: {b: {c: 'value', d: 4}}}.

https://support.google.com/tagmanager/answer/2644341?hl=en


今のところトランザクション、イベント、カスタムディメンションとかその辺りしか利用していないから、直ぐに使う事はなさそうだけど、配列のネストデータの編集が手軽に出来るようになったということで、また一歩Tag Managerの利用価値があがりましたね。

【参考】
Google Tag Managerに関するまとめ

【メモ】Google検索におけるキーワードランキングをGoogle Tag Manager(GTM)で拾う

鈴木謙一さんのBlogで過去に紹介された検索ランキングを取得するスクリプトをGTMのカスタムHTMLを利用して書くとdataLayerの部分だけ異なる、こんな感じのスクリプトになりますね。

if (document.referrer.match(/google\.(com|co\.jp)/gi) && document.referrer.match(/cd/gi)) {
  var myString = document.referrer;
  var r        = myString.match(/cd=(.*?)&/);
  var rank     = parseInt(r[1]);
  var kw       = myString.match(/q=(.*?)&/);
  
  if (kw[1].length > 0) {
    var keyWord  = decodeURI(kw[1]);
  } else {
    keyWord = "(not provided)";
  }

  var p        = document.location.pathname;
  dataLayer.push({'event':'SERPsrank' , 'eventaction': keyWord , 'eventvalue': p ,'eventlabel' : rank });
}

スクリプト自体をページに埋め込むのであれば、dataLayer({～という書き方で問題ないんじゃないかと思ったりします。カスタムHTMLを利用すればシステム部門での対応なしに完結してしまうので楽ですね。

ただ、一応データは取得できているようですが、もう一度ランクデータがリファラー上変更無いか確認する必要があるかも・・・。

だいぶSSL化やらブラウザ対応が進んでしまっているので、順位の取得も難しいという点では無意味かもしれませんが。

【参考】
Google Tag Managerに関するまとめ

heatmap.jsとGoogle Tag Managerを使った簡易ヒートマップ(mouse click)作成

昔から簡単にヒートマップを作るサービス、heatmap.jsを利用すれば、簡単なヒートマップ作成ぐらいなら出来てしまうのは知っていたけれども、実際に試したことがない。。。

ということで、簡単にGoogle Tag Managerと組み合わせてポジションデータを取得して、それをヒートマップ化してしまおうというのが、今回の趣旨。

heatmap.jsを利用して、こんなscriptを埋め込み。

window.onload = function(){
    document.getElementById("heatmapArea").onclick = function(e){
var position = document.location.pathname + document.location.search + '?position=' + e.layerX +','+ e.layerY;
dataLayer.push({'event': 'heatmapscript', 'action': 'mouseclick', 'event_label': position });
    };
};

ソースで分かる方もいらっしゃると思いますが、Event Trackingを利用して、Event情報にポジションデータを追加している。

あと、レスポンシブデザインのサイトだと解析出来ないけれども、idで「heatmapArea」を指定しているため、基本的に解像度の違いも吸収出来る。
ただし、あくまでもEvent Tracking。傾向値的に使ってもらいたい。

サンプルで作ったものがこんな感じ。
ヒートマップサンプルページ

Google Analyticsでデータを取得して、そこからポジションデータを取得。
再びheatmap.jsにデータを読み込んで描画する。。。という流れです。

今回はデータ数が少ないので、データも直接ソースに直書きしちゃっています。


このぐらいのポジション情報を取得する実装なら、Google Tag ManagerにカスタムHTMLとして埋め込んでも動くみたい。
heatmap.jsの場所さえ指定しておけば。

heatmap.jsを利用しないでjQueryで取得するとしたら、たぶん、こんな感じで解像度を吸収しながらデータを収集するんだと思うけど、今のところ「dataLayer.push」が何故か動かないという現象に直面していて・・・

jQuery(document).ready(function(){
$("#heatmapArea").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

jQueryでの実装が一番楽なんだけどね。修正範囲が少なくてすむという意味で。
jQueryでの動作はもうちょっと研究してみるけど、実装出来た方はご連絡いただけると嬉しいかも。

簡単なクリックデータで検証するくらいなら、このくらい手軽な方がいいかな。

【参考】
Google Tag Managerに関するまとめ