如何在React组件中调用函数触发Google Ads转化追踪？

你已经在index.html中配置好了基础的Google Tag和转化事件代码，接下来在React组件里触发转化非常简单——因为gtag和gtag_report_conversion都是挂载在全局window对象上的，直接调用即可。

场景1：点击按钮触发转化（无跳转） #

比如支付完成按钮，点击后直接发送转化事件：

function PaymentButton() {
  const handleConversion = () => {
    // 调用全局的转化追踪函数
    window.gtag_report_conversion();
  };

  return (
    <button onClick={handleConversion}>
      完成支付
    </button>
  );
}

场景2：点击链接跳转同时触发转化 #

如果需要点击链接后先发送转化事件，再跳转到目标页面，给gtag_report_conversion传入目标URL即可：

function CheckoutLink() {
  const handleLinkClick = (e) => {
    e.preventDefault(); // 先阻止默认跳转行为
    // 传入要跳转的页面地址
    window.gtag_report_conversion('/payment-success');
  };

  return (
    <a href="/payment-success" onClick={handleLinkClick}>
      前往结算
    </a>
  );
}

额外提示 #

• 确保index.html中的两个脚本都正确加载，没有语法错误，否则全局函数会无法调用
• 如果使用TypeScript，需要给window对象添加类型声明，避免类型报错：

declare global {
  interface Window {
    gtag: (...args: any[]) => void;
    gtag_report_conversion: (url?: string) => boolean;
  }
}

• 测试时可以打开浏览器控制台，查看dataLayer数组的变化，确认转化事件是否成功推送；也可以用Google Ads的测试工具验证转化是否被正确记录

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