📘

GTM+GA4でデータ計測できるようにする③

2023/02/21に公開

Google Analytics

EC-CUBE

googletagmanager

tech

eコマースタグのview_itemイベントを使って、商品詳細ページを表示したときの計測を行います。

GTM

新規でGA4イベントタグを追加します。
設定タグは「GA4設定」
イベント名は「view_item」
詳細設定で「eコマースデータを送信」データソースは「DataLayer」を設定
トリガーはあらかじめ作っていた、カスタムイベントのview_itemを選択します。

EC-CUBE

こんな感じのタグをdefeult/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に商品詳細が表示されていることが確認できました。

GTM

EC-CUBE

プレビュー

Discussion