如何在 Nuxt.js 中使用 Mixpanel

Question

老实说，我是 Nuxt.js 和 Vue 以及 Mixpanel 的新手，但我继承的网站已经过时，所以我宁愿学习也不愿改变。添加 Google 分析非常简单，因为有一个很棒的包 nuxtjs google-analytics；它只需要将 googleAnalytics 添加到 Nuxt 配置中，一切都神奇地完成了。

对于 Mixpanel，我找到了两个 vue-mixpanel and mixpanel-browser，但我不太确定如何使用它们。第一个似乎很合适，但是一旦我启动插件，我就不知道在哪里使用 this.$mixpanel 引用。是否有一些“页面加载”事件？不知道如何向页眉添加内容。

Answer 1

有了 Nuxt，您就有了布局。每个页面都将使用一个布局。您可以将 watcher 添加到 $route 对象，并确定它何时更改并以这种方式相当容易地跟踪页面浏览量。

// layouts/default.vue (or whatever layout is being used)

watch: {
  $route: {
    handler: function () {
      // from the vue-mixpanel documentation
      this.$mixpanel.track('event name', {
        distinct_id: 'unique client id',
      })
    },
    immediate: true // fires this function immediately when the object has bound to the watcher

  }
}

请注意，如果不同的页面使用不同的布局，它们都需要实现相同的逻辑，您可以将其抽象为 mixin。

如何在 Nuxt.js 中使用 Mixpanel

How to use Mixpanel in Nuxt.js

vue.js

nuxt.js

mixpanel