如何将Woocommerce加入购物车按钮的GTM事件改为Add To Cart

问题描述 #

我的产品页面的“加入购物车”按钮被识别为submit按钮，在Google Tag Manager（GTM）中触发了Form Start > Form Submit事件。我希望修改设置，让该按钮点击时触发Add to Cart按钮点击事件。

我的网站是trevillposters.co.uk，本人技术知识有限，对代码了解较浅。曾尝试在主题编辑器的CSS和JS文件中搜索“submit”和“add_to_cart”寻找修改位置，但未找到结果，也不敢随意改动；谷歌搜索结果多为修改按钮文本的方案，与需求无关。

解决方案（无需修改代码，通过GTM配置实现） #

因为你技术基础有限，优先推荐直接在GTM里调整配置，不用动网站代码：

• 步骤1：创建新的点击触发器

  1. 登录GTM后台，进入你的容器，点击左侧菜单的「触发器」→「新建」。
  2. 触发器类型选择「点击 - 所有元素」。
  3. 在「触发条件」里设置：
     • 选择「点击ID」或「点击类」（需要先在网站上用浏览器开发者工具查看“加入购物车”按钮的ID或类名）
     • 匹配条件设为「等于」，填入对应的ID/类名（比如你的按钮类名可能是single_add_to_cart_button，需要自己确认）
  4. 命名触发器为「Add to Cart 按钮点击」，保存。

• 步骤2：禁用原Form Submit触发器对该按钮的触发

  1. 找到原来触发Form Submit的触发器，编辑它。
  2. 在「例外」里添加规则：
     • 选择「点击ID」或「点击类」，匹配条件设为「等于」，填入“加入购物车”按钮的ID/类名。
  3. 保存修改，这样Form Submit事件就不会被这个按钮触发了。

• 步骤3：创建Add to Cart事件标签

  1. 点击左侧菜单的「标签」→「新建」。
  2. 标签类型选择「Google Analytics: GA4事件」（或你用的其他统计工具的事件标签）。
  3. 事件名称填add_to_cart，根据需要设置其他参数（比如商品ID、名称等）。
  4. 触发条件选择刚才创建的「Add to Cart 按钮点击」触发器。
  5. 保存标签。

• 步骤4：预览测试
  点击GTM右上角的「预览」，打开你的产品页面，点击“加入购物车”按钮，查看调试面板里是否触发了add_to_cart事件，同时Form Submit事件不再触发。确认无误后提交发布GTM版本。

补充：如何查看按钮的ID/类名 #

如果你不知道按钮的ID或类名，按以下操作：

1. 打开你的产品页面，右键点击“加入购物车”按钮，选择「检查」。
2. 在弹出的开发者工具中，找到按钮的HTML代码，比如<button id="add-to-cart" class="single_add_to_cart_button">，这里的add-to-cart是ID，single_add_to_cart_button是类名，选其中一个用来设置GTM规则即可。

内容的提问来源于stack exchange，提问作者Luke Trevill