Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

サーバーサイドタグ設定の概要

サーバーサイドタグ設定は、Google タグマネージャーを使用し、デバイスをまたいでアプリケーションを計測する新しい方法です。サーバーコンテナはこれまでと同様のタグ、トリガー、変数モデルを使用しますが、発生場所にかかわらずユーザーアクティビティを測定できる新しいツールが提供されます。

サーバーサイドタグ設定を行わない一般的なタグ設定では、ページ内のコンテナを使用して、さまざまなコレクションサーバーへ測定データを送信します。図 1 は、ウェブブラウザで実行されているタグマネージャーのウェブコンテナが、複数のサーバーにデータを送信する仕組みを示しています。

Google タグマネージャーのウェブコンテナを使用してパフォーマンスを計測するサイトの図

図 1: Google タグマネージャーのウェブコンテナを使用してパフォーマンスを計測するサイト

一方、サーバーコンテナは、ユーザーのブラウザやスマートフォンでは実行されません。代わりに、お客様が管理するサーバー上で実行されます。

サーバーサイドタグ設定コンテナを使用してパフォーマンスを計測するサイトの図。

図 2: サーバーコンテナを使用するタグ構成の例

サーバーはお客様の Google Cloud Platform プロジェクト（または指定した別の異なる環境）で実行されます。他の場所へ送信しない限り、このデータにアクセスできるのはお客様だけです。データの分析方法やサーバーからの送信先は、お客様がすべて管理できます。タグは、サンドボックス化された JavaScript テクノロジーを使用して構築されます。アクセス権により、タグでできることが一目でわかります。また、ポリシーを使用してコンテナの境界を設定できます。

サーバーはユーザーのデバイスからウェブリクエストを受信し、そのリクエストをイベントに変換します。各イベントは、コンテナのタグ、トリガー、変数によって処理されます。サーバーコンテナのタグ、トリガー、変数は、他の種類のコンテナとまったく同じように機能します。つまり、各イベントがトリガー条件に一致するかどうか確認し、一致する場合は、処理対象のイベントデータを送信するタグを発行します。

このモデルでは、サーバーコンテナについて、次の 2 つの重要な課題を解決する必要があります。

ユーザーのデバイスで取得した測定データを、どのような方法でサーバーコンテナへ送信するか
サーバーコンテナに送信された測定データを、どのような方法でイベントに変換するか

上記のどちらについても、新しい種類のエンティティ、つまりクライアント をサーバーコンテナに実装することで解決できます。

クライアントの仕組み

クライアントは、ユーザーのデバイス上で実行されるソフトウェアと、お客様のサーバーコンテナをつなぐアダプターとして機能します。クライアントはデバイスから測定データを受信し、そのデータを 1 つ以上のイベントに変換します。さらに、コンテナで処理するデータをルーティングし、その結果をパッケージ化してリクエスト元に返送します。

多数の要素で構成されているので、各要素を詳しく見ていきましょう。図 3 は、ユーザーのウェブブラウザからサーバーコンテナへデータが送信され、同時にウェブサーバーからサーバーコンテナへデータが送信される流れを示しています。

サーバーサイドタグ設定コンテナを使用してパフォーマンスを計測するサイトの図。

図 3: 各データストリームをそれぞれ別のクライアントで処理

クライアントがデバイスから測定データを受け取る。3 つの場所（ウェブサイト、スマートフォンアプリ、スマートトースター）でユーザーアクションを測定するとします。ウェブサイトでは Google アナリティクス、スマートフォンアプリでは Firebase 向け Google アナリティクス、トースターでは独自のプロトコル「ToastMeasure」を使用しています。

通常、Google タグマネージャーを使用してこれら 3 つのデバイスを計測するには、プラットフォームごとに異なるコンテナが必要になります。サーバーコンテナはデバイス上では実行されないため、同じコンテナを使用して、3 つすべてのデバイスプラットフォームのデータを計測、分析できます。ただし、1 つ問題があります。これらのデバイスは、いずれも同じ方法で通信するわけではありません。Google アナリティクスプロトコルは、ToastMeasure プロトコルとは異なります。そこで登場するのがクライアントです。

これら 3 つのコンテナの代わりとして、サーバーコンテナに 3 つのクライアントが配置されます。サーバーコンテナに送信されたリクエストは、優先度の高い順に各クライアントによって処理されます。各クライアントはまず、受信したリクエストの処理方法を知っているかどうかを判断します。処理が可能であれば、そのリクエストを「受理」し、次の処理段階へ進みます。リクエストを受理することで、後続のクライアントの実行を回避できます。受信したリクエストをクライアントが処理できない場合は、何もせず、他のクライアントがそのリクエストを処理できるかどうか確認します。

