🦘

【Next.js, Google Analytics】GAのタグをhelmetを使ってセットする

mym_bravo2022/07/09に公開2件のコメント

自分が運営しているサイトに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で確認

実装の手順

今回の実装の手順は以下のように進めていきます。

  1. helmetをインストールする
  2. _app.tsx にGAタグをセットする
  3. 環境変数としてGAタグをセットする

helmetをインストールする

https://github.com/nfl/react-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のリファレンスを参考にしています。

https://developers.google.com/analytics/devguides/collection/gtagjs/pages
https://developers.google.com/analytics/devguides/collection/gtagjs

Layout.tsx
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を利用して、コンテナの環境変数としてセットします。

https://docs.docker.jp/compose/environment-variables.html

Next.jsでは環境変数を利用する場合にNEXT_PUBLIC_を接頭辞としてつける必要があります。

今回はNEXT_PUBLIC_MEASUREMENT_IDという名前でGAの測定IDを環境変数をdocker-compose.ymlの環境変数としてセットします。

https://nextjs.org/docs/basic-features/environment-variables

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が実行されるイメージ)。

https://vercel.com/docs/concepts/projects/environment-variables

previewとdevelopmentには適当な変数(G-XXXXXXXXXX)を入れるようにしておきます。

Vercelの場合、mainブランチがproductionになるのでここにはGAの測定IDをセットします。

このサイトが本番環境です。↓
chromeのディベロッパーツールで確かにGAの測定IDがセットされていることが確認できます。

https://caffeinelessmore.com/

追記

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

https://www.npmjs.com/package/react-helmet-async

参考URL

https://zenn.dev/magicmoment/articles/react-ga4-202109
https://developers.google.com/analytics/devguides/collection/gtagjs/pages
https://nextjs.org/docs/basic-features/environment-variables
https://qiita.com/sugasaki/items/bbb8a32845f61e1555f2
https://qiita.com/akifumii/items/5779955e2227eeca0a9b

Discussion

react-helmet を使用せずとも、以下の記事のようにも実装できますね。
ご参考までに。

Vercel 環境の情報は大変参考になりました。ありがとうございます。

https://qiita.com/seya/items/d4108d28ee5b1773f671

そんな方法があったんですね。コメント、ありがとうございます!!

@vincent.maverick

ログインするとコメントできます