Lyticus Documentation

# Vue integration

# Example projects (Github)

lyticus-examples/vue (opens new window)

# Example configuration

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import Lyticus from "lyticus";

// Create Lyticus instance
const lyticus = new Lyticus("your-website-id", {
  development: process.env.NODE_ENV === "development",
  // Optional: use route name instead of path
  getPath: () => {
    const route = router.currentRoute;
    if (!route || !route.name) {
      return window.location.pathname;
    }
    return route.name;
  },
});

// Track the navigator
lyticus.trackNavigator();

// Start history mode to automatically track page views
lyticus.startHistoryMode();

/*
Add $lyticus to the Vue prototype
This makes its methods easily accessible from within your components
*/
Vue.prototype.$lyticus = lyticus;

Vue.config.productionTip = false;

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

# Tracking page views

# Modes

# History Mode

const lyticus = new Lyticus("you-website-id");
lyticus.startHistoryMode();

# Global router navigation guard

const lyticus = new Lyticus("you-website-id");
router.afterEach(() => {
  lyticus.trackPage();
});

# Using route name instead of path

const lyticus = new Lyticus("your-website-id", {
  getPath: () => {
    const route = router.currentRoute;
    if (route && route.name) {
      return route.name;
    }
    return window.location.pathname;
  },
});

OR

const lyticus = new Lyticus("your-website-id", {
  getPath: () => {
    const path = window.location.pathname;
    const { route } = router.resolve(path);
    if (route && route.name) {
      return route.name;
    }
    return path;
  },
});

# Tracking events inside components

Adding $lyticus to the Vue prototype enables you to call Lyticus methods from within your components.

main.js

const lyticus = new Lyticus("you-website-id");
Vue.prototype.$lyticus = lyticus;

MyComponent.vue

<template>
  <button @click="onRedButtonClick">Hello</button>
</template>

<script>
export default {
  methods: {
    onRedButtonClick() {
      this.$lyticus.trackClick("red-button");
    },
  },
};
</script>

← Nuxt →