クライアントがリクエストデータを 1 つ以上のイベントに変換する。 リクエストを受理した ToastMeasure クライアントは、そのリクエストを、コンテナの他の要素が理解できる形に変換する必要があります。それがイベントのセットです。

イベントとは、発生した時点で測定対象となる事象であり、start_toasting、finish_toasting、buy_bread のいずれかになります。クライアントが生成するイベントの構造に関して、いくつかの推奨事項がありますが、唯一の要件は、コンテナの他の要素がそれらを理解することです。

クライアントがコンテナを実行する。クライアントがリクエストを受理し、それをイベントに変換したら、次は、タグ、トリガー、変数の出番です。変換したイベントをさらに処理するため、クライアントは各イベントをコンテナの他の要素に渡します。

クライアントが結果をパッケージ化してデバイスに返送する。コンテナを実行したら、次はトースターに応答する必要があります。応答にはさまざまな形式があります。クライアントが「処理完了」とだけ通知する場合もあれば、いずれかのタグによって、リクエストが別のコレクションサーバーにリダイレクトされたり、トースターのライトの色が変わったりする場合もあります。いずれの場合も、結果をパッケージ化してリクエスト元に返送するのはクライアントの役割です。

これらのほとんどの処理は、タグマネージャーによって自動的に行われます。サーバーコンテナには 2 種類のクライアントが用意されています。Google アナリティクスと Measurement Protocol の 2 つです。これらのクライアントは、コンテナ作成後、すぐにアプリケーションを計測するために必要なツールを提供します。

簡単な例

簡単な例を使って、これらすべての要素の仕組みを確認しましょう。ここでは、次の要素を作成します。

gtag.js を使用して click イベントをサーバーコンテナに送信するシンプルなウェブサイト。
そのイベントを受け取る Google アナリティクスのクライアント。
click イベントで配信されるトリガー。
イベントデータを Google アナリティクスへ送信して処理を促す Google アナリティクスのタグ。

この例では、サーバーコンテナがすでに作成され、デプロイされているものとします。

gtag.js を設定する

まず、サーバーコンテナにデータを送信するように gtag.js を設定します。gtag.js を使用してデータをサーバーコンテナに送信する仕組みは、データを Google アナリティクスに送信する場合と同じですが、1 つだけ違いがあります。以下の例のように、server_container_url 構成オプションを設定して、サーバーコンテナを指すようにします。

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

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

TAG_ID は、タグ ID に置き換えます。 https://analytics.example.com は、サーバーコンテナの URL に置き換えます。

次に、click イベントを処理する sendEvent() 関数を追加します。

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

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

TAG_ID は、タグ ID に置き換えます。 https://analytics.example.com は、サーバーコンテナの URL に置き換えます。

この構成では、上記の例に含まれる sendEvent() 関数などのイベントハンドラが、click イベントをサーバーコンテナに送信します。

Google アナリティクスのクライアント

イベントがサーバーに到着した時点で、そのイベントをクライアントが受信する必要があります。幸いなことに、サーバーコンテナには Google アナリティクスのクライアントがプリインストールされているため、この手順はすでに完了しています。

クリックトリガー

次に、click イベントで起動するトリガーを作成します。Event Name 組み込み変数が「click」に等しい場合に発生するカスタムトリガーを作成します。

トリガーの設定

Google アナリティクスのタグ

最後に、Google アナリティクスのタグをトリガーに追加します。クライアントの場合と同様、サーバーコンテナには Google アナリティクスのタグが含まれています。タグを作成および設定するだけで、コンテナの準備は完了です。Google アナリティクスのクライアントと Google アナリティクスのタグは連携して機能するように設計されています。つまり、Google アナリティクスのタグを作成するだけで、クライアントから受け取ったイベントから、その設定が自動的に取得されます。

コンテナをプレビューする

コンテナを設定したら、[プレビュー] をクリックします。別のブラウザウィンドウでウェブサイトにアクセスします。リクエストとイベントがサーバーコンテナに送信されると、そのリクエストとイベントがプレビューページの左側に表示されます。

問題がなければ、サーバーコンテナを公開します。

ファーストパーティ配信の本番環境モードで動作するようにサーバーを設定する

本番環境トラフィックをサーバーコンテナへ送信する前に、そのサーバーをファーストパーティドメインにインストールし、サーバーを本番環境モードにアップグレードすることを強くおすすめします。