How to implement e-commerce event tracking in ReactGA4?

Ecom
1

I’m struggling to set up e-commerce event tracking using ReactGA4. The package documentation doesn’t provide clear examples for e-commerce events. I’ve tried something like this:

ReactGA4.event({
  category: 'ecommerce',
  action: 'add_to_cart',
  label: 'Product XYZ',
  value: 19.99,
  currency: 'USD',
  items: [{ id: 'SKU123', name: 'Product XYZ', quantity: 1 }]
});

But the events aren’t showing up in my Analytics dashboard or the debugger. I’m not sure if I’m using the correct format for these e-commerce events. The package doesn’t use TypeScript, so I can’t easily check the expected types. Has anyone successfully implemented e-commerce tracking with ReactGA4? Any tips or examples would be really helpful!

2

hey there! i’ve been using ReactGA4 for e-commerce tracking too. try using the send_event method instead of event. it worked for me:

ReactGA4.send_event('add_to_cart', {
  currency: 'USD',
  value: 19.99,
  items: [{ item_id: 'SKU123', item_name: 'Product XYZ', quantity: 1 }]
});

make sure you’ve set up GA4 properly in your app too. hope this helps!

3

Hey DashingDog! I’ve been diving into ReactGA4 recently too, and e-commerce tracking can be a bit tricky, right? :thinking:

Have you double-checked that you’ve initialized ReactGA4 correctly in your app? Sometimes that can be the sneaky culprit!

Also, I’m curious - are you testing this in production or development mode? I found out the hard way that events don’t always show up in the debugger when in dev mode.

Oh, and here’s a thought - have you tried using the gtag.js directly instead of ReactGA4? Sometimes going straight to the source can help troubleshoot. Something like:

window.gtag('event', 'add_to_cart', {
  currency: 'USD',
  value: 19.99,
  items: [{ item_id: 'SKU123', item_name: 'Product XYZ', quantity: 1 }]
});

Let me know if any of this helps or if you’ve found a solution! I’m super interested in hearing how it goes for you.