VUE增加百度统计以及失效问题解决

VUE增加百度统计以及失效问题解决

添加百度统计代码

在main.js中添加下面代码即可。

/*
*	百度统计代码
*
*
*/
var _hmt = _hmt || [];
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?XXXXXXXXXXX";	
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

百度统计代码失效

解决方案

<!-- index.html文件  -->
<!-- 修改referrer属性为origin-when-cross-origin  -->   
<meta name="referrer" content="origin-when-cross-origin">

原因分析

Referrer-Policy默认属性为no-referrer,可能会导致一些第三方的统计代码失效，比如cnzz，百度统计，解决方法

1.更改该属性为origin-when-cross-origin。

2.使用iframe包裹一层，用一个独立的html页面加载统计代码。

Referrer-Policy常见使用方法

你也可以在 HTML 内设置 referrer 策略。例如，你可以用一个 name 为 referrer 的 <meta> 元素为整个文档设置 referrer 策略。

<meta name="referrer" content="origin">

或者用 <a>、<area>、<img>、<iframe>、<script>或者 <link>元素上的 referrerpolicy 属性为其设置独立的请求策略。

<a href="http://example.com" referrerpolicy="origin">

另外也可以在 <a>、<area> 或者 <link>元素上将 rel 属性设置为 noreferrer。

<a href="http://example.com" rel="noreferrer">

详细MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy