Loschcode / vue-mixpanel

A simple Vue.js plugin for Mixpanel
https://laurent.tech
MIT License
38 stars 4 forks source link

Events aren't sent to MixPanel #1

Closed kevingobert closed 3 years ago

kevingobert commented 4 years ago

Hi,

Thank you for your work. But I have an issue with your plugin. The events and data aren't sent to MixPanel and I don't have any error.

Here my config

main.js

import VueMixpanel from 'vue-mixpanel'
Vue.use(VueMixpanel, { token: process.env.VUE_APP_MIXPANEL_TOKEN, config: { debug: false } })

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app');

ViewNewCampaign.vue

mounted () {
    this.$mixpanel.track('New campaign', {
      'distinct_id': this.user.id
    })
  },

I tested this code and it works. So, the configuration is good

mounted () {
    window.mixpanel.track('New campaign', {
      'distinct_id': this.user.id
    })
  },

Vue.js version ^2.6.11 Env: Local

Thanks

NirAviel commented 4 years ago

same here this.$mixpanel.track returns - ƒ () { b.push([i].concat(Array.prototype.slice.call(arguments, 0))) }

mixpanel.track returns - ƒ (){var c=F;try{var d=b.call(this,"token"),h=b.call(this,"ignore_dnt"),k=b.call(this,"opt_out_tracking_persistence_type"),n=b.call(this,"opt_out_tracking_cookie_prefix"),i=b.call(this,"window");d&&(c=…

seams that this.$mixpanel.track just collecting the events into an Array (this.$mixpanel returns Array of events)

NirAviel commented 4 years ago

snippet is the Array that collects the methods until mixpanel loaded and Vue.prototype.$mixpanel point to that Array and doesn't update when mixpanel script finish loading.

I didn't tested it but this is the basic idea -

VueMixpanel.install = function (Vue, { config, token }) {
  const endConfig = config || {}

  Vue.prototype.$mixpanel = snippet // for collecting events before mixpanel loaded

  snippet.init(token, {
    loaded (mp) {
      Vue.prototype.$mixpanel = mp // point Vue.prototype.$mixpanel to the actual mixpanel Object

      if (Object.keys(endConfig).length > 0) Vue.prototype.$mixpanel.dfset_config(endConfig)
    }
  })
}
Loschcode commented 3 years ago

Well thanks for your input @NirAviel

I'm late for to the game but basically the Do Not Track option in your browser prevents Mixpanel tracking to work. You must deactivate it to test this out. I've taken advantage of this problem to update this plugin to the NPM version of mixpanel and after deactivating this protection on Chrome it worked like a charm.

I've also double checked your assumption, and actually you don't need to wait for the loaded to fire up events, it's taken care of.

I'll add an important note on the readme so that people understand this problem with some browsers.

RyanHirsch commented 3 years ago

I know this is a closed issue, but while mixpanel supports and adheres to DNT by default, you can choose to ignore_dnt as documented here - https://developer.mixpanel.com/docs/javascript-full-api-reference#mixpanelset_config