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… 在我把程式碼寫完測試後才發現，原來的部落格系統早就把上報百度的邏輯寫全了，並且比自己的優雅