单页SPA应用安装GA统计

单页应用 (SPA) 指的是在首次加载网页时加载浏览整个网站所需所有资源的网络应用或网站。当用户点击链接并与网页互动时,系统将以动态方式加载后续内容。应用会经常更新地址栏中的网址来模仿传统的网页导航,但始终不会再发出整个网页加载请求。

在传统网站上运行默认的 JavaScript 跟踪代码段没有任何问题,因为该代码段在用户每次加载新页面时都会运行。但是,对于单页应用,网站以动态方式加载新的网页内容,而不采用整个网页加载方式,因此 analytics.js 代码段仅运行一次。也就是说,当有新内容加载时,必须通过人工方式跟踪后续的(虚拟)网页浏览。

基于两篇文章《安装GA代码》《基于VUE安装GA统计》,如果是单页面应用,想手动的插入谷歌代码,只需要在官方代码后面添加一小段代码即可,例如:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
//添加的代码
window.addEventListener('hashchange', function () {
  ga('set', 'page', window.location.href);
  ga('send', 'pageview');
});
</script>
<!-- End Google Analytics -->

其中,代码里面的GA_TRACKING_ID换成自己的ID就可以了,然后配合实时就可以看到是不是生效了。

补充,貌似现在谷歌统计代码全部换成gtag了,所以如果要使用gtag的话,最好看下这篇文字做一下对比,《Migrate from analytics.js to gtag.js》

添加新评论