Zenn
Google Cloud JapanPublicationへの投稿
🏷️

Google Tag Manager から Cloud Retail にユーザーイベントをリアルタイムに送信するための手引き

Yuki Suwa
2022/12/07に公開
Google Analytics
Google Cloud
Google Cloud
EC
Google Tag Manager
tech

本記事は Google Cloud Japan Advent Calendar 2022 の 通常版 の6日目の記事です。最近とにかくよく触っている、Recommendations AI および Retail Search に関する記事を投稿したいと思います！

Cloud Retail とは

Google Cloud では小売向けの主に EC サイトに導入できるサービスを提供しています。これらを総称し Cloud Retail と呼んでいます。

商品データとユーザーイベントデータを API や BigQuery 経由でインポートするだけでフルマネージドなレコメンド・検索サービスが利用できます。API を呼び出すだけで結果が得られるので、既に構築済みの EC サイトにも組み込みやすいサービスとなっております。

国内でも導入事例は増えてきており、昨日には ZOZO さんの導入事例も公開されました。

https://cloud.google.com/blog/ja/topics/customers/zozo-recommendations-ai/

また小売向けのみならず、メディア向けにも同様のサービスを提供する Discovery for Media のプレビュー提供を開始しました。小売向けにもメディア向けにも近年大注目のサービスと言えます。

この記事では Cloud Retail が提供する機能の中で、特に リアルタイムユーザーイベント について触れていきます。

リアルタイム性の重要性

シンプルに「レコメンドサービス」「検索サービス」というと、世の中には既に数多く存在しています。Google Cloud が提供する Cloud Retail の特徴として ユーザーのサイト内の行動をリアルタイムに把握し、結果に反映する という点があります。

EC サイト上でユーザーの行動をリアルタイムで把握することは重要です。なぜなら、EC サイトに訪問したユーザーの多くは初めて訪れる、あるいは非ログインで訪れている割合が圧倒的に多いからです。

例えば前日までの行動データが反映される場合、再訪問いただいたユーザーには適切なパーソナライズができる可能性が高いです。しかし初めて訪れたユーザーが再訪問いただける保証はないため、前日までの行動データではどうしても足りません。そのため 訪問いただいたセッション内でユーザー行動を把握し、そのセッション内でパーソナライズすること が重要です。

リアルタイムにユーザー行動を収集するには Google Tag Manager (以下 GTM) が有効的に働きます。GTM を導入すると、ユーザーのサイト上でのさまざまな行動をトリガーし、GTM 上で設定した振る舞いを発火させることができます。Google Analytics でのユーザーイベント計測も GTM 経由で行うことができるので、EC サイトでユーザー行動を収集する上ではデファクトスタンダードになっていると言えます。

そして GTM では Cloud Retail 向けのタグが用意されており、こちらを使うことで簡単に GTM 経由で Cloud Retail にユーザーイベントを送信することができます。

Cloud Retail にユーザーイベントを記録する方法

Cloud Retail にユーザーイベントをリアルタイムに記録する方法は、シンプルな API リクエスト以外にもさまざまな方法が用意されています。

  • Google Tag Manager (GTM) のデータレイヤーに直接書き込む
  • 既存の GTM の設定に Cloud Retail タグを追加する
  • JavaScript ピクセルで送信する
  • バックエンドで userEvents.write API を呼び出す

ユーザーイベントを記録する方法
ユーザーイベントを記録する方法

この中で特におすすめ、というよりも現実的なのは 既存の GTM の設定に Cloud Retail タグを追加する という方法です。その理由としては、Cloud Retail を導入する対象の多くは既に構築された EC サイトである場合が多く、フロントエンドの改修が必要な方法よりも既存の利用しているサービスの設定のみで済む方が影響範囲が低い、という点です。

例えば「Google Tag Manager (GTM) のデータレイヤーに直接書き込む」という方法の場合、フロントエンド側で商品詳細ページを表示するソースコード上にデータレイヤーに書き込む処理を追加しなければいけません。

