如何限制Facebook Pixel仅在Facebook来源流量触发事件？

要实现仅当流量来自Facebook时触发AddToCart事件，核心是判断用户的访问来源是否为Facebook，再决定是否执行像素追踪代码。以下是两种可行的实现方式：

方法一：通过来源URL判断 #

直接检查用户进入当前页面的来源地址是否包含Facebook的域名：

// 封装判断来源的工具函数
const isFromFacebook = () => {
  const referrer = document.referrer.toLowerCase();
  // 匹配Facebook相关域名，包括facebook.com、fb.com等
  return referrer.includes('facebook.com') || referrer.includes('fb.com');
};

// 点击加入购物车时的逻辑
const handleAddToCart = (action) => {
  // 仅当来源是Facebook时触发事件
  if (isFromFacebook()) {
    ReactPixel.fbq('track', 'AddToCart', {
      contents: [{ id: action.payload.sku, quantity: 1 }],
      content_type: 'product',
      value: action.payload.price,
      currency: 'USD',
    });
  }
  // 其他加入购物车的业务逻辑...
};

方法二：通过UTM参数判断 #

如果你的Facebook广告配置了UTM参数（比如utm_source=facebook），可以通过解析URL的查询参数来判断：

// 封装获取URL参数的工具函数
const getUrlParam = (paramName) => {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
};

// 点击加入购物车时的逻辑
const handleAddToCart = (action) => {
  const utmSource = getUrlParam('utm_source')?.toLowerCase();
  // 检查utm_source是否为facebook或fb
  if (utmSource === 'facebook' || utmSource === 'fb') {
    ReactPixel.fbq('track', 'AddToCart', {
      contents: [{ id: action.payload.sku, quantity: 1 }],
      content_type: 'product',
      value: action.payload.price,
      currency: 'USD',
    });
  }
  // 其他加入购物车的业务逻辑...
};

注意事项 #

• 若用户在网站内跳转后才触发AddToCart，document.referrer会变成网站内的页面地址，此时建议结合会话存储（sessionStorage）：在页面初始化时判断来源，将结果存入sessionStorage，后续触发事件时读取该值。
• UTM参数需要确保Facebook广告投放时正确配置，否则无法通过该方式判断。

内容的提问来源于stack exchange，提问作者Omar Aljoundi