Vuejs 使用 Google 分析進行事件跟蹤

Question

我希望在按鈕和鏈接上跟蹤谷歌分析事件。 通常在 jquery 中，我會在數據屬性中傳遞值並獲取它們並調用所需的函數。 我知道我不應該使用數據屬性，所以我正在尋找這樣做的最佳方式，可以有多個按鈕使用不同的數據用途（屬性）執行不同的跟蹤，所以我需要傳遞數據用途和數據用戶到 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'
});

Answer 1

我最終使用了vue-analytics 。 有很容易遵循作者的文檔

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個目的地），您將能夠通過翻轉開關來切換不同的目的地 - 無需編寫任何其他代碼。 🙂

Answer 3

我寫了一個相同的教程： https : //medium.com/@surbhitrao/how-to-add-google-analytics-to-your-vue-js-web-app-709c6e7c5872