如何在 Nuxt.js 中使用 Mixpanel

Question

如何在Nuxt.js 中包含Mixpanel analytics？

老实说，我是 Nuxt.js 和 Vue 以及 Mixpanel 的新手，但我继承的网站很少，所以我宁愿学习也不愿改变。添加 Google Analytic 非常简单，因为有一个很棒的软件包 nuxtjs google-analytics；它只需要在 Nuxt 配置中添加 googleAnalytics 就可以了。

对于 Mixpanel，我找到了 vue-mixpanel 和 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。