GTM の導入が済んでいるサイトの場合は GTM コンソールからトリガーの追加やスキーマの変更などが柔軟に行えます。そのため、既存の GTM に Cloud Retail タグを追加するだけで済む（フロントエンドの改修を必要としない）場合が多いです。

Cloud Retail に送信できるユーザーイベント

Cloud Retail では、パーソナライズするために送信できるユーザーイベントの種類が決められています。

  • トップページの閲覧 (home-page-view)
  • 商品詳細の閲覧 (detail-page-view)
  • カートへの追加 (add-to-cart)
  • 購入完了 (purchase-complete)
  • 検索 (search)
  • 特集ページの閲覧 (category-page-view)
  • カートの表示 (shopping-cart-page-view)

最低限必要なイベントの種類があるのでこれらを全て計測しなければ Cloud Retail が利用できないわけではありませんが、Cloud Retail を使ってより最適な結果を得るためには全て計測した方が良いと言えます。

ユーザーイベントのスキーマ

Cloud Retail に送信できるユーザーイベントにはスキーマが定義されており、そのスキーマ通りにユーザーイベントを送信する必要があります。例えば商品詳細ページ閲覧イベントである detail-page-view は、次のように定義されています（なお次の例は最低限必要な項目のみを記載していますが、他にも省略可能な項目があります）。

{
  'eventType': 'detail-page-view',
  'visitorId': '<visitor-id>',
  'productDetails': [{
    'product': {
      'id': '<product-id>'
     }
   }]
}

Cloud Retail にユーザーイベントを直接送信する場合はこのスキーマに沿う必要がありますが、GTM で設定する場合は Google Analytics 4 に送信しているユーザーイベントを再利用することができる設定があります。既に Google Analytics 4 の e コマースのスキーマ通りに GTM 経由でユーザーイベントを記録している場合は比較的簡単に設定を行うことができます。

Google Analytics 4 では e コマース用のスキーマが定義されており、商品詳細ページ閲覧やカート追加などの EC サイトで発生するイベントは定義されたスキーマに沿って計測することが推奨されています。

例えば商品詳細ページ閲覧イベントである view_item は、次のように定義されています（必須項目のみを記載していますが、他にも省略可能な項目があります）。

{
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_id': '<item_id>'
    }]
  }
}

Cloud Retail 向けのスキーマと見比べてみると分かる通り、Cloud Retail 向けのスキーマと GA4 の e コマース向けのスキーマとでは定義が異なります。GTM ではこのスキーマの違いを吸収するためのタグ設定が用意されているため、GA4 の e コマース向けのスキーマにあわせて計測しておけば、その計測したデータを GTM 上で Cloud Retail 向けに流用することができます。

GTM から Cloud Retail にユーザーイベントをリアルタイムに送信する

前置きはここまでにして、ここからは Cloud Retail にユーザーイベントをリアルタイムに送信する設定を行う手順を解説します。この記事ではさまざまある方法のうち、最もスタンダードな方法である「GTM 経由で GA4 の e コマースのスキーマで計測し、Cloud Retail タグに流用する」を取り上げます。

デモサイトの準備

まずはデモサイトを用意します。イベントが送信できるようなボタンを配置しただけのシンプルすぎるサイトを用意します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EC Site Sample</title>
</head>
<body>
<div id="content">
  <h2>EC Sample</h2>
  <input type="button" value="商品詳細閲覧イベント" onclick="viewItem()">
  <input type="button" value="カート追加イベント" onclick="addToCart()">
  <input type="button" value="購入完了イベント" onclick="purchase()">
</div>
<script>
function viewItem() {
}
function addToCart() {
}
function purchase() {
}
</script>
</body>
</html>

viewItem() addToCart() purchase() メソッドをそれぞれイベントハンドラとして定義しています。ここに後述する各イベントをデータレイヤーに送信する処理を追加します。

このサイトをホスティングする手順は割愛しますが、Firebase Hosting がお手軽でおすすめです！

GTM をインストールする

まずは GTM をサイト内にインストールします。

GTM をまだ利用したことがない場合はこちらでアカウントの作成から始めます。


