@rovahub/vue-hotjar

This Vue2 plugin injects a Hotjar into all of your vue instances

Install

# Npm
npm install @rovahub/vue-hotjar --save

# Yarn
yarn add @rovahub/vue-hotjar

Quickstart

Vue 2

Import the @rovahub/vue-hotjar in your main JavaScript file in src/ folder.

# src/main.js

import Vue from "vue";
import App from "./App.vue";
import HotjarPlugin from "@rovahub/vue-hotjar";

Vue.config.productionTip = false;

Vue.use(HotjarPlugin, {
  siteId: 111
});

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

Nuxt JS

Create JS file in /plugins/ folder and add content to the plugin file.

# plugins/vue-hotjar.js

import Vue from 'vue';
import HotjarPlugin from "@rovahub/vue-hotjar";

Vue.use(HotjarPlugin, {
  siteId: 111
});

In your nuxt.config.js file, add the plugin to the plugins array:

# nuxt.config.js

module.exports = {
  // ...
  plugins: [
    { src: "~/plugins/vue-hotjar.js", mode: "client" }
  ],
  // ...
}

Use

methods: {
  handleClickButton(){
    this.$hotjar.event('click-button');
  }
}

Options

You can provide additional options to customize the Hotjar:

Vue.use(HotjarPlugin, {
    siteId: 111,
    debug: true;
    version: 6;
    nonce: 'rAnDoM';
});

Methods

Method | Feature
-----------------------------------------|-------------------- this.$hotjar.identify(userId, userInfo) | Identify API
this.$hotjar.event(actionName) | Events API
this.$hotjar.stateChange(newPage) | Manual URL changes this.$hotjar.isReady() | Hotjar isReady