问题描述
如何在 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。