redux-beacon: enhanced ecommerce actions not being fired

Question

I'm using redux-beacon to manage google analytics enhanced ecommerce actions. What I'm noticing is that pageview events are being fired off fine but the enhanced ecommerce actions are not being sent. It's like they are being stored in the datalayer but no network request is being triggered. I'm new to enhanced ecommerce tracking so perhaps I'm missing something?

For example, here I have the events which are triggered when viewing a product:

export const analyticsEcommerceProduct = trackEcommProduct((action) => {
  const { product } = action;
  return {
    id: product.id,
    name: product.title,
    category: product.type
  };
}, CLIENT_TAG);

export const analyticsEcommerceAction = trackEcommAction((action) => {
  const { actionType, id, revenue } = action;
  return {
    actionName: actionType,
    id,
    revenue
  };
}, CLIENT_TAG);

Which are added to my eventMap:

const eventsMap = {
  CLIENT_ANALYTICS_PAGEVIEW: clientPageView,
  CLIENT_ANALYTICS_ECOMM_PRODUCT: analyticsEcommerceProduct,
  CLIENT_ANALYTICS_ECOMM_ACTION: analyticsEcommerceAction
};

const middleware = createMiddleware(eventsMap, GoogleAnalytics(), GoogleTagManager());

Now when I land on the product page the analyticsEcommerceProduct and analyticsEcommerceAction events are firing as expected but no network request is made to send this information:

Is there some sort of event to 'send' the data that I need to add?

Answer 1

Is there some sort of event to 'send' the data that I need to add?

Yes, I believe so. In reading the examples that Google provides here: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce, it looks like the eCommerce actions set meta data that will be sent along with the next event or pageview. Each example either ends with a ga('send', 'pageview'); or an event call like:

ga('send', 'event', 'Checkout', 'Option', {
     hitCallback: function() {
       // Advance to next page.
     }
  });

I'd try going to a new page and inspecting the call made there to see if it includes the data you need. If it does, I'll think of a way to make this easier for redux-beacon users. At the very least I think some documentation/tips are in order. As always, I'm open to suggestions/pr's.