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.

This is the code I need to implement:

<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>

And for the Event:

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

Answer 1

I STRUGGLED with implementing the response above. Here is a MUCH EASIER way to get this accomplished.

1. Go to your index.html file for your React Website (located inside the "public" folder).
2. Add the code similar to what is below. (Make sure to replace the XXXXXXX with your actual AW code.)

---

<!-- 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. Now go to the Class Component you want to introduce the tracking to, and insert this code inside the component, but before the "render() {".

---

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

---

4. Use Google Chrome Extension 'Google Tag Assistant' to verify that the tag is being called correctly for you website.

Answer 2

You can add <script> tags directly to your index.html or use Helmet. Then you can call window.gtag.

What I'd recommend instead though, as you're already using Google Analytics with react-ga, is to use a Google Analytics Goal as a Conversion metric is Google Ads. Follow these steps:

• Link Google Analytics and Google Ads: https://support.google.com/analytics/answer/1033961
• Set goal in Google Analytics: https://support.google.com/analytics/answer/1032415?hl=en
• Import goal in Google Ads: https://support.google.com/analytics/answer/1034306?hl=en

This way you only have to worry about tracking with a single service.