はじめに
この記事について
こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で作った Web アプリケーションに Google Analytics（以下 GA） で解析をするためのタグを追加する方法について書きます。
それって script タグを設置するだけじゃないの？ というトピックですが、たしかに動かすだけなら簡単であるものの実現するのにいろんな選択肢があり、何を考えて選べばいいのか迷う点もあるのでまとめてみました。参考になれば幸いです。
この記事の対象
この記事は以下のような人を対象としています。
- Next.js で作った Web アプリケーションに GA4 のための
scriptタグを設置したい - バージョンによっていろんな方法があり、結局何を選べばいいのかわからない
- Single Page Application だとページ遷移イベントを送信しないといけないの？
- Next.js 公式の
GoogleAnalyticsコンポーネントを使ったのにエラーが出て困っている
まとめ
ざっくりまとめると以下の通りです。
- GA4 なら SPA でもタグだけ設置すればOK。ページ遷移イベントも含めてばっちり取得できる
- タグの設置は
Scriptコンポーネント、またはGoogleAnalyticsコンポーネント（Next.js v14〜）を使う -
GoogleAnalyticsは2024年2月時点でドキュメント通りにやっても動かない。"@next/third-parties": "14.0.5-canary.59"を別途インストールすれば動く
解説
それぞれのトピックについて掘り下げます。
SPA の場合も、タグの設置だけすればいい
GA4 では、GA のスクリプトがブラウザの閲覧履歴のステータスが変更されたことを検知し、自動でイベントを記録してくれます。よって、useEffect と useRouter を使ってパス変更を検知して… といった実装をアプリケーションに追加しなくても大丈夫です。
これについては、Next.js の公式ドキュメントにも明記されています。
Google Analytics automatically tracks pageviews when the browser history state changes. This means that client-side navigations between Next.js routes will send pageview data without any configuration.
Google Analytics は、ブラウザ履歴の状態が変化すると自動的に pageview を追跡します。すなわち、なにも設定しなくても Next.js ルート間のクライアント側のページ遷移についても pageview データを送信します。
また、Google Analyticsのドキュメントにもブラウザの History の変化に基づいてイベントを収集されている旨が書かれています。
page_viewイベントが自動的にトリガーされるタイミング：ページが読み込まれるたび、またはアクティブなサイトによって閲覧履歴のステータスが変更されるたび
拡張計測機能によりデフォルトで収集されます。
Script コンポーネントを使って script タグを埋め込む
まずはscript タグを埋め込む方法として、 Script コンポーネントを使う方法を述べます。
Google Analytics でプロパティおよびウェブストリームを作成すると、解析データを受信するためのタグが提示されます。以下のようなタグですね。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
パフォーマンスを気にしないならこのまま適当に埋め込んでもいいんですが、Script コンポーネントを使えばページ全体で script の内容をキャッシュしてくれます。Script は Next.js v11 で導入されたコンポーネントで、外部ソース script の読み込みや動作を最適化するためのものです。 strategy プロパティを指定することで、読み込みのタイミングを調整することもできます。
Script を使って埋め込んでみると、以下のように書けます。スクリプトの内容を外部の source から読み込むだけでなく、インラインで書くこともできるので、2番目の Script コンポーネントではそのようにしています。
import Script from "next/script";
const MyApp({ Component, pageProps }: AppProps) => (
<>
<Script
strategy="afterInteractive"
src={"https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"}
/>
<Script
id="gtag-config"
strategy="afterInteractive"
>
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
<Component {...pageProps} />
</>
);
export default MyApp;
GoogleAnalytics コンポーネントを使ってもっとラクをする（Next.js v14〜）
Next.js v14 以降のバージョンなら、 Script タグでスクリプトを埋め込まなくても GoogleAnalytics コンポーネントに gaId を渡すだけでかんたんにスクリプトを埋め込めます。
さきほど提示した _app.tsx と比較して一目瞭然ですね。
import { GoogleAnalytics } from '@next/third-parties/google';
const MyApp({ Component, pageProps }: AppProps) => (
<>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
<Component {...pageProps} />
</>
);
export default MyApp;
しかしこの GoogleAnalytics 、Next.js v14 以降なら追加でパッケージを追加することなく使えるはずなのですが、パッケージの不具合でそのままでは型エラーが出てしまいます。
Cannot find module '@next/third-parties/google' or its corresponding type declarations.ts(2307)
これについては Next.js のリポジトリに Issue が立っており、とりあえず @next/third-parties の 14.0.5-canary.59 バージョンをインストールすることで問題なく使えるようになる、といったことが書かれています。
npm install @next/third-parties@14.0.5-canary.59
or
yarn add @next/third-parties@14.0.5-canary.59
or
pnpm add @next/third-parties@14.0.5-canary.59
ちゃんと動いてないなら Script で自前で書こうかなとチラッと思ったんですが、そのうち修正されるであろうことを見越し、私はとりあえずこの回避策を入れつつ、 GoogleAnalytics コンポーネントで楽をすることにしました。
おわりに
繰り返しになりますが、GA4 の解析タグを Next.js に埋め込む場合、以下のようにすればOKです。
- GA4 なら SPA でもタグだけ設置すればOK。ページ遷移イベントも含めてばっちり取得できる
- タグの設置は
Scriptコンポーネント、またはGoogleAnalyticsコンポーネント（Next.js v14〜）を使う -
GoogleAnalyticsは2024年2月時点でドキュメント通りにやっても動かない。"@next/third-parties": "14.0.5-canary.59"を別途インストールすれば動く
@next/third-parties のエラーについてはそのうち解消されると思いますので、その時にはまた記事を修正します。
Discussion