SPA(React)にGoogleAnalyticsを導入する
公開日2021.04.12
更新日2021.04.14
Titan-Doos（reactで構築）で初めて導入したため、よく分かっていないところがある。調査したこと、分かったこと、何をしたかを記す（2021.04.14）
準備
gtag.js + 公式のスニペット
HTMLの<head>直下にコードを追加する。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
// gtag('config', 'GA_MEASUREMENT_ID');
</script>最後の行は通常の方法でページビューを送信しているが、これからSPA特有の対応を追加するのでコメントアウトする。
※react-gaを使うパターンもあるが、使用するgaタグのバージョンがgtag.jsではなくanalytics.js（古い）のでお勧めしない。
※Titan-Doosではこの記述だけでページごとのアクセスを計測できているようだ。
（gtag(‘config’, ‘GA_MEASUREMENT_ID’);はコメントアウトしない）
React Routerとの組み合わせ方
ページ遷移の時にページビューの送信をする必要がある。
history.listenでページ遷移のたびにそのままページビュー処理をする
react-helmetと組み合わせる場合
react-helmetはReactのレンダリング内で（つまり、通常JSX内で）<head>の<title>や<meta>などを動的に書き換えることができるライブラリ
Titan-Doosへの導入の場合
「準備」のgtag.js + 公式のスニペット（gtag(‘config’, ‘GA_MEASUREMENT_ID’);はコメントアウトしない）を<head>内に入れるだけで、ページごとの計測ができているようだ。
これでちゃんと計測できているといえるのか、よく分かっていないところがあるので、分かり次第追記する。
- 参考サイト
- サイト名：SPA(React)にGoogleAnalyticsを導入する際のパターン
- 最新記事
-
タグマネージャーの設定（随時更新）
2021.11.09 WEB・APPSEO対策
mori -
メルマガの開封・クリックをGoogleアナリティクスで測定する方法
2021.10.19 WEB・APPテクニックSEO対策
mori -
横スクロールサイトがかっこいいサイト
2021.10.18 WEB・APPテクニックアイデア
mori
- タグ
- UX・UIデザインバックエンドフロントエンドECサイトサーバー・ドメインSNSツールPHPSEOWebツールnoteJavaScriptGoogleTagManagerGitFacebookショップサーブオウンドメディアCSSSearchConsoleVScodeInstagramお名前ドットコムカラーミーCMSHTMLGoogleAnalyticsXDプログラム言語TwitterhetemlEC-CUBEWordPress操作方法アプリ画像関係PythonVBAデータベースMySQLRubyShopify
- 月別アーカイブ
-