Giter VIP home page Giter VIP logo

vue-hotjar's Introduction

Hotjar logo

@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

vue-hotjar's People

Contributors

ngocquy020196 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.