如何在Big Cartel中通过Facebook像素正确追踪按钮点击事件

• 按钮ID与选择器不匹配
  按钮的id属性写的是"button add-to-cart-button"，这本身不符合HTML规范（ID不能包含空格），而且你在jQuery选择器里用的是#addToCartButton，和按钮实际的ID（add-to-cart-button，小写带连字符）完全不匹配，导致点击事件根本绑定不到按钮上。

• HTML语法错误：嵌套的script标签
  你把<button>元素放在了未闭合的<script>标签内部，这是无效的HTML结构。script标签用来包裹脚本代码，不能直接放置DOM元素，而且第一个<script>标签没有闭合，会导致后续代码解析异常。

• jQuery依赖缺失风险
  如果你的页面没有提前加载jQuery库，$('#addToCartButton')会抛出$ is not defined的错误，导致点击事件无法绑定。

• 模板变量渲染问题
  {{ option.price }}作为事件的value参数，需要确保它能被模板引擎正确渲染为合法的数字（比如29.99），如果渲染结果是字符串、空值或非数字，会导致Facebook像素事件参数无效。

修正后的代码示例： #

<!-- 先确保jQuery已加载（如果使用jQuery的话） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 按钮放在正常的HTML结构中 -->
<button id="add-to-cart-button">Add to Cart</button>

<script type="text/javascript">
  // 用正确的ID选择器绑定点击事件
  $('#add-to-cart-button').click(function() {
    // 确保option.price渲染为合法数字
    fbq('track', 'AddToCart', {
      currency: "EUR",
      value: {{ option.price }}
    });
  });
</script>

内容的提问来源于stack exchange，提问作者Artur Riony