vue中引入百度统计

vue作为单页面的，引入百度统计，需要注意不少。

一、基本的流量统计

在index.html 入口文件中引入百度统计生成的一连串代码：

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

这个会统计页面总的流量。

二、页面中监听事件

需要在相应的vue  文件中加入相应的代码

    methods: {
      getDownIosUrl() {
        window._hmt.push(['_trackEvent', 'IosDoctor', 'click', '来康医生IOS版', 'opt_value']);
        window.location.href = 'itms-apps://itunes.apple.com/cn/app/id1233649213?mt=8';
      },
}

PS：必须要写window._hmt.push  否则会监听不到

三、单个页面流量的检测

在路由的配置文件中，加入这行代码。

// 测试百度统计
routeInstance.beforeEach((to, from, next) => {
  if (to.path) {
    window._hmt.push(['_trackPageview', '/pro/#' + to.fullPath]);
  }
  next();
})

'/pro/#'  写相对路径，解决vue 路由 hash 模式下，百度统计无法统计单页面的问题。

四、广告途径的追踪

  可以根据转化率来确定下载次数。在转化设置中，设置事件转化中的trackevent。

  然后通过“报告中的入口页面中的转化分析”查看数据。