サーバーサイドGTM

始めにサーバーサイドGTMというのはGoogleの公式用語ではないです。
用語だけ独り歩きしている感じがあるのですが、
実態は要素技術の組み合わせでしかありません。

Google公式ではサーバサイドタグと呼ばれています。

この記事を書いた動機

サーバサイドタグは要素技術の集合と冒頭で書きました。
情報が断片的だったり、情報自体が古かったりして設定方法が変わっており、
設定箇所も多く、総合的なwebの知識が必要でハマりどころがかなり多かったため、まとめたかったのが動機です。
（そもそもサーバサイドタグの導入ガイド的なものの情報があまりない…）

なぜサーバサイドタグが必要なのか？

皆さんも一度は目にしたことがあろう、EUのウェブサイトを中心としたCookie許可のバナー。
これらは広告トラッキング用のサードパーティcookieを許可するかの確認バナーです。
(※画像はstack overflowのバナーです。)

EUではこのバナー表示をプライバシー保護のため、法律で実装必須の義務化がされています。（幸い日本ではまだ必須ではないですが）
しかし、サードパーティcookieは使えなくなり、すでに多くの広告トラッキングに影響が出ている状態です。
（このため、精度が悪い広告に対し、無駄金を使っている状況）

GA4とGTMで消えゆくCookieの実態を徹底調査：リピートユーザーの判定率はわずか47.8％

特にMobile SafariはITP（Intelligent Tracking Prevention）と呼ばれるトラッキング防止機能で
サードパーティcookie（トラッキング用の別ドメインの第三者サーバcookie）をすでに排斥しています。
ITP2.3以降ではCookie以外にlocalStorageも最大7日間までしか保存できず、ファーストパーティcookieも24時間しか保存できない制限がすでにかかっています。

Google Chromeでもサードパーティcookie廃止の流れは来ており、
段階的に2024年1月4日から1%、第3四半期から100%のユーザーに適用される予定です。

クライアントサイドタグとサーバーサイドタグの違いは、
クライアントサイドタグはブラウザから直接各広告プラットフォームにトラッキング情報を送信するのに対し、
サーバーサイドタグはGTMサーバコンテナを中継（プロキシ）としてトラッキング情報をサーバ経由で送信します。
サーバ経由にすることのメリットとしては

サーバコンテナにサブドメインを設定することで、サードパーティcookieをファーストパーティcookieとして扱える
ブラウザで各トラッキング情報を送るのでなく、サーバ側でまとめて送る（まとめることが出来ればトラッキング情報を各広告プラットフォームに個別でブラウザから送る必要がなくなるため、ページのパフォーマンスが上がる）

このため、従来の方法ではまともに広告経由での流入ユーザをトラッキングできなくなるはずなので
広告プラットフォーマーを中心として、広告導入している企業はサーバーサイドタグへの移行が求められます。

サーバーサイドタグを導入する（サーバサイドからGA4アナリティクスに送信まで）

基本的にはGoogle公式の導入ガイドが一番わかり易いので、これをベースにはしますが
一部古い箇所があったりスクショのリンクが切れている箇所があるので本稿で説明します。

サーバサイドタグの全体像は以下の図のようになっています。
Googleタグ経由でGA4 clientのイベントをサーバコンテナに送信し、
GA4アナリティクスタグを発火、もしくは各広告プラットフォームに送信するタグを発火します。

サーバタグでGA4アナリティクスにイベント送信する場合、サーバコンテナからGA４イベントを送信します。

サーバサイドタグを発火させるためには以下の設定が必要です。

GTMタグの設置
GA4の設定
- データストリームの設定
- (Googleシグナルの設定)
GTMサーバコンテナの設定
- GCPにサーバコンテナ(Cloud Run)を作成
- GA4クライアントを作成
- GA4イベント発火トリガーを作成
- サーバサイドタグ作成
- (サーバコンテナにサブドメインを設定する)
GTMウェブコンテナの設定
- Googleアナリティクス：GA4イベントを設定
- Googleタグを設定

まず、ウェブページにGTMタグの設置を行います。

<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','${process.env.GTM_ID}');
</script>

次にGA4のデータの収集と修正→データストリームからデータストリームを作成します。
ストリームURLはホスティングしているサーバーのURLを指定します。
ストリームID、測定IDは自動で払い出しされます。
測定IDはGTM側で設定するのでメモしておいてください。

シグナルの設定は必須でありませんが、精度を上げたり、クロスプラットフォームのトラッキングをする上で有効にした方が良さそうです。
GA4側のデータ収集でGoogleシグナルのデータ収集をONにします。

サーバコンテナはGTM管理画面のダッシュボードのアカウントメニューで、[コンテナを作成] をクリックします。

[コンテナの設定]画面で、作成するコンテナに名前を付け、[Server]を選択します。[作成] をクリックします。コンテナの作成が完了すると、セットアップ画面が表示されます。
[タグ設定サーバーを自動的にプロビジョニング]をクリックするとGCPのCloud Run上にサーバコンテナを稼働するサーバが作成されます。
デフォルトURLは後で使うのでメモしておいてください。

作成したサーバコンテナのクライアントからGA4 Clientを作成します。
測定IDは先程GAのデータストリームで払い出した測定IDを指定してください。
地域ごとの設定を有効にするの変数は組み込み変数からVisitor Region選択してください

次にサーバコンテナのトリガーでGA4イベントを受けるトリガーを作成します。
カスタムタイプのトリガーで一部のイベント、Event NameでGA4を等しいの指定にしてください。
ウェブコンテナ側のGA4イベントのイベント名と合わせる必要があります。（後述）

