Vue-heatmapjsを使用してVueでヒートマップを作成する
提供:Dev Guides
ヒートマップ。 文字通りすべての動きを追跡し、マウスが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>
これにより、上記のように、ページとのすべてのインタラクションの視覚的なヒートマップがレンダリングされます。 ただし、ほとんどの場合、これは必要ありません。 ありがたいことに、v-heatmap="false"
で無効にしても、すべてのイベントを受信できます。
App.vue
<template> <div id="app" v-heatmap="false"> ... </div> </template>
マーケティングでヒートマップが必要だと言われたとき、今では良い言い訳はできません。 ごめん。 より良いものを見つけて楽しんでください。