如何动态加载Google Analytics JavaScript？

Question

不使用任何其他JS框架（dojo, jquery等），我该如何动态加载谷歌分析的javascript代码以用于网页追踪？

动态加载JS的典型方法如下：

var gaJs = document.createElement("script");
gaJs.type = "text/javascript";
gaJs.src = "http://www.google-analytics.com/ga.js";
document.body.appendChild(gaJs);
var pageTracker = _gat._getTracker("UA-XXXXXXXXX");
pageTracker._initData();
pageTracker._trackPageview();

但是这样不起作用。

ga.js文件没有在_gat._getTracker和_initData/TrackPageview函数使用之前加载完毕。

有什么好的方法可以正确地动态加载ga.js吗？

更新：似乎有人尝试在下面的链接中解决这个问题。然而，这只适用于旧的Urchin代码而不是Google Analytics。

有没有办法让它与ga.js一起工作，而不是urchin.js？

http://20y.hu/20070805/loading-google-analytics-dynamically-on-document-load.html

- Hank810

---

@Danny - 你会建议将标题改成什么？ - Hank810

Answer 1

你可以使用来自HTML5 Boilerplate的这个片段。

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

- bmavity

---

你可以将这个放在一个函数中，但请记住 _gaq 必须是全局的（在 window 对象上）。 - reconbot

Answer 2

我猜服务器端编程会更容易，但我在一段时间前发现了this some。请注意，它特别将其设置为html head。

还要检查“通过Ajax添加Javascript”下的第一个链接。

- Esteban Küber

---

@voyager - 第一个链接展示了如何使用我在帖子中展示的方法，但该方法并不起作用。第二个链接描述了将JS添加到HTML HEAD属性中，这是不可取的，因为它会阻止HTML渲染。 - Hank810

Answer 3

尝试使用 Google 提供的精确 JavaScript 代码，然后根据 UI 框架中的结构有条件地显示该代码部分。您没有说明此平台正在运行的内容，如果是 ASP.NET，则可以将代码放在 PlaceHolder 或 UserControl 中，然后根据配置文件设置将 Visible 设置为 true 或 false，以确定是否应包含脚本。我已在多个网站上使用此方法来防止在预生产环境中包含分析脚本。

- Mike

Answer 4

函数loadGA() { if(typeof _gat == 'function') //已加载 { //innitGA(); //您可能希望取消上面的行.. //我假设如果_gat对象存在，您就不想要。 返回; } var hostname = 'google-analytics.com'; var protocol = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', protocol+hostname+'/ga.js'); document.body.appendChild(js); //2种检测ga.js加载的方法 //一些浏览器同时使用两种方法 loaded = false; //所以使用布尔值 js.onreadystatechange = function () { if (js.readyState == 'loaded') { if(!loaded) { innitGA(); } loaded = true; } }; js.onload = function () { if(!loaded) { innitGA(); } loaded = true; }; }

函数innitGA() { //var pageTracker = _gat._getTracker('GA_ACCOUNT/PROFILE_ID'); //pageTracker._initData(); //pageTracker._trackPageview(); alert('oh hai I can watch plz?'); }

只需调用loadGA()函数... 在IE6/7/8、FF3、Chrome和Opera上进行了测试。

如果我来晚了，很抱歉。

- user203470

Answer 5

我刚刚用 jQuery 编写了一个可以实现这个功能的代码...关键是要向带有跟踪代码的脚本标签添加加载事件。

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var gaScript = document.createElement('script');
var loaded = false;
gaScript.src = gaJsHost + "google-analytics.com/ga.js";

$(gaScript).load(function(){
  loaded = true;
  var pageTracker = _gat._getTracker(Consts.google_analytics_uacct);
  pageTracker._initData();
  pageTracker._trackPageview();
});

document.body.appendChild(gaScript);

// And to make it work in ie7 & 8
gaInterval = setInterval(function() {
  if (!loaded && typeof _gat != 'undefined') {
    $(gaScript).load();
    clearInterval(gaInterval);
  }
},50);

我正在尝试解决的问题是...这是否被谷歌允许。

- baseonmars

---

问题说不要用 jQuery。 - GarethD