サーバコンテナでサーバサイドからGA4アナリティクスに送信するタグを作成します。
測定IDにはGA4のデータストリームから払い出された測定IDを指定してください。
トリガーは先程作成した、GA4イベントを受けるトリガーを指定します。
Googleシグナルは必須ではありませんが、有効にしたほうがトラッキング精度があがります。

次にウェブコンテナ側でGoogleタグを作成します。
タグIDにGA4データストリームの測定IDを指定してください。
イベントパラメータを追加し、server_container_urlにサーバコンテナのCloud RunのURLを指定します。
トリガーはInitailization All Pagesにする必要があります。

ウェブコンテナ側でGoogleアナリティクス:GA4イベントのタグを作成します。
測定IDにはGA4のデータストリームの測定IDを指定してください。
イベント名をGA4に指定します。（先ほど作成したサーバコンテナのトリガー条件イベント名を合わせてください）
トリガーはInitailization All Pagesにしています。（Googleタグ発火後にする）

ウェブコンテナとサーバコンテナを公開します。

プレビューによるデバッグ

ウェブコンテナのプレビューおよびサーバコンテナのプレビューを開いた状態で
GTMが設置されているページにアクセスしてください。

ウェブコンテナ側はアクセス後Initializationのタイミングで
GoogleタグとGoogleアナリティクスGAイベントが発火します。

Googleタグの方をクリックするとGA4イベントがサーバコンテナに送信されていることがわかります。

サーバコンテナの方もGA4イベントをトリガーにしてGA4タグが発火します。

GA4イベントのリクエスト内容はRequestタブのIncoming HTTP Requestと
Event Dataタブから確認ができます。
（これらの送信情報からサーバコンテナで独自のタグテンプレートを作成し、コンバージョン情報を送信することも可能です。）

サーバコンテナ経由でGoogle Analyticsにイベントが送信されます。

GA4のデータストリームの設定画面のGoogleタグも連携が完了しています。

サーバコンテナにサブドメインを設定する

サーバコンテナにサブドメインを設定することでサードパーティCookieをファーストパーティCookie扱いにすることができ、トラッキングCookieの共有が可能になります。（推奨）

Cloud Runのカスタムドメイン設定方法の詳細は本稿では割愛します。
以下などを参考にしてください。
カスタムドメインのマッピング

GA4 to BigQuery

幸いにもGoogleがタグテンプレートを用意してくれています。

事前にGA4イベントデータ保存用のBigQueryテーブルの作成にbqコマンドが必要になります。
bqコマンドのセットアップにはgcloud CLIをインストールが必要です。

bqのセットアップが完了していれば、git cloneしてきてdeploy.shを実行するだけで
BigQueryテーブルを作成してくれます。
以下の指定が必要です。

GCPプロジェクトID
BigQueryデータセット名
BigQueryテーブル名

rm -rf sgtm-ga4-to-bigquery && git clone https://github.com/google/sgtm-ga4-to-bigquery.git && cd sgtm-ga4-to-bigquery && bash deploy.sh

後はrepository内にあるtemplate.tplファイルを
新規タグテンプレートでインポートするだけで使えるようになります。

インポートしたテンプレートを使ってタグを作成します。

同様にアクセス時にBigQueryタグが発火し、専用BigQueryテーブルにアクセスユーザデータがInsertされるのが確認できます。

サードパーティーのタグテンプレートを使う

サードパーティがタグテンプレートを用意してくれている場合はコミュニティテンプレートギャラリーから使うことが出来ます。

独自のタグテンプレートを作成する

タグテンプレートを自作すれば、GA4イベント経由で送信情報をフックし、任意の送信先サーバに情報送信が可能になります。

サーバーサイドタグ設定 API

ウェブコンテナ側から送信するGA4イベントにイベントパラメータを追加します。
（GTMのJavaScript変数などを割り当てれば柔軟に送信パラメータを追加できるはずです。）

公開するとGA4イベントに追加したイベントパラメータが付与されるようになります。

新規タグテンプレートを作成し、指定のエンドポイントにイベントパラメータを送信するコードを実装します。

const getAllEventData = require('getAllEventData');
const queryPermission = require('queryPermission');
const sendHttpGet = require('sendHttpGet');
const logToConsole = require('logToConsole');

if (queryPermission('read_event_data')) {
  const events = [];
  const eventObj = getAllEventData();
  for (let key in eventObj) {
    // GA4イベントからカスタムパラメータを取得する
    if (key === 'custom_param') {
      const value = eventObj[key];
      events.push(key + '=' + value);
    }
  }
  logToConsole(events);

  // タグで定義するendpointを取得
  const endpoint = data.endpoint;
  // get_urlを作成
  const url = endpoint + '?' + events.join('&');
  logToConsole(url);

  sendHttpGet(url).then((result) => {
    const statusCode = result.statusCode;
    if (statusCode >= 200 && statusCode < 300) {
      data.gtmOnSuccess();
     } else {
      data.gtmOnFailure();
     }
  });
}

data.endpointはテンプレートの引数として変数で受け取れるようにします。

権限は使用しているコードから自動的にリストアップされます。
権限を付与しないと動かないことがあるので適切に付与してください。

作成したタグテンプレートを使ってCustomタグを作成し、公開します。
トリガーは同様にGA４イベント名をトリガーとします。

Customタグ発火時にGA4イベントのパラメータを受け取り指定のサーバに転送することができました。