如何在Nuxt.js中基于@nuxtjs/google-analytics实现Google Enhanced Ecommerce

完全可以通过@nuxtjs/google-analytics实现Google Enhanced Ecommerce的集成，不需要额外安装其他依赖，具体操作如下：

1. 基础原理 #

@nuxtjs/google-analytics底层基于vue-analytics封装，暴露了query方法可以直接调用原生GA的所有指令，包括增强电商所有ec:开头的API，和原生GA写法可以一一对应。

2. 基础使用方式 #

在客户端生命周期（如mounted）或仅客户端运行的逻辑中，直接调用this.$ga.query传入对应的GA指令即可，你给出的添加商品示例对应Nuxt中的代码如下：

// 组件内示例，确保仅客户端执行
mounted() {
  this.$ga.query('ec:addProduct', {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'price': '29.20',
    'quantity': 1
  })
  // 对应设置操作行为，比如商品点击
  this.$ga.query('ec:setAction', 'click', {
    list: '搜索结果页'
  })
  // 最后发送事件触发数据上报，否则数据不会同步到GA后台
  this.$ga.event('交互', '点击', '商品卡片')
}

3. 全局封装优化（可选） #

如果需要多处调用增强电商能力，可以自定义Nuxt插件封装常用方法，避免重复写判断逻辑：

• 第一步：新建plugins/ga-ec.js文件

export default ({ app }, inject) => {
  // 封装所有常用的增强电商方法
  const gaEc = {
    // 添加商品
    addProduct(product) {
      if (!process.client) return
      app.$ga.query('ec:addProduct', product)
    },
    // 设置操作行为
    setAction(action, params = {}) {
      if (!process.client) return
      app.$ga.query('ec:setAction', action, params)
    },
    // 上报事件
    sendEvent(category = '电商', action = '操作', label = '') {
      if (!process.client) return
      app.$ga.event(category, action, label)
    }
  }
  // 注入到Nuxt全局实例，可在组件、vuex、中间件中调用
  inject('gaEc', gaEc)
}

• 第二步：在nuxt.config.js中注册插件

export default {
  plugins: [
    '~/plugins/ga-ec.js'
  ]
}

• 第三步：组件中直接调用封装好的方法

this.$gaEc.addProduct({
  id: 'P12345',
  name: 'Android Warhol T-Shirt',
  // 其他商品参数
})
this.$gaEc.setAction('click', { list: '搜索结果页' })
this.$gaEc.sendEvent('电商', '商品点击', '搜索结果')

4. 注意事项 #

• 所有GA相关的调用都要确保仅在客户端执行，服务端运行时没有window对象会导致报错，除了上述插件中加process.client判断外，也可以在调用前加该判断，或者将逻辑放在mounted、onMounted等仅客户端执行的生命周期中。
• 所有增强电商的指令设置完成后，必须调用一次事件或页面上报，否则设置的电商数据不会同步到GA后台。

内容的提问来源于stack exchange，提问作者dokichan