google CloudのCloud Retailを実装する(1) GTMでリアルタイムイベントを記録する

google cloudでAPIキーを発行

GTM経由でユーザーイベントをリアルタイムで連携するため、GTMからのリクエストをGoogleクラウド側が承認しないといけない。公式はAPIキーを推奨しているのため、事前にAPIキーを発行しておく。

サイトのEC設定を確認

cloud retailを導入するため、GA4の導入が必須になっている。また、ほとんどcloud retailを導入したいのはECサイトなので、標準化されたEC設定がサイトに導入されているかどうかを事前に確認する必要がある。

https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag&hl=ja

Google推奨しているEC設定は以下の形(view itemを例とする)

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
      }]
    }
  });
JavaScript

ところが、GA4の標準通りにECイベントを実装していない会社もある。例えば、以下のようにECイベントを実装している

dataLayer.push({
  event: "view_item",
  evCategory: "engagement",
  evAction: "view_item",
  gtm-item_movie_url: null,
  products: [
    {
      gtm-ec_item_id: "KK23",
      gtm-ec_item_brand: "002",
      gtm-ec_item_variant_color: null,
      gtm-ec_item_variant_size: null,
      gtm-ec_item_sku: null,
      gtm-ec_item_placeholder: "KK23",
      gtm-ec_item_category_code: "10",
      gtm-ec_item_subcategory_code: "1005",
      gtm-ec_item_sales_type_name: "通常",
      gtm-ec_item_sales_type: "P",
      gtm-ec_item_label_new: "0",
      gtm-ec_item_label_restock: "0",
      gtm-ec_item_label_freeship: "1",
      gtm-ec_item_label_return: "1",
      gtm-ec_item_review: 41,
      gtm-ec_item_price: 11000
    }
  ],
  gtm.uniqueEventId: 40219
})
JavaScript

この状況だと、cloud retailの実装は少し難しくなる。

標準のECイベントを実装しているサイトなら、cloud retailを実装する際、以下のURLを参考可能

https://zenn.dev/google_cloud_jp/articles/ad5de014ffe061

ただ、標準のECイベントを実装していないサイトなら、上記の方法は通用しない。

以下で、標準イベントを実装していないサイトで、GTMでユーザーイベントをリアルタイムに送信する方法を紹介する。

visitor idを作成

GTMで、変数⇒ファストパーティCookieを選択して、VisitorIDを作成

以下のように変数を設定する

API KEY変数を作成

GTMで、変数⇒定数の流れで、Google Cloudから発行したAPIキーの値を入力

GCP project number変数を作成

Project IDではなく、Project Numberである。ここ間違いしやすいのため、注意したほうが良い。
私はGTMにproject idという名前を定数を登録しているが、上の画像のProject numbernの数値を入れるべき。

GTMでカスタムHTMLを作成

GTM⇒タグ⇒作成⇒カスタムHTMLの順番で、カスタムHTMLを登録しておく。

<script>
var ga_cookieid = {{GA visitorId}};
var event_time = {{【RetailAI】eventTime}}
var user_id = {{DL_gtm-customer_id}}

dataLayer.push({ cloud_retail: null });
dataLayer.push({
      'cloud_retail': {
        'eventType': 'home-page-view',
        'visitorId': ga_cookieid,
        'eventTime': event_time,
        'userInfo': {
            'userId':user_id
      }
      }
      ,'event': 'cloud_retail_home_page_view'
    });

</script>
JavaScript

event_typeを間違えないように、注意したほうが良い。一文字でも間違ったら、cloud retail側が処理できないのため。

home-page-view以外に、次のeventTypeもサポートされている。

優先度ユーザー イベント
最初のライブテストに必要add-to-cart
detail-page-view
purchase-complete
home-page-view(Recommendations AI の場合)
search(Retail Search の場合)
時間とともに Recommendations AI モデルの品質を向上させるうえで重要category-page-view
search
shopping-cart-page-view

最低上記の五つのイベントを実装する必要がある。

もう一つ例を記載します

<script>
  var ga_cookieid = {{ga_cookieid}};
  var event_time = {{event_time}};
  var user_id = {{user_id}};
  var product_data = {{product_data}};
  var productDetails = [];
  var user_agent = {{user_agent}}
  var attribution_token = {{attribution_token}}
  
  for (var i = 0; i < product_data.length; i++) {
    var product = product_data[i];

    var productDetail = {
      'product': {
        'id': product.id
      }
    };

    productDetails.push(productDetail);

  }

  var dataLayerObj = {
    'cloud_retail': {
      'eventType': 'shopping-cart-page-view',
      'visitorId': ga_cookieid,
      "attributionToken": attribution_token,
      'productDetails': productDetails,
      'userInfo': {
            'userId':user_id
            ,"userAgent": user_agent
      }
    },
    'event': 'cloud-retail-shopping-cart-page-view'
  };

  dataLayer.push({ 'cloud_retail': null });
  dataLayer.push(dataLayerObj);
</script>
JavaScript

GTMのcloud retail tagでイベントを送信

cloud retail変数を作成

GTMで変数⇒データレイヤー変数でcloud retail変数を作成します

GTMでトリガーを作成します

GTM側でcloud retail datalayerを作成するとき、カスタムイベントも一緒に作ったので、このカスタムイベントをトリガーとして使える

<script>
  var dataLayerObj = {
    'cloud_retail': {
      'eventType': 'shopping-cart-page-view',
      'visitorId': ga_cookieid,
      "attributionToken": attribution_token,
      'productDetails': productDetails,
      'userInfo': {
            'userId':user_id
            ,"userAgent": user_agent
      }
    },
    'event': 'cloud-retail-shopping-cart-page-view'   //カスタムイベントはこちらです
  };

  dataLayer.push({ 'cloud_retail': null });
  dataLayer.push(dataLayerObj);
</script>
JavaScript

GTMでトリガー作成⇒カスタムイベントでトリガーを作成する

Cloud retail tagを作成

GTM⇒タグ⇒タグ作成⇒cloud小売りを選択

これで作成完了。

発火確認

方法① GCP cloud retail管理画面で確認

体感でほぼリアルタイムで反映される

方法② ブラウザのdeveloper toolで確認

network⇒userEventを検索して、cloudretailのrequestが確認できる。statusが200になっているなら連携が成功

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注