如何在 Nuxt.js 中使用 Mixpanel

问题描述

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

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

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

解决方法

有了 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。