Table of Contents
URL: https://www.progressiverobot.com/vuejs-vue-heatmapjs/
Heatmaps. A great marketing tool that works by tracking literally every move and click the mouse makes on a webpage, normalizes them, and sends them to a server for whomever might be on the other end to analyze (complete with pretty colors.) A perfectly good and acceptable use of your data and, well, mobile data. Well, if you find yourself needing to implement one of these in your Vue app, vue-heatmapjs is there to help.
Installation
Install <^>vue-heatmapjs<^> in your Vue.js project.
# Yarn
$ yarn add vue-heatmapjs
# NPM
$ npm install vue-heatmapjs --save
Usage
Now enable the plugin in the main Vue setup file.
[label main.js]
import Vue from 'vue';
import App from './App.vue';
import heatmap from 'vue-heatmapjs';
Vue.use(heatmap, {
// Fired on every click and mousemove.
// data is an object with xy positions and heat value.
// It would be a good idea to combine and throttle these before sending.
afterAdd(data) {
// Send the data here.
logUserInteractions(data);
}
});
new Vue({
el: '#app',
render: h => h(App)
});
Now, add the v-heatmap directive to the component you want to track.
[label App.vue]
<template>
<div id="app" v-heatmap>
...
</div>
</template>
This will render a visual heatmap for all your interactions with the page as seen above. In most cases you won't want this though. Thankfully you can disable it with v-heatmap="false" and still receive all the events.
[label App.vue]
<template>
<div id="app" v-heatmap="false">
...
</div>
</template>
Now you no longer have a good excuse when marketing tells you they want heatmaps. Sorry. Have fun finding a better one.
