ITP対策！ServerSide GTMをGAEにデプロイしてGA4の接続の検証もしてみる 〜GAEにデプロイ編〜

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


# これはなに？
- ServerSide GTMをApp Engineに手動デプロイする
    - 今回やること
- GA4をServerSide GTMで接続検証をする
    - 次回の記事

::::note warn
サクッとドキュメント見ながらやったので基本デプロイ操作はCloudShellです
::::

::::note
Dockerイメージが公開されているのでApp Engineじゃなくてもお好きな環境にデプロイできます。
::::

https://developers.google.com/tag-manager/serverside/manual-setup-guide#view_all_available_settings_for_the_docker_image

https://developer.squareup.com/blog/deploying-server-side-google-tag-manager-on-cloud-run/

# 利用するもの
- GCP
  - CloudShell
  - App Engine
- Google Tag Manager



# ServerSide GTMのいいこと

>- パフォーマンスの向上
    - ウェブサイトまたはアプリの測定タグが少なくなるため、クライアントサイドで実行するコードが減少します。
>- セキュリティの強化
  - お客様が管理するサーバーサイド環境でデータを収集し配布することで、訪問者データの保護が強化されます。データは Google Cloud インスタンスへ送信された後、他のタグによって処理され、転送されます。



- サーバーのドメインをサイトのサブドメインにできる
    - **ITP対応ができる**
        - 1stParty Cookieでサーバー側で動作するため
- FaceBook Conversion APIなどのタグテンプレートが利用できる

![スクリーンショット 2021-11-28 1.59.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/461071f3-f4b2-da68-debc-5c89adc30801.png)



> Google タグ マネージャーのウェブコンテナを使用してパフォーマンスを計測するサイト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/d5d38606-b225-869c-15ef-99c628f27437.png)

>サーバー コンテナを使用するタグ構成の例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/016fd14c-8d51-5119-81d4-79e40ef85bf1.png)

https://developers.google.com/tag-manager/serverside/intro

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


# GTMの設定とServerSide GTMのデプロイ

https://developers.google.com/tag-manager/serverside/script-user-guide

## 1.GTMでコンテナを作成する

作成する時にServerを選択

![スクリーンショット 2021-11-28 3.00.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/a957f525-268e-5e1f-6da7-ec1ed190b90c.png)


## 2.タグマネージャーをインストールする

コンテナを作成すると以下のような画面がでる。

::::note warn
自動設定の場合はプロジェクトがGCPに新規作成されus-centralのリージョンでスタンダード環境のGAEにデプロイされます
::::

![スクリーンショット 2021-11-28 1.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/d62b8f56-556f-2116-94dd-6c83f4f5fb92.png)


自動設定を選択した場合はこれで終わりですが。フレキシブル環境にしたいとかリージョンを変えたい場合が存在すると思うので手動もやっていきます。

