How to register conversion to Google Adwords in ReactJS with react-ga?

user_8903411 0
Viewed 1597

I'm using react-ga and is working great. I can call events and track the pages.

But the script of conversions in Google Adwords is a bit different:

<script>
function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
      'send_to': 'AW-XXXX/XXXX',
      'value': 140.0,
      'currency': 'BRL',
      'transaction_id': '',
      'event_callback': callback
  });
  return false;
}
</script>

With React-GA I can register events like this:

ReactGA.event({
      category: "User",
      action: "Click Whatsapp button",
      value: 1,
    });

The problem is that object doesn't have the properties "send_to", "event_callback", "currency", "transaction_id".

So I have to use the ga object to do this (I think). I don't know if there is a difference between the ga object or the gtag object that Google Adwords tell me to use.

There is my try to register the conversion but nothing happens:

 ReactGA.ga("event", "conversion", {
      send_to: "AW-XXXX/XXXX",
      value:  140.0,
      currency: "BRL",
      transaction_id: "",
 });
reactjs google-analytics
1 Answers

After trying in many different ways, that is the way that really solve this:

Add the tag in the public/index.html without call the config:

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

Then add this route above all routes and outside the Switch component:

       // This will be called every time the location change
       <Route
          path="/"
          render={({ location }) => {
            window.gtag('config', 'UA-XXXXXXXXX', {
              page_path: location.pathname + location.search,
            });
          }}
        />

Now you can use the gtag object anywhere and with all parameters:

    window.gtag('event', 'purchase', {
      send_to: 'AW-XXXX/XXXX',
      value: order.orderTotal,
      currency: 'BRL',
      transaction_id: order.orderId,
      shipping: parseFloat(order.shipping.price),
      items: formatedItems,
    });.
user_89034110
Related