pjax（Barba.js） と gtag.jsの実装

Google Analyticsの仕様がgtag.jsに変わり、pjaxを使用した際のgtag.jsの対応方法が検索でなかったので投稿します。

どうしてpjaxだと対応が必要なのか？

pjaxを使用したことがある人は飛ばして構いません。

pjax、今回案件で使用したのはBarba.jsですが、使用する際に注意すべき点があります。
それはhead内の更新と、読み込みで実行されるJSです。

pjaxはコンテンツ部分を変更してくれますが、なんの対応もしないとmeta情報やCSSファイル、URLなどの情報は、最初に読み込んだページのままになります。

CSSやJSは一つのファイルにまとめておけば読み込みに関して解決しますが、meta情報やURL情報は処理を加えないと解決しません。
なので、pjaxを使用する際は、ページが更新したタイミングでmeta情報を変更する対応が必要です。
その際に、更新したURL情報を飛ばしているGoogle Analyticsの実行も欠かせません。

meta情報の更新や旧Google Analyticsの実行は使用方法を検索した際に合わせて出てくることが多いですが、gtag.jsに関してはなかったので投稿します。

実装方法

今回はBarba.jsを使用しての説明になります。

まずは通常どおりhead内に設置します。

analytics.js から gtag.js に移行する

あとはBarba.jsのイベントを使用します。

いままでは下記でした。

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, container, newPageRawHTML) {
  ga('send', 'pageview', location.pathname);
});

gtag.jsは下記のようになります。

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, container, newPageRawHTML) {
  gtag('config', ga_code, {'page_path' : location.pathname});
});

これで計測できました！
gtagのページビューのトラッキングに関しては以下をご確認ください。

ページビューのトラッキング

まとめ

以上になります。
仕様は変わってしまいましたが、そんなに難しい処理ではないと思います。
制作の助けになれば幸いです。

今回gtag.jsについて調べましたが公式見れば解決するわかりやすさ。
マニュアルを用意するのは大変ですが、わかりやすければわかりやすいだけ対応の難易度が下がるので助かりますね。
Googleさんに感謝です。

ここまで読んで頂き、ありがとうございました。