npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-hotjar

v1.4.0

Published

Vue Hotjar plugin

Downloads

36,389

Readme

Vue Hotjar

This is a VueJs plugin that will allow you to easily add Hotjar to any Vue project. Some key benefits allow you to activate or deactivate tracking based on the environment and in some more advanced use cases you have access to $hj. This is a global property that gives you access to the identify API and other functions to pass data to Hotjar.

Install

npm install vue-hotjar

Start using it in your Vue application.

import Vue from 'vue'
import Hotjar from 'vue-hotjar'

Vue.use (Hotjar, {
  id: 'XXXXXXX' // Hotjar Site ID
})

Parameters

Id:

Your Hotjar Site ID is a required parameter. You can find this ID at insights.hotjar.com under tracking.

id: 'XXXXXXX' 

isProduction:

If you would like to disable or enable tracking, pass in either true or false. It is advised to bind your Node ENV variable. This is an optional parameter and will default to true if not specified.

isProduction: true 

snippetVersion:

This optional parameter does not need to be specified as it will default to the latest Hotjar Snippet version. Currently, it will default to version 6.

snippetVersion: 6 

Full Example

import Vue from 'vue'
import Hotjar from 'vue-hotjar'

Vue.use (Hotjar, {
  id: 'XXXXXXX',
  isProduction: true,
  snippetVersion: 6
})

Verify Installation

In order to verify your installation in a production environment or whenever the isProduction parameter is set to true, you can simply navigate to the below URL. If the installation is successful you should see a notification appear on your website indicating that Hotjar is receiving data and your implementation is successful.

https://<YOUR-BASE-URL>/?hjVerifyInstall=<YOUR-SITE-ID>

Additionally you can verify the install by logging in to insights.hotjar.com and view the tracking status.

HotJar API

instead of accessing HotJar through window.hj you can simply interact with the API via the a Vue global property $hj.

Important To Note:

  • The global property $hj will return false if isProduction is set to false. Thus it is required to wrap your method in a simple if statement as per the examples below.

  • This functionality is only available if your Vue version is 2.x.x. For Vue Next users this is disabled for compatibility.

Track Changes Manually

if (this.$hj) {
  this.$hj('stateChange', '/your/url/here')
}

Virtual Page View

if (this.$hj) {
  this.$hj('vpv', 'funnel-step-one')
}

Identify API (Business Plan)

if (this.$hj) {
  this.$hj('identify', userId, {
    email: '[email protected]',
    purchase_amount: 500,
    ab_test: 'variant-A',
  })
}

Supported Vue Versions

  • Vue ^2.0.0 is fully supported.

  • Vue ^3.0.0 is partially supported. TypeScript users will experience issues with typings due to the interface updates in Vue Next.