Googleアナリティクスのタグを「ウェブコンテナ」を使ってServer-side GTMから送る

[!NOTE]
本記事は2021年1月時点での内容になります。最新情報については公式サイトなどを確認願います。

Googleタグマネージャーのサーバーサイドタグが2020年にリリースされました。当初はブラウザからサーバーを経由してデータをGoogleアナリティクスのサーバーへ送っていましたが、サーバーサイドのクライアントに新しく「ウェブコンテナ」が追加されました。

これによってコンテナ（gtm.js）を従来はwww.googletagmanager.comというドメインから発行されていたのを自身のドメイン（＝1st Party）から発行するようになります。

ウェブコンテナを作成

まずは、新しく追加された「ウェブコンテナ」を作成します。GTMのサーバーサイドコンテナを開き、「クライアント」→「新規」をクリックします。

名前を「Web Container」とし、「クライアントの種類」は「Googleタグマネージャー：ウェブコンテナ」を選びます。

下の方に「指定されたIDにgtm.jsを配信する」という箇所でコンテナIDをを追加します。この「コンテナIDを」とはWebサイトに追加済みのGTM-XXXXXXという文字列を指します。

「コンテナIDを追加」ボタンをクリックして、サイトに登録済みのID（ここではGTM-ABCDEF）を入力して保存します。

タグがきちんと発行されるかテスト

作成した「Web Container」が追加されている事を確認したら、実際に動くかテストしましょう。「プレビュー」ボタンをクリックします。

下記のようなデバッグ用の画面が表示されればまずはOKです。

続いて、新しくブラウザの別ウィンドウ（タブ）に https://sever-side.pep4.net/gtm.js?id=GTM-ABCDEF と入力して実行（改行をクリック）します。（ドメインとGTMコンテナはご自身のものに変えてください）
下記のようなスクリプトが表示されればウェブコンテナの設定は成功です。

GA4のクライアントの設定

次にクライアントタグの設定です。サーバーサイドコンテナを以前に作成済みの人はすでにGA4用のクライアントが作成されていると思いますので、それを修正します。

GTMの「クライアント」→「GA4」（ご自身が以前に作成されたGA4用のクライアント」をクリックします。

• デフォルトのGA4パス：チェック
• 特定のID向けのデフォルトのgtag.jsパス：チェック
• 測定ID：GA4の測定ID（G-で始まる文字列）

ユニバーサルアナリティクスのクライアントについても同様の変更が必要です。

GTMコードスニペットの修正

最後にWebサイトに挿入しているGTMのタグを一部修正します。今は下記のようになっていると思います。ここの5行目にある

https://www.googletagmanager.com/gtm.js?id=

をあなたのサーバーサイドタグ用に作成したドメイン（GTMのGA4設定タグ内の「フィールド」に追加してある「transport_url」の値）に書き換えます。

変更前

<!-- 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-PZ7GMV9');</script>
<!-- End Google Tag Manager -->

変更後

<!-- 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://server-side.pep4.net/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PZ7GMV9');</script>
<!-- End Google Tag Manager -->

以上で完了です。公開してGA4のリアルタイムレポートでページビューなどが計測されれば成功です。