如何在 Nuxt.js 中使用 Mixpanel

Question

如何在Nuxt.js中包含Mixpanel 分析？

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

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

Answer 1

有了Nuxt你就有了布局。每个页面都将使用一个布局。您可以将 a 添加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。