How can I track Google Adwords conversions in my react application?

Question

On my react PWA I want to track conversions in Google Adwords after, for example, sending form data. I already use the react-ga module to track pageviews which uses a UA-xxxxxx number. Now I have an Adwords number AW-xxxxxx and I can't seem to find a working example with that. Which react module can I use to send those Events to my AW-xxxxxx number?

I already took a look at really small and seemingly incomplete Adwords modules for react, but they do not include Event tracking or don't take AW-xxxxx numbers, only GTM-xxxxx.

这是我需要实现的代码：

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-xxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-xxxxxx');
</script>

对于事件：

<script>
  gtag('event', 'conversion', {'send_to': 'AW-xxxxx/XXXXXX'});
</script>

Answer 1

我努力实施上述回应。这是完成此任务的更简单的方法。

1. 转到 React 网站的 index.html 文件（位于“public”文件夹内）。
2. 添加类似于下面的代码。（确保将 XXXXXXX 替换为您的实际 AW 代码。）

<!-- ADDED TO TRACK GOOGLE CONVERSION -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

3. 现在转到您想要引入跟踪的类组件，并将此代码插入到组件内部，但在“render() {”之前。

componentDidMount () {
    window.gtag('config', 'AW-XXXXXXXXXX');
    window.gtag('event', 'conversion', {'send_to': 'AW-XXXXXXXXXX/YYYYYYYYY-ZZZZZZZZZZ'});
}

4. 使用 Google Chrome 扩展“Google Tag Assistant”来验证是否为您的网站正确调用了标签。

Answer 2

您可以<script>直接将标签添加到您的index.html或使用Helmet。然后就可以打电话了window.gtag。

不过，由于您已经在使用 Google Analytics（分析）react-ga，所以我建议您使用 Google Analytics（分析）目标作为 Google Ads 的转化指标。按着这些次序：

• 链接 Google Analytics 和 Google Ads：https://support.google.com/analytics/answer/1033961
• 在 Google Analytics 中设定目标： https: //support.google.com/analytics/answer/1032415 ?hl=en
• 在 Google Ads 中导入目标： https: //support.google.com/analytics/answer/1034306 ?hl=en

这样您只需担心使用单一服务进行跟踪。