ITP対策！ServerSide GTMでGA4の接続の検証してみる

[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の8日目は
株式会社エイチームブライズ エンジニア
新卒2年目になった@takaHALが担当します！

# はじめに

https://qiita.com/takaHAL/items/38781b4f7d3f022508f1

前回のServerSide GTMをデプロイした後の続きになります。

GA4ではなくて

コンバージョンタグなどを利用したい方は以下の記事がおすすめです。

https://qiita.com/Shuni/items/bc4862d4bd9ad6fd0c18

# これは何?

>https://qiita.com/takaHAL/items/38781b4f7d3f022508f1
前回のServerSide GTMをデプロイした後の続きになります。

- 今回作成するウェブコンテナとデプロイしたサーバコンテナを利用してGA4の接続確認
- ウェブコンテナを使わずにサイトに直接gtagを入れて、サーバコンテナでGA4の接続確認

上記２パターンを書きます。

https://developers.google.com/tag-manager/serverside/send-data?hl=ja

# 利用するもの

- Google Tag Manager
- Google Analytics
- Netlify
    - これはサイトのテストのためだけなのでなくても可

- ServerSide GTM
    - まだない方は前回作成したので作成お願いします
    - https://qiita.com/takaHAL/items/38781b4f7d3f022508f1

# サクッとサイトを用意する

ReactでもSvelteでもいいのですが今回はただ試したいだけなので`index.html`を作ってNetlifyにデプロイしてそれを利用します。

`index.html`が入ったフォルダをドラッグ&ドロップするだけでいいですからね

やり方に関しては下記を参考にするといいかもです。

https://qiita.com/NaokiIshimura/items/40ed08203b35aa0b527c

https://www.netlify.com/

```index.html
<html>
  <head>

  </head>
  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>
```

人生でこんなに質素なhtmlファイルを書いたのは何気に初めてですw

というわけでサイトを用意できたのでGA4とか設定していきますか

# GA4の準備

https://analytics.google.com/analytics/web/

## プロパティを作成

管理からプロパティ作成画面へ移ります

![スクリーンショット 2021-12-07 0.22.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c04d1dde-ff30-b5ba-6207-e65e7854d342.png)

![スクリーンショット 2021-12-07 0.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7dba1a3f-3318-7412-30fc-659981a8e61a.png)

詳細オプションはいじらずに作成していただければOKです。

## データストリームを作成

![スクリーンショット 2021-12-07 0.31.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/f1f61fcb-8448-84e2-34ba-7c77d45a93c7.png)

![スクリーンショット 2021-12-07 0.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/2aa3f320-1ae4-4fdc-6f50-806164255696.png)

![スクリーンショット 2021-12-07 0.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/a1606cbc-f566-f1db-640b-0c9d1f073ec8.png)

これでGA側の設定は終わりです。測定IDに関してはあとで使うので控えておきましょう。

[ウェブコンテナを使用しない方はこちら](#ウェブコンテナを使用しない方はこちら)

# ウェブコンテナを利用して検証する

https://tagmanager.google.com/

## 1. ウェブコンテナをGTMに用意する

### コンテナを作成

![スクリーンショット 2021-12-07 0.12.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/ed63d31a-4c98-87de-57a8-3d4235df8c1f.png)

![スクリーンショット 2021-12-07 0.13.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/ef1aaa9b-c95c-8ea8-2697-812e901e53b1.png)

作成が完了するとサイトに埋め込むスクリプトが出てくるのでhtmlに追記します。

### スクリプトを埋め込む

取得したスクリプトをheadとbodyの下に添付してください

```index.html
<html>
  <head>
    <!-- Google Tag Manager -->
    <script>
      (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-EXAMPLE');
    </script> <!-- End Google Tag Manager -->
  </head>

  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-EXAMPLE" height="0" width="0"
        style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>
```

## 2. サーバー側GTMの設定

https://qiita.com/takaHAL/items/38781b4f7d3f022508f1

前回作成したサーバーのGTMで作業をします。

### クライアントにウェブコンテナを追加する

![スクリーンショット 2021-12-07 0.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/43035905-b284-c470-a824-94eb5d2c0792.png)


Google タグマネージャー　ウェブコンテナを選択して、許可されたコンテナIDに先程作成したウェブコンテナのIDを入れて保存します。

![スクリーンショット 2021-12-07 0.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/9f456974-f66a-5410-5f8b-c4da48f4d441.png)


### GA4のタグを追加する

#### クライアントの設定

クライアントのGA4で有効化の条件で以下にチェックを入れる

- デフォルトのGA4パス
- 特定ID向けのデフォルトのgtag.jsパス

`特定ID向けのデフォルトのgtag.jsパス`には作成したGA4の測定IDを入れる

![スクリーンショット 2021-12-07 1.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/534ad9d2-5b7b-405c-c872-a4375aaa9a79.png)


#### タグの設定

タグから新規作成でGoogle　アナリティクス: GA4を選択し、GA4の設定時に生成された測定IDを設定します

![スクリーンショット 2021-12-07 0.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/9e236a17-27f9-3852-9771-31672b59ce4a.png)

トリガーの選択でAll Pagesを選択して保存でOKです

![スクリーンショット 2021-12-07 0.54.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/0c5cefb1-1e20-e212-063c-df03be81002f.png)

このまま公開したら完了です。

## 3. ウェブコンテナからGA4のタグを配信する設定をする

ここからは作成したウェブコンテナに設定を移ります

タグの作成から Google アナリティクス: GA4設定を選択し、今回作ったGA4の測定IDと前回GAEにデプロイしたServerSide GTMのURLを設定します。

![スクリーンショット 2021-12-07 0.57.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c335e3a7-ee43-e281-e0ea-e4652c32ce3f.png)

トリガーをAll Pagesに設定して保存でOKです。

![スクリーンショット 2021-12-07 1.00.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/64dfaf9f-6f59-f6a0-6429-18604f957740.png)

このまま公開したら完了です。

## 4. GA4の確認

- サイトにアクセスしてリアルタイムでユーザーが表示されるか確認する

![スクリーンショット 2021-12-07 1.48.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7fb9696f-1ffb-a19d-880d-6137e42fcc1a.png)

- GTMのプレビューでも発火を確認する

![スクリーンショット 2021-12-07 1.59.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/646262b5-c4d1-f2da-1d65-faf0d39fa351.png)

# ウェブコンテナを使用しない方はこちら

## サイトのスクリプトを設置する

作成したデータストリームから新しいタグを追加で表示させるスクリプトを設置する

![スクリーンショット 2021-12-07 0.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/a1606cbc-f566-f1db-640b-0c9d1f073ec8.png)

![スクリーンショット 2021-12-08 1.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/e65e7aac-480f-81c1-bd29-b9719754bb97.png)

```html
<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-EXAMPLE');
    </script>
  </head>

  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>
```

この状態から送信先をサーバーコンテナに変えます

こちらでデプロイしたURLを利用します。

https://qiita.com/takaHAL/items/38781b4f7d3f022508f1

https://developers.google.com/tag-manager/serverside/send-data?hl=ja

```diff
<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

-      gtag('config', 'G-EXAMPLE');
+      gtag('config', 'G-EXAMPLE', {
         transport_url: 'デプロイしたURL',
       });
    </script>
  </head>

  <body>
    <h1>サーバーサイドGTMテスト君</h1>
  </body>
</html>
```

この状態でNetlifyにデプロイします。

## サーバー側GTMの設定をする

下記の内容を設定します。

[GA4のタグを追加する](#ga4のタグを追加する)

## GA4の確認

プレビューに関してはサーバーGTMでプレビューをつけてtagassistantで検証サイトを確認すると
サーバーGTMのプレビュー画面で確認できます

![スクリーンショット 2021-12-08 1.50.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/5f26b0ef-dc9f-ce38-aabf-a42a5cb79b55.png)



https://tagassistant.google.com/

GA4のリアルタイムでも確認できればOKです

![スクリーンショット 2021-12-07 1.48.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7fb9696f-1ffb-a19d-880d-6137e42fcc1a.png)

# 参考サイト

https://developers.google.com/tag-manager/serverside/send-data?hl=ja

https://sociad.jp/gtm-conversionapi/

# 最後に

GA周りなどは知らないことたくさんあるのでこっちの方がいいよなどのアドバイスがあれば是非コメントで頂きたいです。

GA4接続確認も結構簡単にいけました。
コンバージョンタグに関しては@Shuniが検証してくれたのでもし興味がある方は以下の記事もよろしくお願いします。

https://qiita.com/Shuni/items/bc4862d4bd9ad6fd0c18

GTMとかGAとかは知識としてはあるけど実際に触るということはほぼありませんでしたが、今回のアドベントカレンダーをきっかけに触ることができたので楽しかったです。やっぱり新しいものを触るのは楽しいですね！！

今度は、FacebookコンバージョンAPIとか検証してみたいです。

https://sociad.jp/gtm-conversionapi/


[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の9日目は、@oekazumaがお送りします！！どんなネタを用意してくるのか楽しみです！！