Next.jsで作ったWebサイトにGoogleTagManagerとGoogleAnalytics4を導入した

## きっかけ
* Webサイトを作ったはいいものの、どれくらいの人に見られているのかがさっぱりわからないというのもなぁと思い、ちょうど流行ってるし勉強も兼ねて導入してみようかと思いました。

## 困ったこと
* GoogleAnalyticsを使ってみたかっただけなのですが、調べてもよくわからず、いろいろ試行錯誤したのですが、GoogleAnalyticsは2020年10月からGoogleAnalytics4というのがスタートしていて、以前とはいくつかの変更点があるようです。
* 色々試行錯誤試したのですが、終わってみるとなんだこれだけでよかったのか、と思ったので記事にしようと思います。
* ちなみに筆者はGoogleAnalyticsを初めて導入した全くの初心者ですので、同じような方で困っている方のためになればと思っています。

## やったこと
1. GoogleAnalyticsの登録
1. GoogleTagManagerの登録
1. ソースの修正

## GoogleAnalyticsの登録

※2021年7月24日現在
[GoogleAnalytics](https://marketingplatform.google.com/intl/ja/about/analytics/)の「無料で利用する」をクリックし、
①アカウントの設定　でアカウント名を決める
![スクリーンショット 2021-07-24 14.07.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/2b80846d-bebc-69e9-72d5-5452d937b82f.png)

②プロパティの設定　でプロパティ名（とタイムゾーンと通貨）を決める
![スクリーンショット 2021-07-24 14.08.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/037898cf-3595-c6a2-aa8b-b06262080490.png)
という2ステップのみで利用開始できます。
（③ビジネスの概要は省略しても良さそうです）

その後表示される画面で、Choose a Platformでプラットフォームを選んで（今回はウェブ）
![スクリーンショット 2021-07-24 14.11.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/ea6c2081-8e4e-b3c6-10a2-6b8832d05316.png)

ウェブサイトのURLとストリーム名を決めてストリームの作成を押せばGoogleAnalytics上での設定は完了です。
![スクリーンショット 2021-07-24 14.12.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/d936e58f-a03a-e789-c0a7-12779357e49d.png)

最後に表示される測定IDは後で確認の際に使います。
![スクリーンショット 2021-07-24 14.15.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/15f74c6d-0c9f-920d-d791-dc894d80e938.png)


## GoogleTagManagerの登録

※2021年7月24日現在
[GoogleTagManager](https://marketingplatform.google.com/intl/ja/about/tag-manager/)の「無料で利用する」をクリックし、アカウントを作成します。
![スクリーンショット 2021-07-24 14.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/3ee90e9f-47ab-ad54-dcfa-360079ebbacf.png)

アカウント名・コンテナ名（URL）を入力し、ターゲットプラットフォームを選択します。（今回はウェブ）

作成すると、ページが遷移し、次のようなモーダルが表示されるので、ソースを修正します。
![スクリーンショット 2021-07-24 14.25.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/fff866ec-3bd3-0bc3-b643-4a57685e16e8.png)


## ソースの修正

先程のモーダルの、``<head>``内に貼り付けるタグは``_document.tsx``に貼り付けますが、このまま貼り付けるとエラーになるので、``dangerouslySetInnerHTML``を使います。

```tsx:_document.tsx
{/* Google Tag Manager */}
<script dangerouslySetInnerHTML={{
  __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-******');`,
}}></script>
```
* 「******」はご自身のGTMのIDにしてください 

``<body>``に貼り付けると指示のあるタグは``_app.tsx``に貼り付けます。

```tsx:_app.tsx
<noscript>
  <iframe
    src="https://www.googletagmanager.com/ns.html?id=GTM-******"
    height="0"
    width="0"
    style={{display:'none', visibility: 'hidden'}}>
  </iframe>
</noscript>
```

* 「******」はご自身のGTMのIDにしてください 

## プレビュー

上記を設定したら、GoogleTagManagerでプレビューを行います。
GoogleTagManagerのポータルの右上にある、「プレビュー」を押下します
![スクリーンショット 2021-07-24 14.35.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/15172862-6a28-467c-bb86-51438ab10a62.png)

タブが開いてモーダルが表示されるので、URLを入力して「Connect」を押下します
![スクリーンショット 2021-07-24 14.36.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/33b3f512-2bcd-6b82-7a2d-813662f882cb.png)


成功すると、Connected!と表示されます。
![スクリーンショット 2021-07-24 14.39.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/9ce0b59e-4d80-009f-2801-9aff0fd94818.png)

Continueを押下すると、モーダルが閉じますが、左上に
``2 Google Containers found``と表示され、GoogleAnalyticsとGoogleTagManagerのIDが表示されていることを確認します。
GoogleAnalyticsに戻り、レポート > リアルタイム で分析が始まっていることを確認してください。

## 感想
* GoogleAnalyticsの導入について調べると、様々な方法がたくさん出てきました。ずーっとそれらを試していたのですが、全くつながらず困り果てていました
。が、GoogleTagManagerを使うとあっという間に簡単にできました。
* 以上、GoogleAnalyticsをNext.jsで作ったWebサイトに導入する方法でした。
* 読んでくださりありがとうございました。