本文介绍 Google Analytics 通过动态创建 script 标签实现异步加载 JavaScript 代码的方法。核心在于利用 _gaq 数组队列命令,并在页面加载时动态插入脚本以解决阻塞问题,从而提升页面加载速度。
Google Analytics 动态加载 JS 代码实现
具体实现代码如下:
<script type="text/javascript">
var _gaq = _gaq || []; // 初始化 _gaq 变量,若已存在则保留原值,否则初始化为空数组
_gaq.push(['_setAccount', 'UA-24479793-2']); // 将设置账户的命令推入数组,_gaq[0] 包含 '_setAccount' 和账户 ID 'UA-24479793-2',用于指定跟踪的 Google 账户 _gaq.push(['_trackPageview']); // 将页面浏览跟踪命令推入数组,_gaq[1] 包含 '_trackPageview',定义按页面进行跟踪 (function () {
var ga = document.createElement('script'); // 动态创建一个 <script> 标签元素
ga.type = 'text/javascript'; // 设置脚本类型为 text/javascript
ga.async = true; // 设置异步加载属性,确保脚本不会阻塞页面渲染
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; // 根据当前页面协议动态设置 src,若为 https 则指向 https://ssl.google-analytics.com/ga.js,否则指向 http://www.google-analytics.com/ga.js var s = document.getElementsByTagName('script')[0]; // 获取当前页面中第一个 <script> 标签元素
s.parentNode.insertBefore(ga, s); // 将动态创建的 <script> 标签插入到页面第一个 <script> 标签之后
})();
/**
通过动态加载 JS 代码,实现异步下载 JavaScript 文件,从而减少因下载 JS 文件造成的页面阻塞。这是 Google 跟踪代码的标准实现方式。