【手順】サーバーサイドGTMの設定手順（Server-side tagging）

今回は、Google タグマネージャーのサーバーサイドGTM（サーバーサイドタグ、サーバーサイドタグ付けなど呼び方色々）の設定方法について解説していきます。
Googleアナリティクスを例にするとデータ送信は、Googleアナリティクスのサーバーへのデータ送信を行っていましたが、この設定で、自ドメインのサーバーにデータを送信することで、データのセキュリティを高めるような設定です。
Cookieもサーバー発行のファーストパーティーCookieとなるため、ITPの影響が受けにくくなります。

略称
GTM＝Google タグマネージャー
GCP＝Google Cloud Platform
GA = Googleアナリティクス
UA＝Universal Analytics

サーバーサイドGTMのメリット

大きく２つです。

• パフォーマンス向上
  一部の処理が、クライアント側（ウェブサイトまたはアプリ）からサーバー側（Google　Cloud Platform）に移ります。
• セキュリティ向上
  フロントエンド（Webページ側）からバックエンド（サーバー側）に処理が移ることで、顧客のデータ保護の観点からより高いセキュリティとなります。

注意事項

• 計測したいサイトのドメインの利用していないサブドメインが必要です（強い推奨設定）
  例）example.com に対して metrics.example.com
• サブドメインのDNSレコードの書き換えが必要です。
• サーバーサイドGTMコンテナで完結するわけではなく、ウェブGTMコンテナも利用します。
• Google Cloud Platformを利用するため、料金が発生します。ただ、一定の範囲は無料で利用することができます。
• GCPの利用にはクレジットカードが必要です。
• パブリックベータ版です（一般試用段階）

前提事項

下記のアカウントはすでに作成済みの前提で、ここでの説明は割愛します。

• Googleアナリティクス（ユニバーサルアナリティクス＝UA）
• Googleアナリティクス4
• Googleタグマネージャのウェブコンテナ（一般的なコンテナ）

設定手順

新規にGTMのアカウントを作成します。

新しいアカウントの追加から「Server」を選択します。

一度、「タグ設定サーバーを自動的にプロビジョニング」を選択します。

タグ設定サーバーの作成にあたり、GCPの請求アカウントが必要なので、「請求先アカウントの作成」から作成します。

GCP請求アカウントを作成します。

支払い方法にクレジットカード情報を登録します。

再び、タグマネージャの画面に戻ってきます。
（先ほど作成したGTMアカウントが表示されます）

再度、「タグ設定サーバーを自動的にプロビジョニング」を選択します。

さきほど作成したGCP請求アカウントを選択します。
「請求先アカウントを選択してサーバーを作成」を実行します。

サーバーが作成されるまで待ちます。

数分でサーバーが作成されます。

一方で、サーバーコンテナ用のGCPプロジェクトを選択し、AppEngineを開きます。

AppEngineにカスタムドメインを追加（登録）します。

お使いのウェブサーバーで、サブドメインを作成します。
今回は、以下のサブドメインを使用します。
metrics.yeo.jp

ウェブマスターセントラルでサブドメインの認証を行います。

ここでは「その他」からTXTレコードの登録を行って、認証しました。

サブドメインのマッピングを保存します。

サーバーにDNSレコードを設定します。
（Xserverは、AAAAレコードが設定できないため、省略）

セキュリティを有効化し、DNSレコードをアップデートします。

サーバーコンテナの「サーバーコンテナのURL」を設定します。

ウェブＧＴＭコンテナを設定していきます。
アナリティクスで作成していない場合、GA4のプロパティを作成します。

ウェブコンテナでGA4のプロパティも設定します。

アナリティクスで作成していない場合、UAのプロパティを作成します。

ウェブコンテナのGA UAタグに「サーバーコンテナのURL」を設定します。

ウェブコンテナのGA4タグに「サーバーコンテナのURL」を設定します。

これで設定が完了です。最後に、Universal Analyticsのリアルタイムレポートでデータ送信されていることを確認します。

GA4のリアルタイムレポートでデータ送信されていることを確認します。

【重要】Chromeの開発者ツールの「ネットワーク」からリクエストURLが今回設定したサブドメインになっていることを確認します。
ここが、xxxx.google.com のままだとサードパーティーCookieのままで意味がありません。

Chrome > 開発ツール > ネットワーク > Header

Chrome > 開発ツール > ネットワーク > Header

以上になります。

最後に

はじめてやると少し手間がかかるのと、ところどころ専門知識も必要です（サーバーの知識など）。慣れた方がすべて情報そろった状態でも半日くらいかかるかと思います。
もし、設定についてお困りでしたら、エンジニアチームにご相談ください。