[自動で作成される方はこちら](#自動作成の場合)

手動の場合は赤の部分が必要になるのでメモしておきましょう

![スクリーンショット 2021-11-28 1.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/501781c9-d0c3-f6f2-d41b-f79be87f1087.png)

## 3.CloudShellからGAEにデプロイする

::::note warn
自動作成の場合はコンテナIDでGCPのプロジェクトが作成されるので
同じようにコンテナIDでGCPのプロジェクト作っておくのがお勧めです
::::

CloudShellをGCPのコンソールで開きます

```bash
gcloud config set project <PROJECT_ID>
```

以下のコマンドを実行しスクリプトに従います。

```bash
bash -c "$(curl -fsSL https://googletagmanager.com/static/serverjs/setup.sh)"
```

-  Container Config (Required):

```bash
$ bash -c "$(curl -fsSL https://googletagmanager.com/static/serverjs/setup.sh)"
Please input the following information to set up your tagging server. For more
information about the configuration, input '?'. To use the recommended setting
or your current setting, leave blank.
Container Config (Required):
```



ここはGTM上に表示されているさきほどコピーしたコンテナ設定文字列を使用します。

コピーし忘れた場合はコンテナの設定から再度確認できます

![スクリーンショット 2021-11-28 1.28.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/5d0a14ef-4b17-3c97-9753-93ec869ea8a6.png)

- Policy Script URL (Optional):

```bash
Policy Script URL (Optional):
```

https://developers.google.com/tag-manager/serverside/configure-a-policy

ある場合は入力、任意項目なので今回はそのままエンターします

- Request Logging (Current: on):

```bash
Request Logging (Current: on):
```

GAEでリクエストのロギングのオンオフが選べます。

`off`で無効

ログルーターのデフォルト`シンクに含めるログの選択`に以下が追加されます

```bash
NOT LOG_ID("appengine.googleapis.com/nginx.request") AND NOT LOG_ID("appengine.googleapis.com/request_log")
```

![スクリーンショット 2021-11-28 3.38.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/927ca54b-9d23-ea3d-15ce-ef29ac41f42e.png)


https://developers.google.com/tag-manager/serverside/script-user-guide#disable_app_engine_request_logging_optional


- Deployment Type (testing/production):

```bash
Deployment Type (testing/production):
```

初回作成の場合は以下のような挙動になります

```
- `testing`を入力すると
    - スタンダード環境でデプロイ

- `production`を入力すると
    - フレキシブル環境でデプロイ
```

今回は本番運用ではないのでスタンダード環境にデプロイします。

`testing`のスタンダードで作業していきますが

`production`のフレキシブル環境でデプロイしたときの追加で聞かれる質問とymlも貼っておきます

[Deployment Type production にした場合の追加設定とyml](#deployment-type-production-にした場合の追加設定とyml)

- Please choose the region where you want your App Engine application located:

デプロイしたいリージョンを選ぶ

```bash
Please choose the region where you want your App Engine application located:

 [1] asia-east1    (supports standard and flexible)
 [2] asia-east2    (supports standard and flexible and search_api)
 [3] asia-northeast1 (supports standard and flexible and search_api)
 [4] asia-northeast2 (supports standard and flexible and search_api)
 [5] asia-northeast3 (supports standard and flexible and search_api)
 [6] asia-south1   (supports standard and flexible and search_api)
 [7] asia-southeast1 (supports standard and flexible)
 [8] asia-southeast2 (supports standard and flexible and search_api)
 [9] australia-southeast1 (supports standard and flexible and search_api)
 [10] europe-central2 (supports standard and flexible)
 [11] europe-west   (supports standard and flexible and search_api)
 [12] europe-west2  (supports standard and flexible and search_api)
 [13] europe-west3  (supports standard and flexible and search_api)
 [14] europe-west6  (supports standard and flexible and search_api)
 [15] northamerica-northeast1 (supports standard and flexible and search_api)
 [16] southamerica-east1 (supports standard and flexible and search_api)
 [17] us-central    (supports standard and flexible and search_api)
 [18] us-east1      (supports standard and flexible and search_api)
 [19] us-east4      (supports standard and flexible and search_api)
 [20] us-west1      (supports standard and flexible)
 [21] us-west2      (supports standard and flexible and search_api)
 [22] us-west3      (supports standard and flexible and search_api)
 [23] us-west4      (supports standard and flexible and search_api)
 [24] cancel
Please enter your numeric choice:
```

あとは基本的に確認なので問題なければyで入力すればデプロイされます。

### 完成したapp.yamlの内容

```yml
service: default
runtime: nodejs12
instance_class: F1
automatic_scaling:
  max_instances: 1
env_variables:
  CONTAINER_CONFIG: GTMで表示されているコンテナ設定の文字列
  INCLUDE_DEBUG_SERVER: true
  POLICY_SCRIPT_URL: ''
  NODE_OPTIONS: --max-http-header-size=16384
handlers:
- url: /.*
  secure: always
  script: auto
``` 

## 4.GTMにデプロイしたサーバーのURLを設定

Cloud Shellで以下のコマンドを入力するとデプロイしたサーバーのURLが入手できるので設定する

```bash
gcloud app browse
```

ここで一緒にコンテナ名をドメイン名にしておくと管理しやすくていいと思います

![スクリーンショット 2021-11-28 1.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/547daf43-1fa9-a358-a5c5-3192cd795354.png)


## 5.動作確認

- `/healthy `をパスにつけて確認

以下のコマンドで取得できるURLに`/healthy `をつけてアクセスします

```bash
gcloud app browse
```

OKという文字が返ってこればOKです

![スクリーンショット 2021-11-28 1.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/6d36a774-12e2-5cb5-7fa8-8ca9e96b9ea1.png)


- GTMのプレビューで確認

プレビューを押して以下のような画面が出ればOK

![スクリーンショット 2021-11-28 3.12.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/9d0b6fa8-4ee9-693b-ded4-efa03fa04492.png)


タグの設定は通常通りGTMでプレビューの画面とかはデプロイしたServerSide GTMの画面になるので見た目上の差分はそのくらいですね

# デプロイしたソースコードを変更して構成変更したい場合(CloudShell)

GAEからデプロイしたソースを確認し、作成した app.yamlに張り付けて更新

```bash
$ mkdir serverside-tagging
$ curl -O https://storage.googleapis.com/serverside-tagging/gtm-cloud-image.zip
$ unzip gtm-cloud-image.zip -d serverside-tagging
$ cd serverside-tagging
# app.yamlを作成
$ touch app.yaml
$ gcloud app deploy
```

# デプロイしたものの構成は変えないけど新しいバージョンを作成したい場合(CloudShell)

リージョン以外が再度対話式で更新できます。

```bash
bash -c "$(curl -fsSL https://googletagmanager.com/static/serverjs/setup.sh)"
```

# 自動作成の場合

- 自動的にプロビジョニングを選択

![スクリーンショット 2021-11-28 1.49.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/2b5c6060-7bcc-2b4e-cff3-63ae9a45df22.png)

- 請求先アカウントの選択

![スクリーンショット 2021-11-28 1.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7fd366ad-60ab-9f42-3a16-d9cb4a5bfc4e.png)

- 作成


![スクリーンショット 2021-11-28 1.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/3fc69fef-ba8c-c6c9-88f9-593e3d2d6313.png)

![スクリーンショット 2021-11-28 1.51.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/3a3e4dae-8cb0-0ebd-d101-ec72993d185c.png)

GTMのコンテナIDの名前でGCPプロジェクトが作成されます

自動は非常に楽でいいのですがリージョンが選べないので今後に期待ですね

# Deployment Type production にした場合の追加設定とyml

`production`と回答した場合は以下のようなAutoscalingに関することを設定できます。

ここのデフォルトの内容は

https://developers.google.com/tag-manager/serverside/script-user-guide

>本番環境では、サーバー 1 台あたり毎月約 40 ドルかかります。各サーバーは、1 個の vCPU、0.5 GB のメモリ、10 GB のディスクを備えたフレキシブル環境の App Engine インスタンスです。サーバーが停止した場合のデータ損失リスクを軽減するため、少なくとも 3 台のサーバーを実行することをおすすめします。ただし、実行するサーバーの数は状況に応じて増減できます。3～6 台のサーバーを自動スケーリングすることで 1 秒あたり 50～200 件のリクエストを処理できますが、実際のパフォーマンスは、タグの数とその処理内容によって異なります。

推奨される台数になってますね

```bash
Deployment Type (Current: testing): production
Autoscaling (Recommended: on):
Minimum Number of Servers (Recommended: 3):
Maximum Number of Servers (Recommended: 6):
CPU Target Utilization (Recommended: 0.6):
```

```yml
service: default
runtime: nodejs
env: flex
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10
readiness_check:
  path: '/healthz'
  failure_threshold: 3
  check_interval_sec: 10
liveness_check:
  path: '/healthz'
  failure_threshold: 10
  check_interval_sec: 10
env_variables:
  CONTAINER_CONFIG: GTMで表示されているコンテナ設定の文字列
  POLICY_SCRIPT_URL: ''
  NODE_OPTIONS: --max-http-header-size=16384
automatic_scaling:
  min_num_instances: 3
  max_num_instances: 6
  cpu_utilization:
    target_utilization: 0.6
```

# 参考にさせてもらったサイトリスト

https://developers.google.com/tag-manager/serverside/intro

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

https://developers.google.com/tag-manager/serverside/script-user-guide

https://developers.google.com/tag-manager/serverside/script-user-guide#disable_app_engine_request_logging_optional

https://developers.google.com/tag-manager/serverside/manual-setup-guide#view_all_available_settings_for_the_docker_image

https://developer.squareup.com/blog/deploying-server-side-google-tag-manager-on-cloud-run/


https://www.simoahava.com/analytics/provision-server-side-tagging-application-manually/

# まとめ

今回は対応してませんがデプロイしてるやつにカスタムドメインを設定することができます。

これで運用しているサイトのサブドメインにできますね

https://developers.google.com/tag-manager/serverside/custom-domain

デプロイ自体も簡単で、イメージも公開されているのでGAEじゃなくともデプロイできるのがいい感じです。
カスタムドメインによりITP対策が現段階ではできるのと、さらにサーバーサイド側で処理をするためユーザーにもいい体験をしてもらえます Core Web Vitals対策にもなりますね！！

次回はデプロイしたものを使ってGA4と接続してみようと思います

# 次回

**ServerSide GTMをGAEにデプロイしてGA4の接続の検証もしてみる 〜GA4接続編〜**

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