vue单页面应用使用百度统计

  • 2019 年 11 月 21 日
  • 筆記

方案对比

有两种方案，一种是在vue中实现，另一种是放到index.html中，与webpack相结合。

vue中实现

可以选择放到view中的脚本中，也可以放到router的before router中。

与webpack结合

与webpack结合，实现开发时不统计。

在vue的script中

methods: {      showArticle () {          _hmt.push(['_trackPageview', '/article?id=' + this.article.id])          this.$router.push({          name: 'article',          query: {            id: this.article.id          }        })      }, ...

与webpack结合

<% if (htmlWebpackPlugin.options.prod) { %>          <script>          // 百度统计          // TODO：上传到github时注释掉，避免别人用这个博客时，也统计到这里来          // 自行更改src链接            var _hmt = _hmt || [];          (function() {            var hm = document.createElement("script");            hm.src = "https://hm.baidu.com/hm.js?your_code";            var s = document.getElementsByTagName("script")[0];            s.parentNode.insertBefore(hm, s);            // 百度统计            window.baidu = ({from = (window.urlParams.ADTAG || '-'), type = 'page', event = '-'}) => {              _hmt.push(['_trackEvent', from, type, event])            }          })();        </script>        <% } else { %>        <script>          var _hmt = {'push':function(event, url){            console.log('No push to baidu', event, url)          }}          // 百度统计          window.baidu = ({from = (window.urlParams.ADTAG || '-'), type = 'page', event = '-'}) => {            console.log('dev模式不上报百度统计：', from, type, event)          }        </script>         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>      <% } %>

emmm… 在我把代码写完测试后才发现，原来的博客系统早就把上报百度的逻辑写全了，并且比自己的优雅

VirMach 便宜 VPS

QNews

QNews