今更）GAでイベントトラッキングを行う（gtag.js利用するけどタグマネージャー利用しない場合）

今まで自身の中では、GAというとページビューの計測しか使ってこなかったが、仕事で「PDFクリック数の計測をGAのイベントトラッキングでやる実装作れ」と言われたので、勉強がてら自身のサイトに入れてみた。この時に幾つか学びが有ったので、以降はその備忘録。

現状の最適解はタグマネージャーだけど

見出しの通りだが、執筆時点ではタグマネージャーを使った方が、運用におけるイベントトラッキングの設定追加などの更新を、HTMLファイルに埋め込んだGAのJSコードを改変する事無く、GAの管理画面から行えるので最適解である。

が、今回は案件の事情でタグマネージャー利用せずに、GAのJSコードの直改変によるイベントトラッキングをやったので、以降はその備忘録になる。

GAでのイベントトラッキングとは

GAにはページビューを計測するだけでなく、PDFリンクのクリックなどのイベントをトラッキングする機能がある。

詳しくは、後述の参考を見ていただきたいが、ざっくり言うと、次のようなイメージ。

ウェブページの閲覧者がページ上で起こす任意の要素へのクリックなどのアクションの内、計測したいアクションにJSのイベントリスナーを仕込む。
イベントリスナーのターゲットに指定したイベントが発火したら、gtag.jsが提供するトラッキングの関数を実行してGAに記録する。

イベントトラッキングの導入

※以降の導入例では、次の前提とする。

PDFリンクのクリックイベントをトラッキングする実装を適用する。
analytics.js -> gtag.js に変更。
イベントトラッキングのコードはネイティブJSのコードを使う。

自身がこれまで設置していたコードは、alalytics.jsベースのトラッキングコードだった。

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x', 'auto');
ga('send', 'pageview');
</script>

実はanalytics.jsベースのコードもイベントトラッキングの為の機能が提供されてるが、今回はgtag.jsベースでやるので、次のコードに変更する。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-1');
</script>

変更したら、イベントトラッキングのコードを設置する。

今回はネイティブのコードを使うので、jQueryベースのコードの様に、ポンとHTMLソースの上部に記載できない（ネイティブのコードでもheadタグ内とかに埋め込むやり方はあると思うが、ここでは割愛）。なので昔のJS実装のようにHTMLソースの下端あたり、具体的にはbodyタグの閉じタグ近くに次のコードを埋め込む。

<script>
var elems = document.querySelectorAll('a[href$=".pdf"],a[href$=".PDF"]');
if ( elems.length > 0 ){
    Array.prototype.forEach.call(elems, function (elem) {
        elem.addEventListener("click", function(e) {
            var url = e.currentTarget.href;
            gtag('event', 'click', {
                    'event_category': 'link-pdf',
                    'event_label': url,
                    'event_callback': function() {
                        console.log(
                            "gtag::click link-pdf.\n"
                            + "url = " + url
                            );
                    }
            });
        });
    });
}
</script>

ロジックとして、次の様なイメージ。

CSSセレクタで拡張子が「.pdf」のリンクURLであるaタグの要素のリストを取得。
リストに内容あれば、リスト内のaタグの要素にclickイベントへのイベントリスナーを設定。
イベントが発火したら、gtag()でGAにトラッキングの情報を送信。

イベントトラッキングの状況をGAの管理画面から確認する

GAのビューの管理画面のメニューから「行動＞イベント」配下の選択肢を押下すると、イベントトラッキングに関するデータを閲覧できる。前述のイベントトラッキングの設定が上手く行ってれば、ここにトラッキング情報がリストアップされる。

21/07/21 追記）管理画面のメニューの「リアルタイム＞イベント」画面で確認した方が良い。

イベントトラッキングのアクションがGAの管理画面に反映されるまでのタイムラグ

この話はイベントトラッキングに限らず、ページに設置されたGAコードからGAにデータを送信するアクティビティ全般に係る話。

詳細は後述参考を見てほしいが、大まかには次の通りの模様。

アクティビティがGAに反映されるまでの処理時間は20分程度。
ただし、ベストエフォートなので、サイトから送られるアクティビティのデータ量や、データの受け側のGAのシステムの負荷状況によって変わる。

参考

Google アナリティクスのイベントを測定する | ウェブ向けユニバーサルアナリティクス（gtag.js）

analytics.js から gtag.js に移行する | ウェブ向けユニバーサルアナリティクス（gtag.js） (google.com)

データの更新頻度（エンハンスト） - アナリティクスヘルプ (google.com)

Google Analytics にデータが反映されない！？ | アクセス解析あれこれ | Access Reporter™ (access-r.jp)

knowledge ::short