Is it possible to implement Google Enhanced Ecommerce using @nuxtjs/google-analytics?

Question

I have web-application which has been implemented on Nuxt.js. I have connected Google Analytics to it, but there were nothing I was needed.

So, I have read about Google Enhanced Ecommerce and want to connect it to my app.

Here, I found what I actually want to do, but I have no idea on how can I do it on Nuxt.js.

For example:

ga('ec:addProduct', {               // Provide product details in an productFieldObject.
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel',            // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'black',               // Product variant (string).
  'price': '29.20',                 // Product price (number).
  'quantity': 1                     // Product quantity (number).
});

And as you can see, this is just pure JS, definitely not what I need. As I said, @nuxtjs/google-analytics has no such functionality. Iе has only page, event, screen and timings trackers, but this is not what I am looking for.

So, I'll ask this way: how can I implement code above (Enhanced Ecommerce) using Nuxt.js?

If someone has already done this and integrated Enhanced Ecommerce into Nuxt.js apps, how did you do that? Or is it still possible to do such things with @nuxtjs/google-analytics?

Thanks for answers!

Answer 1

So @nuxtjs/google-analytics is using vue-analytics, which does support ecommerce. We were using it for quite a while before switching to just regular GTM (mostly due to vue-gtag being too new at the time).

Just a note from the repo:

⚠️ Sorry but vue-analytics is not longer maintained. I would suggest you to switch to vue-gtag. With love, the guy who made the package.

Anyways, vue-analytics provides an example of how to use ecommerce here.

First, you need to enable it in your nuxt config:

export default {
  googleAnalytics: {
    id: 'UA-XXX-X',
    ecommerce: {
      enabled: true,
      enhanced: true // enables enhanced ecommerce
    }
  }
}

Then, you can call it like so in your components or Vuex modules:

this.$ga.ecommerce.addItem({
  id: '1234',                     // Transaction ID. Required.
  name: 'Fluffy Pink Bunnies',    // Product name. Required.
  sku: 'DD23444',                 // SKU/code.
  category: 'Party Toys',         // Category or variation.
  price: '11.99',                 // Unit price.
  quantity: '1'                   // Quantity.
})

See here for the full list of method names you can use on $ga.