GTM アカウントの作成

[アカウント名] にはわかりやすい名前、[コンテナ名] はサイトの URL などを設定します。[ターゲットプラットフォーム] は [ウェブ] を選択します。[作成] をクリックすると利用規約が表示されるので、内容を確認後 [はい] をクリックしてアカウントの作成を完了します。

GTM のコンソールが開き、サイト内に組み込む必要のあるスニペットがポップアップ表示されます。それぞれ <head> と <body> にそれぞれ埋め込みます。


GTM のインストール

GA4 の e コマースのスキーマで計測する

サイトに定義した viewItem() addToCart() purchase() メソッドに、それぞれ対応するデータレイヤーにユーザーイベントを計測する処理を追加します。追加するイベントは GA4 の e コマース向けのサンプルコードをそのまま使っています。

計測する処理を加えた後のソースコード全体は、次のようになります（GTM をインストールするコードは省略しているので、適宜修正してください）。

<!DOCTYPE html>
<html>
<head>
  <!-- Google Tag Manager -->
  【GTM のインストールタグ】
  <!-- End Google Tag Manager -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EC Site Sample</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
【GTM のインストールタグ】
<!-- End Google Tag Manager (noscript) -->
<div id="content">
  <h2>EC Sample</h2>
  <input type="button" value="商品詳細閲覧イベントを送信" onclick="buttonClick()">
  <input type="button" value="カート追加イベント" onclick="addToCart()">
  <input type="button" value="購入完了イベント" onclick="purchase()">
</div>
<script>
function buttonClick() {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    ecommerce: {
      items: [{
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 9.99,
        quantity: 1
      }]
    }
  });
}
function addToCart() {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      items: [{
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 9.99,
        quantity: 1
      }
      ]
    }
  });
}
function purchase() {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "purchase",
    ecommerce: {
        transaction_id: "T_12345",
        affiliation: "Google Merchandise Store",
        value: 25.42,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
        {
          item_id: "SKU_12345",
          item_name: "Stan and Friends Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          currency: "USD",
          discount: 2.22,
          index: 0,
          item_brand: "Google",
          item_category: "Apparel",
          item_category2: "Adult",
          item_category3: "Shirts",
          item_category4: "Crew",
          item_category5: "Short sleeve",
          item_list_id: "related_products",
          item_list_name: "Related Products",
          item_variant: "green",
          location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 9.99,
          quantity: 1
        },
        {
          item_id: "SKU_12346",
          item_name: "Google Grey Women's Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          currency: "USD",
          discount: 3.33,
          index: 1,
          item_brand: "Google",
          item_category: "Apparel",
          item_category2: "Adult",
          item_category3: "Shirts",
          item_category4: "Crew",
          item_category5: "Short sleeve",
          item_list_id: "related_products",
          item_list_name: "Related Products",
          item_variant: "gray",
          location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 20.99,
          promotion_id: "P_12345",
          promotion_name: "Summer Sale",
          quantity: 1
        }]
    }
  });
}
</script>
</body>
</html>

修正したサイトをデプロイしたら、サイトのソースコードに対する作業は完了です。

GA4 タグを設定する

次に GTM コンソールで GA4 タグの設定を行います。GA4 のアカウント作成手順は省略しますので、下記を参考にアカウントを作成してください（「データ ストリームを追加する」では「ウェブ」を選びます）。GA4 のコンソールでは、「G-」形式の ID を見つける の手順に沿って「G-」形式の ID を確認し、控えておきます。

次に GTM コンソールで GA4 の設定を行います。次の手順を参考にしながら進めます。

上記のヘルプに記載のある通り、GTM での GA4 の設定は2種類あります。[Google アナリティクス: GA4 設定] は GA4 の初期設定に使用するもので、サイトが開いた際に一度だけ発火するようにします。[Google アナリティクス: GA4 イベント] は各イベントの送信時に使用するもので、イベントの種類ごとに対応するタグを作成し、イベント計測が必要なタイミングでそれぞれ発火するようにします。

Google アナリティクス: GA4 設定

