GatsbyサイトのGoogleアナリティクスをGA4にアップグレード

## 新しいGoogleアナリティクス（GA4）

数週間前にGoogleが、新しいGoogleアナリティクス（GA4）をリリースしていました。
運営するサイトのアナリティクスは毎日チェックしているのに、全然知らなかった…😰

さっそく、自分のサイトをGA4にアップグレードしようと思ったんですが、ここで問題が。

[私のサイト](https://ayumi.tk)は、静的サイトジェネレーターである[Gatsby](https://www.gatsbyjs.com/)で作っているのですが、GatsbyのGoogleアナリティクス用プラグインが、まだGA4に対応していないんです。

> 使用しているプラグイン：
> [gatsby-plugin-google-analytics - Gatsby](https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/)

下記のような感じで、`gatsby-config.js` に定義してあります。

```js:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        head: false,
        defer: false,
      },
    },
  ],
}
```

他のプラグインを探してみたのですが、GA4に対応しているプラグインは見つからず…。  
まぁ、もう少し待てば、このプラグインが対応するとは思うんですが、新しいものはすぐに試してみたいですよね😉

そこで今日は、Gatsbyサイトにプラグインを使わず、GA4のタグを設置する方法をご紹介します。

---

## 測定ID（Measurement ID）を取得する

### GA4にアップグレード

まずは、Googleアナリティクスにログインし、左下の __管理（Admin）__ ボタンをクリック。そして、あなたのサイトのプロパティへ移動します。

![ga4_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/e4185477-f4a3-5aa6-957a-894194d05b22.jpeg)

__Upgrade to GA4__ タブをクリック。

### 新しいプロパティを作成

新しいプロパティを作成（Create property）画面が表示されるので、プロパティ名やタイムゾーンを好きなように設定します。

![ga4_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/25feabc2-fb7f-c37e-8126-3767ddad3b3c.jpeg)

### Webストリームを作成

![ga4_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/4a9242ac-7239-6e64-1208-7d12151374b5.jpeg)

既にWebストリームがある場合は、クリックして詳細画面へ。  
ない場合は、__データストリーム__ タブから、__Web__ ボタンをクリックし、Webストリーム作成画面へ。

![ga4_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/701ab3f6-1dde-e72e-6e32-489c342aeec5.jpeg)

サイトのURLとストリーム名を入力して、Webストリームを追加します。

### gtagを確認

こちらが、Webストリームの詳細画面。

![ga4_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/ffffc5a0-b127-5588-552c-ba0cd8577a02.jpeg)

以前のGoogleアナリティクスには、`UA-` から始まるトラッキングIDがあるだけでしたが、今回はIDが3つあります。

- プロパティID（Property ID）
- ストリームID（Stream ID）
- 測定ID（Measurement ID）

混乱しそうなんですが、トラッキングに使用するのは、__測定ID（Measurement ID）__ です。

そして、Webストリームの詳細画面には、以前と同様、Global Site Tag（gtag.js）の `<script>` が用意されています。

![ga4_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257317/5cf9c98c-b526-3e25-21df-9a81afbee8ab.jpeg)

この `<script>` を、Gatsbyサイトの `<head>` タグ内へ追加しましょう。

---

## Gatsbyサイトにscriptを追加する

`html.js` をカスタマイズしていきます。  
この方法はスマートなやり方ではないかもしれませんが、Googleアナリティクス用のプラグインがアップグレードされるまでは、とりあえずいいかな、という感じです。

`html.js` は、Reactで触ることができない `<head>` タグなどのコンポーネントを、サーバーでレンダリングするために使用するものです。詳しくは下記のリンクを参照してください。

> 参考：
> [Customizing html.js - Gatsby](https://www.gatsbyjs.com/docs/custom-html/)

### html.js ファイルをコピーして追加

まずは `.cache` から `html.js` をコピーして追加します。

```text:コマンドライン
$ cp .cache/default-html.js src/html.js
```

### headタグ内にscriptを追加

そして、 `<head>` タグの中に、コピーしてきた `<script>` を追加します。

```jsx:html.js
<html {...props.htmlAttributes}>
  <head>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-**********" />
  <script
    dangerouslySetInnerHTML={{
      __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-**********');
      `,
    }}
  />
  <meta charSet="utf-8" />
  <meta httpEquiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      {props.headComponents}
  </head>
  <body {...props.bodyAttributes}>
...
```

ここまでできたら、保存してデプロイ！

Googleアナリティクスを見に行き、リアルタイムでデータが取得できていたら完成です🙌

---

もし間違えているところがあったり、もしくは、もっと良いアイデアがあればコメントで教えていただけると嬉しいです。