こんにちは。
Google analyticsを導入しようとしたところ色んな古い記事に惑わされたので、現時点でのベストプラクティスを記事にまとめます。
まぁ、公式Docが最強って話ですが、公式のライブラリを使うことで、パフォーマンスを犠牲にせず、最短で導入できます。
環境
AWS Amplifyにデプロイしています。
next@14.2.15
Google Analyticsの登録
登録はたくさん記事があるのでそれらを参照してください。
G-XXXXXXXXXXの測定IDが取得できたところからスタートです。
導入
本来はGoogle Analyticsに表示されるタグをコピペするだけで導入が完了するのですが、Next.jsだとパフォーマンスの低下を引き起こすので<Script>コンポーネントの使用が推奨されています。
ですので、常套手段として検索に引っかかるのは表示されたタグを書き換える手法ですが、Next.jsは必要なコンポーネントとスクリプトをタグ一つで導入できるライブラリを提供してくれています。
これを利用することで面倒な作業無く、タグ一個で導入が完了しコードも見やすくなるので大変におすすめです。
まずはインストールからしていきます。
npm i @next/third-parties
全てのページに導入するにはapp/layout.tsxにタグを加えます。
<GoogleAnalytics gaId="G-XYZ" />を<body>タグ内に書き加えます。
gaIdは自分の測定に書き換えますが、直接書き込むと不都合もあろうので環境変数にします。
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const gaId: string = process.env.GA_ID || '';
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId={gaId} />
</html>
)
}
あとは.env.localにGA_IDを加筆するだけです。
GA_ID=G-XXXXXXXXXX
これだけで導入は終了です。
簡単ですね！
Amplifyでの作業
AWS Ampllfyでは、環境変数に変数を追加してもビルド時に反映されません。
環境変数として設定した値を、ビルドのシェルに環境変数として渡す必要があります。
まず、ホスティング > 環境変数からGA_IDという変数名で測定IDを値に登録します。
次にホスティング > ビルドの設定からamplify.ymlを編集します。
下記のように、commandsディレクティブにAmplifyの環境変数をシェルの環境変数として書き出すコマンドを追記します。
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci --cache .npm --prefer-offline
build:
commands:
- echo "GA_ID=$GA_ID" >> .env
- npm run build
....
これでビルド時にGA_IDを利用してビルドしてくれるはずです。
Google analytics、サードパーティー製Cookieがなくなるかもと言ってもやはり便利ですよね。
それでは皆さん、よいNext.jsライフを！