📘
GTM+GA4でデータ計測できるようにする③
eコマースタグのview_itemイベントを使って、商品詳細ページを表示したときの計測を行います。
GTM
新規でGA4イベントタグを追加します。
設定タグは「GA4設定」
イベント名は「view_item」
詳細設定で「eコマースデータを送信」データソースは「DataLayer」を設定
トリガーはあらかじめ作っていた、カスタムイベントのview_itemを選択します。
EC-CUBE
こんな感じのタグをdefeult/detail.tplに挿入します。
default/detail.tpl
default/detail.tpl
// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item",
ecommerce: {
items: [{
item_name: "<!--{$arrProduct.name|h}-->", // Name or ID is required.
item_id: "<!--{$tpl_product_id}-->",
price: "<!--{$arrProduct.price02_min_inctax}-->",
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
item_list_name: "Search Results", // If associated with a list selection.
item_list_id: "SR123", // If associated with a list selection.
index: 1, // If associated with a list selection.
quantity: 1
}]
}
});
</script>
商品ID、商品名、価格だけ動的にして、あとはgoogleのリファレンス通りに設定しています。
プレビュー
GTMのプレビュー画面から、正常にview_itemイベントタグが発火していることが確認できます。
また、DataLayerタブから、商品詳細のデータが送られてきていることも確認できます。
GA4の管理画面DebugViewからも計測できていることを確認します。
view_itemに商品詳細が表示されていることが確認できました。
Discussion