google cloudでAPIキーを発行
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/1.png)
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を作成
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled.png)
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled%20(1).png)
以下のように変数を設定する
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled%20(2).png)
API KEY変数を作成
GTMで、変数⇒定数の流れで、Google Cloudから発行したAPIキーの値を入力
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled%20(3).png)
GCP project number変数を作成
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled%20(5).png)
Project IDではなく、Project Numberである。ここ間違いしやすいのため、注意したほうが良い。
私はGTMにproject idという名前を定数を登録しているが、上の画像のProject numbernの数値を入れるべき。
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/Untitled%20(4).png)
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>
JavaScriptevent_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>
JavaScriptGTMのcloud retail tagでイベントを送信
cloud retail変数を作成
GTMで変数⇒データレイヤー変数でcloud retail変数を作成します
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/120601.png)
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>
JavaScriptGTMでトリガー作成⇒カスタムイベントでトリガーを作成する
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/120602.png)
Cloud retail tagを作成
GTM⇒タグ⇒タグ作成⇒cloud小売りを選択
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/120603.png)
これで作成完了。
発火確認
方法① GCP cloud retail管理画面で確認
体感でほぼリアルタイムで反映される
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/120604.png)
方法② ブラウザのdeveloper toolで確認
network⇒userEventを検索して、cloudretailのrequestが確認できる。statusが200になっているなら連携が成功
![](https://storage.googleapis.com/blog-picture/20231117_cloud%20Retail/120605.png)