vue-heatmapjsを使用してVueでヒートマップを作成する

ヒートマップ。 文字通りすべての動きを追跡し、マウスがWebページ上でクリックすることによって機能する優れたマーケティングツールは、それらを正規化し、分析するために反対側にいる可能性のある人のためにサーバーに送信します（きれいな色で完了します）。あなたのデータ、そしてまあ、モバイルデータの許容できる使用。 Vueアプリにこれらのいずれかを実装する必要がある場合は、 vue-heatmapjs 助けるためにあります。

インストール

vue-heatmapjsをVue.jsプロジェクトにインストールします。

# Yarn
$ yarn add vue-heatmapjs

# NPM
$ npm install vue-heatmapjs --save

使用法

次に、メインのVueセットアップファイルでプラグインを有効にします。

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)
});

ここで、 v-heatmap 追跡するコンポーネントへのディレクティブ。

<template>
  <div id="app" v-heatmap>
    ...
  </div>
</template>

これにより、上記のように、ページとのすべてのインタラクションの視覚的なヒートマップがレンダリングされます。 ただし、ほとんどの場合、これは必要ありません。 ありがたいことに、あなたはそれを無効にすることができます v-heatmap="false" それでもすべてのイベントを受け取ります。

<template>
  <div id="app" v-heatmap="false">
    ...
  </div>
</template>

マーケティングでヒートマップが必要だと言われたとき、今では良い言い訳はできません。 ごめん。 より良いものを見つけて楽しんでください。