使用 vue-heatmapjs 在 Vue 中创建热图

热图. 一个伟大的营销工具,通过跟踪字面上每一个动作和鼠标点击在网页上,将其正常化,并将其发送到服务器上,以便任何人可能在另一端进行分析(用漂亮的颜色完成) 完全好的和可接受的使用您的数据和,好,移动数据。

安装

在 Vue.js 项目中安装 vue-heatmapjs。

1# Yarn
2$ yarn add vue-heatmapjs
3
4# NPM
5$ npm install vue-heatmapjs --save

使用

现在在主Vue设置文件中启用插件。

 1[label main.js]
 2import Vue from 'vue';
 3import App from './App.vue';
 4import heatmap from 'vue-heatmapjs';
 5
 6Vue.use(heatmap, {
 7  // Fired on every click and mousemove.
 8  // data is an object with xy positions and heat value.
 9  // It would be a good idea to combine and throttle these before sending.
10  afterAdd(data) {
11    // Send the data here.
12    logUserInteractions(data);
13  }
14});
15
16new Vue({
17  el: '#app',
18  render: h => h(App)
19});

现在,将v-heatmap指令添加到您想要跟踪的组件中。

1[label App.vue]
2<template>
3  <div id="app" v-heatmap>
4    ...
5  </div>
6</template>

An example of an app with heatmaps. Oooh. Color blobs!

这将为您与页面的所有互动提供视觉热图,如上所示。在大多数情况下,您不会想要这样做. 幸运的是,您可以用`v-heatmap="false``禁用它,并且仍然收到所有事件。

1[label App.vue]
2<template>
3  <div id="app" v-heatmap="false">
4    ...
5  </div>
6</template>

现在,当营销告诉你他们想要热地图时,你不再有好借口了。