The vue-keen-tracking from maxpaj

vue-keen-tracking's Introduction

Install

npm install vue-keen-tracking --save

import VueKeen from "vue-keen-tracking";

const options = {
  projectId: "<KEEN_PROJECT_ID>",
  writeKey: "<KEEN_WRITE_KEY>"
};

Vue.use(VueKeen, options);

You can then access the KeenTracking object through this.$keen in any of your components/views.

Auto tracking

You can add autoTracking: { ... } to configure Keens auto-tracking.

const options = {
  projectId: "<KEEN_PROJECT_ID>",
  writeKey: "<KEEN_WRITE_KEY>",
  autoTracking: { 
    recordPageViews: true,
    ...
  }
};

Vue-Router and Vuex

To track events from vue-router or vuex, extend your config with this:

import VueRouter from "vue-router";
import Vuex from "vuex";

Vue.use(Vuex);
Vue.use(VueRouter);

const router = require("./router");
const store = require("./store");

const options = {
  projectId: "<KEEN_PROJECT_ID>",
  writeKey: "<KEEN_WRITE_KEY>",
  trackRoutes: {
    router: router
  },
  trackVuex: {
    store: store,
    mutations: true,
    actions: true
  }
};

Extend event properties

API reference

const user = await fetchUser();
this.$keen.extendEvents({ user })

Record an event

API reference

this.$keen.recordEvent("purchases", {
  item: "avocado"
});

vue-keen-tracking's People

Contributors

Stargazers

Watchers

vue-keen-tracking's Issues

Using Keen's AutoCollector

I have a nuxt project and would like to use this library in it.

I want to use it for tracking all page views. Keen provides an autocollector function client.initAutoTracking();

How can I use that in my Nuxt/Vue project using this library.

In my Vuex store, I have a user object. So, I would like to extend keen with the user object and then record all page views. Can you please help?

Using with Middleware in Nuxt

hello, I am using Nuxt and I want to track event in router middleware.

However this.$keen is not available in the middleware. What can I do?

Here is an example of the router middleware:

https://nuxtjs.org/examples/middleware/

I want to use it like this:

const user = store.state.auth.user

    console.log('user', user)
    if (user) {
      console.log('keen tracker')
      this.$keen.extendEvents({
        user
      })
      this.$keen.recordEvent("pageviews", {

      })

But this.$keen is not available.

Recommend Projects