使用Google分析跟踪Vuejs事件

Question

我希望能够追踪按钮和链接上的Google Analytics事件。在jQuery中，通常我会将值传递给data-属性，然后获取它们并调用所需的函数。我知道我不应该使用data-属性，因此我正在寻找最佳方法来实现这一点，可能会有多个按钮执行不同的跟踪操作，具有不同的data-purpose（属性），因此我需要传递data-purpose和data-user到vue组件/函数。

<button id="openmodal"  data-purpose="contact form" class="btn__primary" aria-label="Help" @click="contactForm">Contact Form</button>
  <button id="openmodal"  data-purpose="Opt In" class="btn__primary" aria-label="Help" @click="optIn">Opt In</button>

在分析中

ga('send', {
  hitType: 'event',
  eventCategory: 'button',
  eventAction: 'data-purpose',
  eventLabel: 'VALUE OF BUTTON'
});

- June

---

我认为使用 data-* 属性没有任何问题。你能否创建一个最小的代码片段或 jsfiddle 来展示你遇到的困难？ - Nisarg Shah

Answer 1

我最终使用了vue-analytics。作者提供了易于理解的文档。

更新：作者已停止维护该包，并推荐使用他建立的另一个新包vue-gtag。如果您正在使用Vue2，请改用this branch分支。

- June

Answer 2

我建议您尝试使用Segment将分析功能添加到Vue应用程序中！您只需添加一行跟踪代码，并通过在我们的仪表板上启用目标，即可看到数据被发送到GA。以下是使用事件处理程序使用我们的track调用的示例：

<template>
  <button v-on:click="trackEvent">
    {{ title }}
  </button>
</template>

<script>
export default {
  name: 'SignupButton',
  data() {
    return {
      title: 'Signup with Segment today!'
    }
  },
  methods: {
    trackEvent () {
      window.analytics.track('User Signup')
    }
  }
}
</script>

我是https://github.com/segmentio/analytics-vue的维护者。使用Segment，如果您有兴趣尝试多个分析工具（我们支持250多个目标），只需轻松切换开关即可，无需编写任何其他代码。

- William