【GTM】6月29日に「ウェブ解析士横浜会議で、ベーシックな内容で簡単に登壇しました。

GTMの内容でお話するのは2回目ですが、既にタグマネージャを何かしら利用されている方にとってはベーシック過ぎる内容かもしれません。

誤表記)
pushstateがHTML5の技術のように書かれていますが、正しくはAjaxですよね。



相変わらず人前で話をするのは苦手だなぁ。
特にGTMの応用事例みたいに、Javascriptの話とか簡単な内容でも技術的な部分に触れるようなものだと、一気にマーケターさん達の眠気がマックスになるのが分かるしなぁ。
僕自信、面白く話せるキャラでもないんでねw

【GTM】jQueryなどのフレームワークに頼らずGTMの機能だけで「onclick」「onblur」「onfocus」などのイベントをトラッキングをする

GTMには「Auto Event Tracking」機能が備わっているにも関わらず、それを活かそうと様々なイベントトラッキングを検討していくと、実は制約も大きい事に気づきます。
その制約を乗り越えるために、今までは単純にjQueryを利用することで回避してきました。

その一つが以前簡単に紹介したGTMを使ったEFOを行うためのカスタムHTMLです。


フォームにフォーカスがあたったり、外れたりした時にdataLayer.pushを使ってGoogle Analytics側にイベントを飛ばすというものです。

このソースの場合はページ内にjQueryの呼び出し文が無かったので、カスタムHTMLの中でjQueryを呼び出していますが、やっぱりどう見てもオカシイ訳です。

「だってGTMでしょ!」
というツッコミを海外で頂きまして紹介されたページがこちら
これは目からウロコといいますか、「確かに!」と納得しました。

普通にjQueryのようなフレームワークを使わずに、通常のjavascriptのみでGTMの「Auto Event Variable」系イベントを作り出しています。
詳しい説明はそちらのサイトを見て頂きたいのですが、inputに対して「blur」イベントを取得したい場合、こんなカスタムHTMLを組みます。


このカスタムHTMLの発火条件を「{{event}} equal gtm.dom」で読み込めば完成。

実際にテストをしてみたのですが、まずは単純なフォームを読み込んだ時点でのdataLayerを見てみると、


こんな感じで、いたって普通なのですが「onblur」イベントを発生させると4つ目のイベント、「gtm.blur」が発生します。これが先ほどのcallbackで発生したイベントです。


このイベントを発生させられれば、もう勝ったも同然ですよね。
その発生イベント自体をキーにしても良し、イベントの中身のelement系のデータをキーにしても良しで、Google Analytics側にデータを食わせれば良いだけですね。

確かに考えてみれば、GTMの自動イベント系タグもgtm.clickだったり、gtm.linkClickだったり、同じことをやっていますよね。
最近海外で見る不思議なイベントは、この仕組みを使っていたのですね。

色々と応用ができるし、今後GTM側に吸収されているイベントも沢山出てきそうだなと思いました。

【参考情報】

Google Analyticsのページ解析がChrome拡張で登場

Googleから公式の拡張が出ました。
Google Analyticsのページ解析の拡張です。


自分の管理しているサイトで立ち上げれば、リンククリックの割合などページ解析としての通常の表示がされるだけでなく、リアルタイムの訪問者数やページビューなど数値の期間比較も可能です。

ワンクリックでAnalyticsを開くこともできるし、これはイイ拡張ですね。
僕個人の環境だと、ページ解析は新規ウィンドウで開かないといけない、恐らくCookie系のエラーだと思いますが、その事象が発生することが多いので、管理サイトを開いたまま、その場で数値チェックやクリック比率チェックが出来るのはうれしいかも。


Page Analytics (by Google)

【GTM】Chromeのdevツール、「Source」の「Event Listener Breakpoints」を利用したクリック系デバッグ

もしかすると使えるかも?というレベルですが、最近強制的にjavascriptのクリックイベントを発生させて検証したいと思うことが多くなり、Chromeの機能のみで実現できることを知りました。

Chromeで「F12」キーを押すと出てくるDevツールの「Source」です。


ソースを開くと右側に表示されるメニューの中にあるのが「Event Listener Breakpoints」で、ここでマウスクリック等による検証が出来ます。


例えば、簡単ですがこんなソースを一つ用意します。


GTM側ではリンクをクリックされた場合に検知する単純な発火条件でGoogle Analyticsのイベントを設定しておきます。


で、実際に検証する場合ですが。
計測対象のリンクをクリックすると、ブレイクポイントでイベントが止まりますのでその過程で「gtm.linkClick」イベントが発火される表示になる事を確認できるという訳です。


凄く単純ですがChromeは痒いところに手が届く感じで良いですね。

【関連】
Google Tag Managerに関する利用方法まとめ

【SEO】Googleのキーワードサジェストが見えるツール「keywordtool.io」サイトは良いかもしれない

たぶん最近新しくリリースされたばかりのサイトだと思いますが「keywordtool.io」というサイトは海外サービスでも日本語限定で、google.co.jpサイトのみを対象にサジェストを見ることが出来る。


この手のサイトはいくつかあるのですが、一括でクリップボードにコピーしたりできるので、調査サイトの一つに加えました。



ぜひ使ってみてください。

keywordtool.io