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

インストール

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

# Yarn
$ yarn add vue-heatmapjs

# NPM
$ npm install vue-heatmapjs --save

使用法

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

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

次に、追跡するコンポーネントにv-heatmapディレクティブを追加します。

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

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

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

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

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