https://github.com/BrockReece/vue-heatmapjs
Heatmap directive for tracking user activity
https://github.com/BrockReece/vue-heatmapjs
Last synced: 7 months ago
JSON representation
Heatmap directive for tracking user activity
- Host: GitHub
- URL: https://github.com/BrockReece/vue-heatmapjs
- Owner: BrockReece
- License: mit
- Created: 2017-10-17T09:07:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-02-01T19:23:32.000Z (10 months ago)
- Last Synced: 2025-04-12T21:34:02.582Z (8 months ago)
- Language: JavaScript
- Size: 1.77 MB
- Stars: 208
- Watchers: 9
- Forks: 16
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - vue-heatmapjs - 用于跟踪和可视化鼠标活动的Vue指令 (UI组件 / 杂)
- awesome-vue - vue-heatmapjs - Heatmap directive for tracking user activity ` 📝 22 days ago` (UI Components [🔝](#readme))
- awesome-vue - vue-heatmapjs ★105 - A Vue directive for tracking and visualising mouse activity (UI Components / Miscellaneous)
- awesome-vue - vue-heatmapjs - A Vue directive for tracking and visualising mouse activity (UI Components / Miscellaneous)
- awesome-vue - vue-heatmapjs - A Vue directive for tracking and visualising mouse activity (Components & Libraries / UI Components)
README
# vue-heatmapjs
[](https://badge.fury.io/js/vue-heatmapjs)
> A vue directive for collecting and displaying user activity on a component
## [Demo](https://vue-heatmapjs.netlify.com)
## Install
You can use NPM or Yarn to add this plugin to your project
```bash
npm install vue-heatmapjs
# or
yarn add vue-heatmapjs
```
## Usage
You need to install this plugin in you main.js
```js
// main.js
import Vue from 'vue'
import heatmap from 'vue-heatmapjs'
Vue.use(heatmap)
```
### v-heatmap
And then you can add the `v-heatmap` directive to the dom elements you want to track.
```html
...
```
### v-scrollmap
You can use the `v-scrollmap` directive to collect scroll position data from your application
```html
...
```
### Toggle heatmap
You can toggle the heatmaps on and off by passing an expression into the directive, the example below will produce something similar to the image at the top of these docs
```html
...
Toggle Heatmap
...
...
data() {
return {
show: false,
}
},
...
```
### Listen for events
**Streams**
You can pass in an Observable into the plugin options and subscribe to events captured for the heatmaps.
```js
// main.js
import { Subject } from 'rxjs';
const stream = new Subject();
Vue.use(Vueheatmap, {
stream,
});
stream.subscribe(console.log);
```
**Callback**
You can pass an afterAdd method through with the plugin options, this will allow you to access and process the events captured for the heatmap
```js
// main.js
Vue.use(heatmap, {
afterAdd(data) {
console.log(data)
// you can fire this back to your analytics server
},
})
```
### Pause collection
You can pass an RXJS Subject through with the plugin options that will allow you to toggle whether your directives collect data or not
```js
//main.js
export const pauser = new Subject();
Vue.config.productionTip = false;
Vue.use(Vueheatmap, {
pauser,
});
```
```js
// Pause data collection
pauser.next(true);
// Resume data collection
pauser.next(false);
```
### Preload heatmap
Once you have captured heatmap data and persisted the data somewhere you will probably need a way of loading this data back in to your heatmap.
You can pass in an array of heatmap events using the heatmap preload plugin option
```js
//main.js
Vue.use(Vueheatmap, {
heatmapPreload: [{ x: 10, y: 10, value: 100 }],
});
```
The plugin can also handle a Promise
```js
//main.js
Vue.use(Vueheatmap, {
heatmapPreload: fetch('http://api.example.com').then(response => response.json()),
});