自分が運営しているサイトにGoogle Analytics（以下、GA）のタグを埋め込みたかったのですが、思ったより手こずりました。
今回はGAのタグのセットする方法を解説します。
前提
-
独自ドメインを設定されていること
- 独自ドメインを発行しないとGAの測定IDは発行できません
-
GAの測定IDが発行されていること
- 測定ID(G-XXXXXXXX、のような形式で表示されます)
開発環境
今回の筆者（ぼく）の開発環境は以下の通りです。
| ソフトウェア、アプリ | バージョン | 確認方法 |
|---|---|---|
| docker | Docker version 20.10.14 | コマンドで確認 |
| Node | node:14.17.0 | Dockerfileで確認 |
| Next.js | "next": "12.1.4" | package.json |
| yarn | "yarn": "1.22.5” | yarn -v で確認 |
| typescript | "typescript": "4.6.3" | package.json |
| docker-compose | docker-compose version 1.29.2 | docker-compose -vで確認 |
実装の手順
今回の実装の手順は以下のように進めていきます。
- helmetをインストールする
- _app.tsx にGAタグをセットする
- 環境変数としてGAタグをセットする
helmetをインストールする
helmetを使うことでNext.js(React)で簡単にheadタグを管理することができます。
今回はheadタグの内容をHelmetのコンポーネントを使って、GAから発行される測定IDをセットします。
インストールするコマンドは以下です。
$ yarn add react-helmet
$ yarn add @types/react-helmet
_app.tsxにGAの測定IDをセットする
実装方針の確認
Next.jsではすべてのコンポーネントは_app.tsxを読み込む仕様となっています。
なので_app.tsxにGAの測定IDをセットすると、すべてのページのheadタグにGAの測定IDがセットされることになります。
一方で共通のレイアウトを自作しているパターンもあるかもしれません。
その場合は共通layoutにGAの測定IDをセットしても、_app.tsxにセットしてもOKです。
Next.jsにおける_app.tsxとpage（コンポーネント）の関係性はこのようになっています。
今回、共通レイアウトにセットする方針で進めていきます。
_app.tsxで進める方は適宜、読み替えてください。
GAの測定IDをセットする
Helmetのコンポーネントの中でGAのscriptタグを読み込むようにします。
コードとしては以下のようになります。
またGAのscriptタグの内容はGoogle Analyticsのリファレンスを参考にしています。
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { Helmet } from 'react-helmet';
export const Layout = ({children}:any) => {
return (
<>
<Head>
<title>CaffeineLessMore</title>
<meta name="description" content="CaffeineLessMore" />
...
</Head>
{!!process.env.NEXT_PUBLIC_MEASUREMENT_ID && (
<Helmet>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_MEASUREMENT_ID}`}></script>
<script>
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_MEASUREMENT_ID}', { send_page_view: false });
`}
</script>
</Helmet>
)}
{children}
</>
)
}
export default Layout;
Layout.prototypes = {};
このコードではNEXT_PUBLIC_MEASUREMENT_IDを環境変数として読み込んでいます。
次にこの環境変数について説明します。
Vercelの環境変数にGAの測定IDをセットする
GAの測定IDを環境変数から読み込むようにします。環境変数を使う理由としては2つあります。
- 例えばソースコードにGAの測定IDをハードコードすると、ソース上に測定IDが残ってしまい不意に他人に悪用（もしくは意図しない使われ方を）されるリスクがある
- Vercelがビルドするページすべてにgtagが読み込まれ正確な測定ができなくなる
なので今回は環境変数を使ってGAの測定IDをセットします。
docker-composeの環境変数を読み込む（環境変数が使えるか検証）
まずは環境変数が使えるかどうか確認してます。
今回はdockerを開発環境として使っているのでdocker-compose.ymlにenvironmentを利用して、コンテナの環境変数としてセットします。
Next.jsでは環境変数を利用する場合にNEXT_PUBLIC_を接頭辞としてつける必要があります。
今回はNEXT_PUBLIC_MEASUREMENT_IDという名前でGAの測定IDを環境変数をdocker-compose.ymlの環境変数としてセットします。
version: '3'
services:
app:
build:
context: ./docker/nextjs
dockerfile: Dockerfile
volumes:
- ./Nextjs/app:/usr/src/app
- ./Nextjs/app/node_modules:/usr/src/app/node_modules
command: sh -c "npm run dev"
ports:
- 4000:3000
- 6006:6006
environment:
- NEXT_PUBLIC_MEASUREMENT_ID=G-XXXXXXXXXX
docker-compose.ymlを修正しコンテナを再起動し確認してみると、たしかにNEXT_PUBLIC_MEASUREMENT_IDをセットできたことが確認できます。
root@0b42a7f5801c:/usr/src/app# env
YARN_VERSION=1.22.19
HOSTNAME=0b42a7f5801c
PWD=/usr/src/app
NEXT_PUBLIC_MEASUREMENT_ID=G-XXXXXXXXXX
HOME=/root
NODE_VERSION=14.19.3
TERM=xterm
SHLVL=1
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
_=/usr/bin/env
Vercelの環境変数をセットする
Vercelは環境変数をセットすることができ、ここでセットした環境変数はビルド時に読み込まれます。(DockerfileのENVが実行されるイメージ)。
previewとdevelopmentには適当な変数（G-XXXXXXXXXX）を入れるようにしておきます。
Vercelの場合、mainブランチがproductionになるのでここにはGAの測定IDをセットします。
このサイトが本番環境です。↓
chromeのディベロッパーツールで確かにGAの測定IDがセットされていることが確認できます。
追記
react-helmet にはバグがあり、以下のようなエラーが表示される現象がおきました。
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.
このエラーに対応するためにreact-helmet-async を使うように切り替えました。
使い方はreact-helmet と同じです。
$ yarn add react-helmet-async
参考URL
Discussion
react-helmetを使用せずとも、以下の記事のようにも実装できますね。ご参考までに。
Vercel 環境の情報は大変参考になりました。ありがとうございます。
そんな方法があったんですね。コメント、ありがとうございます！！
@vincent.maverick