If you like this plugin do not hesitate to star it or follow me on Github. I've noticed hundreds of people use this one weekly in particular without problem, it'll motivate me to develop more open source stuff, thanks 🙂
A simple Vue.js plugin for Mixpanel
If the browser where events are dispatched has Do Not Track enabled, it won't work. This is due to Mixpanel limitations and is out of control of this plugin.
For testing purpose, don't forget to turn it off yourself.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
npm install vue-mixpanel --save
yarn add vue-mixpanel --save
- Initialize it by using the token given by your Mixpanel account in the
app.use()inside youmain.js - Start using their public API with
injectthroughthis.mixpanelin your components.
If you're using Vue 2 or below, please check the version 1.1.0
import App from './App.vue'
import VueMixpanel from 'vue-mixpanel'
const app = createApp(App)
app.use(VueMixpanel, {
token: YOUR_TOKEN,
config: {
debug: true
}
})
app.mount('#app')
Then, you can use it in your components like so
<script>
export default {
inject: ['mixpanel'],
name: 'App',
created () {
this.mixpanel.track('test')
}
}
</script>
this.mixpanel.track('event name', {
distinct_id: 'unique client id',
property_1: 'value 1',
property_2: 'value 2',
property_3: 'value 3'
});
this.mixpanel.alias('distinct_id', 'your_alias');
this.mixpanel.people.increment('13793', 'games_played');
MIT Copyright (c) 2019-present, cmp-cc