まず [Google アナリティクス: GA4 設定] の設定から行います。

  1. [タグ] > [新規] をクリックします。
  2. [タグの設定] をクリックします。
  3. [Google アナリティクス: GA4 設定] を選択します。
  4. [測定 ID] に「G-」形式の ID を入力します。
  5. [トリガー] をクリックし [Initialization - All Pages] を選択します。
  6. [保存] をクリックします。

Google アナリティクス: GA4 設定
Google アナリティクス: GA4 設定

Google アナリティクス: GA4 イベント

[Google アナリティクス: GA4 イベント] は、今回の場合 view_item add_to_cart purchase の3つを設定します。

  1. [タグ] > [新規] をクリックします。
  2. [タグの設定] をクリックします。
  3. [Google アナリティクス: GA4 イベント] を選択します。
  4. [設定タグ] で、先ほど作成した設定タグを選択します。
  5. [イベント名] で view_item を指定します。
  6. [トリガー] をクリックし、タグを配信するイベントを [カスタムイベント] として作成します。
  7. [保存] をクリックします。

Google アナリティクス: GA4 イベント
Google アナリティクス: GA4 イベント

手順 7 のトリガーの作成の手順を補足すると、トリガーを選択する画面から [+] ボタンをクリックすることでその場でトリガーを新規に作成することができます。[トリガーのタイプ] は [カスタムイベント] に、[イベント名] は view_item に設定します。

トリガーの作成
トリガーの作成

この作業を add_to_cart と purchase に対しても行い、計3つのイベントタグとトリガーを作成します。

プレビューで確認する

GTM には設定をリリースする前にプレビューする機能があります。プレビューを使って GA4 の設定が正しく行えているか確認します。ワークスペースのトップページから [プレビュー] をクリックします。

GTM のプレビュー
GTM のプレビュー

新しいタブで Tag Assistant コンソールが開きます。プレビュー対象のサイトの URL を入力し [Connect] をクリックします。

プレビューの接続先の設定
プレビューの接続先の設定

数秒待つと、指定した URL が新規ウインドウで開きます。このウインドウの中で操作した内容が Tag Assistant コンソールに反映され、データレイヤーに送信されたイベントデータなどを確認できます。

プレビュー中のサイト
プレビュー中のサイト

例えばプレビュー中のサイトで「商品詳細イベントを送信」のボタンをクリックすると、Tag Assistant コンソールの view_item のイベントタグが [Tags Fired] に含まれるようになることが確認できます。

Tag Assistant コンソール
Tag Assistant コンソール

プレビュー中のサイトでイベントを発生させる操作を行なっているのにも関わらずイベントタグが [Tags Not Fired] に含まれるままの場合は、正しく設定が行えていない可能性があります。

タグ設定を公開する

タグ設定を公開すると、タグの設定が公開しているサイトに反映されます。

タグ設定の公開
タグ設定の公開

Google Analytics のコンソールのリアルタイムページを見てみると、イベントが流れてきていることが確認できると思います。

Google Analytics のコンソール
Google Analytics のコンソールでのイベントの確認

Cloud Retail タグを設定する

GTM と GA4 の設定が終わりましたので、次に Cloud Retail タグの設定を行います。

Google Cloud プロジェクトを作成する

まず Cloud Retail で使う Google Cloud プロジェクトを作成します。Google Cloud プロジェクトの作成方法は次のドキュメントを参照してください。

コンソールのトップページに [プロジェクト番号] が表示されているので、控えておきます。

API キーを発行する

Google Cloud コンソールのメニューから [API とサービス] の [認証情報] を選び、認証情報ページに移動します。

認証情報ページを開く
認証情報ページを開く

[認証情報を作成] をクリックして [API キー] を選択します。

API キーの作成
API キーの作成

生成された API キーを控えておきます。この API キーは Cloud Retail タグを設定する際に使用します。

visitorId 変数を作成する

GTM コンソールを開き、メニューから [変数] を開き [ユーザー定義変数] の [新規] をクリックします。

ユーザー定義変数の作成
ユーザー定義変数の作成

