如何在vue-cli中使用百度统计

如何在vue-cli中使用百度统计

在index.html中添加

<script>
var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxx";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);}
)();
</script>

在vue-cli中优雅的使用百度统计中的数据埋点

通过使用指令的方式去为元素添加点击事件

// main.js
Vue.directive('baiduCount', {
    bind(el, binding) {
        if (isRunBuild()) {
            el.addEventListener('click', function () {
                _hmt.push(['_trackEvent', binding.value.event, binding.value.value]);
            })
        }
    }
});

使用方式

为标签添加统计指令并传入相应的参数

<div v-baidu-count="{event:'点击',value:'内容'}">
    我是内容
</div>