React-Static V7 でアクセス数を計測する

最終的には簡易にできることがわかったのでメモとして。

複数の方法があるので状況次第で選ぶと良いかもしれません。

実現したいこと

react製のSPAの場合はract-gaを使うことが多い模様です。

また、react-staticには react-static-plugin-google-analytics というプラグインもあります(2ページ目以降が計測できない状態でしたが)。

今回はそのどちらも使わない形での計測を目指します。

現状ではGoogleの解析ツールがSPA用の設定を持っているため、基本的にはれそれらを使う形で対応可能でした。

2つ目のページで知りましたが、上記のプラグインが2019年5月ごろに公開されていたようでこれを使うと簡単に導入できます(後でreact-staticのページを確認した際にpluginのotherの部分で紹介されていました…)。

リンク先で中を見ればわかりますが、react-staticでGoogle タグマネージャーを簡単に設置できるというだけで、計測にはGoogle タグマネージャーのトリガーに用意されている「履歴」を使って計測する形のようです。

そのため独自に実装しやすいと思うので、プラグインが無くなっても対応可能でしょう。

タグマネージャーによるSPAの解析方法で検索すると上記1だけしか書かれていないのですが、履歴は HTML5 pushState API が使用された時に動作するので、アクセスした際のランディングページが記録されないように思います(つまり1ページ目が計測されない?)。

そこで手持ちのサイトでは通常の「ページビュー(SPAではない普通のサイトで全ページのアクセス数を取得するためのトリガー)」も設定しています。

「ページビュー」は履歴では動作しないので、プレビューを見る限りでは「履歴」との二重計測にはならないと思われます。

この辺り私の確認ミスか、react-staticの影響なのかわからず、ちょっと微妙です。

こちらは Google アナリティクスに用意されているurlChangeTrackerを使う方法で、上記の1つ目のページを参考にすれば概ね設置できました。

参考サイトではカスタムビルドしていますが、面倒なら以下のページから丸ごとコピーして使うこともできます(25KBぐらいになってしまいますが)。


render() {
  return (<script src="autotrack.custom.js" async="">
    </Head>
  );
}

参考サイトではカスタムビルドしたautotrack.custom.jsをpublicフォルダにいれ、上記のように記載して読み込ませています。

しかしながらこの記述ではパスがおかしくなったので、以下の様に変更して対応できました。


render() {
  return (
    <Head>
      <script async src="/autotrack.custom.js" />
    </Head>
  );
}

process.env.PUBLIC_URLが使えなかったので下記サイトの情報を参考した方法です。

当初は react-ga を試してみたりしていましたが、今回の試行を終えた現時点ではタグマネージャーを使う方法が簡単で便利でした。

単なるページビューの計測に限らず便利に使えるものですから、その意味でもタグマネージャーの方が良いかもしれません。

6人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。