Google Ads Conversion Tracking With React
I'm attempting to add Google Ads conversion tracking within a React App. In this situation I need to set it up to trigger on click as opposed to page URL. Within the index.html I added the Google Tag and the Conversion Event Snippet without issues.
My Question: How do I now call the function on a React Component to trigger a conversion?
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-______"></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-______');</script> Event Snippet:
<!-- Event snippet for Payment conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. --> <script>function gtag_report_conversion(url) { var callback = function () { if (typeof(url) != 'undefined') { window.location = url; } }; gtag('event', 'conversion', { 'send_to': 'AW-_____/_____', 'transaction_id': '', 'event_callback': callback }); return false; }</script>
Within a React component you can trigger a Google Ads conversion on click by using window.gtag as shown below.
The first AW-________ number is from your Google Tag.
The second AW-_______/________ number is from your Event Snippet.
const clickedButton = () => { //This will trigger the conversion window.gtag('config', 'AW-_______'); window.gtag('event', 'conversion', {'send_to': 'AW-______/____________'}); }