无法使用 React 将电子商务数据发送到 Google Analytics

Question

I'm having trouble sending enhanced eCommerce tracking data to google analytics with React.

I put this code in my index.js just for testing:

ReactGA.initialize('UA-MY-ID-7', {
    debug: true,
 });
ReactGA.plugin.require('ec');


ReactGA.plugin.execute('ec', 'setAction', 'detail', {
  step: 1,
});

ReactGA.plugin.execute('ec', 'setAction', {
  id: '1',
  affiliation: 'Allocab',
  revenue: 30, // Grand Total.
  shipping: '0', // Shipping.
  tax: 32, // Tax.
  currency: 'EUR',
  coupon: 'POMOCODE',
});

ReactGA.event({
  category: 'Booker-ecommerce',
  action: 'New transaction',
});

ReactGA.plugin.execute('ec', 'addPromo', 'promo_click', {
  name: 'PROMOCODE',
});

ReactGA.event({
  category: 'Booker-ecommerce',
  action: 'New discount code',
});

ReactGA.plugin.execute('ec', 'addProduct', 'add', {
  name: 'PRODUCT', // Product name. Required.
  price: 30, // Unit price.
  quantity: 1, // Quantity.
  currency: 'EUR',
  category: 'CATEGORY',
});

ReactGA.event({
  category: 'Booker-ecommerce',
  action: 'Add product',
});
ReactGA.plugin.execute('ec', 'setAction', 'add', {
  step: 2,
});

ReactGA.plugin.execute('ec', 'addProduct', 'checkout', {
  name: 'PRODUCT', // Product name. Required.
  price: 30, // Unit price.
  quantity: 1, // Quantity.
  currency: 'EUR',
  category: 'CATEGORY',
});

ReactGA.event({
  category: 'Booker-ecommerce',
  action: 'Start checkout',
});

ReactGA.plugin.execute('ec', 'setAction', 'checkout', {
  step: 3,
  option: 'Visa',
});

ReactGA.plugin.execute('ec', 'addProduct', 'purchase', {
  name: 'PRODUCT', // Product name. Required.
  price: 30, // Unit price.
  quantity: 1, // Quantity.
  currency: 'EUR',
  category: 'CATEGORY',
  coupon: 'PROMOCODE',
});

ReactGA.event({
  category: 'Booker-ecommerce',
  action: 'Purchase product',
});

ReactGA.plugin.execute('ec', 'setAction', 'purchase', {
  step: 4,
  option: 'Visa',
});

ReactGA.pageview();

I'm using the Google Debugger and everything seems to be ok. But I received nothing in my Google Analytics. When I use the old ecommerce plugin it's working properly, but with the enhanced ecommerce nothing. I tried without ReactGA library with js native code, but same result.

Any idea what's can be my problem?

Answer 1

Try this its work for me and also use documentation

 ReactGA.plugin.require('ec');


 for (let i = 0; i < data.orderItems.length; i++) {
          ReactGA.plugin.execute('ec', 'addProduct', {
            id: data.orderItems[i].id,
            name: data.orderItems[i].product.name,
            brand: data.orderItems[i].product.brand,
            category: data.orderItems[i].product.categories,
            variant: data.orderItems[i].product.product_type_name,
            sku: data.orderItems[i].product_id,
            price: data.orderItems[i].cost,
            quantity: data.orderItems[i].quantity,
            currency: "USD",
          });
        }

        ReactGA.plugin.execute('ec', 'setAction', 'purchase', {
          id: data.order_id,
          affiliation: storeName,
          revenue: data.total_cost,
          shipping: data.delivery_cost,
          currency: "USD",
          tax: data.tax
        });
        ReactGA.pageview('/orderDetails');
        ReactGA.plugin.execute('ec', 'clear');