如何基于Odoo网站通过GTM与GA4实现增强型电商追踪

一、非开发者优先：插件方案 #

Odoo官方应用市场有现成的GTM/GA4集成插件，无需代码即可完成配置：

• 进入Odoo后台「应用」模块，搜索关键词 Google Tag Manager 或 GA4 Ecommerce Tracking
• 选择评分高、更新时间近的带「Ecommerce」标签的插件，安装后按向导完成配置：
  • 填入你的GTM容器ID（格式：GTM-XXXXXX）
  • 启用电商数据层同步选项，插件会自动在页面注入数据层代码，覆盖产品浏览、加购、下单、支付等核心电商事件
  • 部分插件支持直接绑定GA4测量ID，无需在GTM中单独配置GA4标签

二、无插件时的手动实现方案 #

若找不到合适插件，按以下步骤手动配置：

1. 注入GTM代码到Odoo网站 #

• 登录Odoo后台，进入「网站」→「设置」→「网站设置」
• 找到「自定义HTML头部」或「自定义脚本」区域，粘贴GTM后台获取的两段代码（一段放入<head>内，一段放入<body>开头）

2. 手动构建电商数据层 #

通过修改Odoo模板触发数据层推送，核心操作如下：

（1）产品详情页：推送产品浏览事件

• 进入「网站」→「模板」，找到产品详情页模板（通常为 website_sale.product）
• 在<head>结束前添加代码：

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_id': '<t t-esc="product.id"/>',
      'item_name': '<t t-esc="product.name"/>',
      'price': '<t t-esc="product.list_price"/>',
      'currency': '<t t-esc="website.currency_id.name"/>'
    }]
  }
});
</script>

（2）添加购物车事件

• 找到购物车相关模板（如 website_sale.cart 或添加购物车按钮的模板）
• 在添加购物车的点击事件中插入代码：

<script>
document.querySelector('.add_to_cart_button').addEventListener('click', function() {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'add_to_cart',
    'ecommerce': {
      'items': [{
        'item_id': '<t t-esc="product.id"/>',
        'item_name': '<t t-esc="product.name"/>',
        'price': '<t t-esc="product.list_price"/>',
        'quantity': 1,
        'currency': '<t t-esc="website.currency_id.name"/>'
      }]
    }
  });
});
</script>

（3）下单/支付完成事件

• 找到订单确认页模板（通常为 website_sale.confirmation）
• 在页面加载时推送购买完成事件：

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'transaction_id': '<t t-esc="order.name"/>',
    'value': '<t t-esc="order.amount_total"/>',
    'currency': '<t t-esc="order.currency_id.name"/>',
    'items': [
      <t t-foreach="order.order_line" t-as="line">
      {
        'item_id': '<t t-esc="line.product_id.id"/>',
        'item_name': '<t t-esc="line.product_id.name"/>',
        'price': '<t t-esc="line.price_unit"/>',
        'quantity': '<t t-esc="line.product_uom_qty"/>'
      }<t t-if="not loop.last">,</t-if>
      </t>
    ]
  }
});
</script>

3. 在GTM中配置GA4标签 #

• 登录GTM后台，创建GA4配置标签并填入GA4测量ID
• 创建对应触发器，匹配数据层的事件（如view_item、add_to_cart、purchase）
• 发布GTM容器完成配置

三、验证配置有效性 #

• 用GA4后台的「实时」报告，触发电商操作（浏览产品、加购、下单），查看数据是否实时显示
• 启用GTM「预览」模式，检查数据层是否正确推送事件和参数

内容的提问来源于stack exchange，提问作者Marie Bestard