名前を [GA visitorId] にし、[変数の設定] のペンアイコンをクリックします。

変数の設定
変数の設定

[変数タイプ] から [ファーストパーティ Cookie] を選択します。

変数タイプの設定
変数タイプの設定

[Cookie 名] を [_ga] に指定します。[値の形式] を開き [「undefined」を次の値に変換...] にチェックし "" を入力します。最後に [保存] をクリックします。

Cookie 名と値の形式の設定
Cookie 名と値の形式の設定

作成した visitorId 変数は、この後に作成する Cloud Retail のタグで使用します。

Cloud Retail タグを作成する

Cloud Retail タグを作成します。メニューから [タグ] を開き [新規] をクリックします。

タグの新規作成
タグの新規作成

名前を [Cloud Retail] にし、[タグの設定] のペンアイコンをクリックします。

タグの設定
タグの設定

[タグタイプ] から [Cloud 小売] を選びます。

タグタイプの選択
タグタイプの選択

タグの設定の各項目を設定します。

Cloud Retail タグの設定
Cloud Retail タグの設定

  • [API キー] は事前に払い出しメモしておいた API キーを、プロジェクト番号は事前にメモしておいた Google Cloud プロジェクトの番号を指定します。
  • [API バージョン] は最新である [V2] のままにしておきます。
  • [カタログ ID] は default_catalog のままにしておきます（別途、商品カタログを用意する際に別なカタログを作成している場合のみ変更します）。
  • [ユーザーイベントデータ] は GA4 を使っている場合は [データレイヤー] を設定します。
  • [+ UserEvent メッセージの値を上書き] をクリックします。[フィールドセレクタ] は [visitorId] に、[フィールド値] は [GA visitorId] （「変数の作成」で作成した変数名）に設定します。

visitorId の設定
visitorId の設定

[保存] をクリックして、作成完了です。トリガーが設定されていない旨のメッセージが表示されますが、後述する作業で設定するためここでは無視してください。

トリガーを設定する

作成した Cloud Retail タグに対してのトリガーは通常のトリガーとは異なり GA4 イベントのタグの後に発火するように設定する 必要があります。今回の場合は GA4 イベントタグを流用して Cloud Retail にユーザーイベントを送信することとしているため、GA4 → Cloud Retail の順番で発火させる必要があります（Cloud Retail が先に発火してしまうと正しく動作しません）。

作成済みの GA4 の view_item イベントタグの設定を開き、[詳細設定] の [タグの順序付け] を開き [GA4 view_item が発効した後にタグを配信] にチェックを付けます。[クリーンアップ] で [Cloud Retail] を選びます。また、同様の設定を add_to-cart と purchase にも行います。

タグの順序付け
タグの順序付け

ここまでの設定が終わったら [公開] をクリックして、設定を公開します。

ユーザーイベントが計測されていることを確認する

ここまでの設定を確認するには Cloud Retail のコンソールのメニューから [データ] を開き、[イベント] タブを開きます。

リアルタイムイベントの確認
リアルタイムイベントの確認

ユーザーイベントのデータは期間指定ができ、イベントが発生した日時に合わせてデータが送信できているか確認できます。[リアルタイム] はどれほどリアルタイムで表示されるか明記していませんが、感覚としてニアリアルタイム程度で考えていただけると良いかと思います。

まとめ

GTM のインストールから Cloud Retail にユーザーイベントを送信するまで、一気通貫で開設しました。導入先の EC サイトで既に行われている設定によってはこの手順から少し変更しなければいけない部分もあるかも知れませんが、本記事で解説した手順が実際に設定される際の一助になれば幸いです。本記事では触れきれていない話題もあるので、また別な機会にブログ化したいと思います。

7日目は「CloudSQL」の記事が公開される予定です。お楽しみに！

Google Cloud Japan
Google Cloud JapanPublication

Google Cloud Japan のエンジニアを中心に情報発信をしている Publication です。Google Cloud サービスの技術情報を中心に公開しています。各記事の内容は個人の意見であり、企業を代表するものではございません。

Discussion