如何动态加载 Google Analytics JavaScript?

Posted

技术标签:

【中文标题】如何动态加载 Google Analytics JavaScript?【英文标题】:How do I dynamically load Google Analytics JavaScript? 【发布时间】:2010-10-19 16:55:29 【问题描述】:

使用任何其他 JS 框架(dojo、jquery 等),如何动态加载 Google Analytic 的 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

【问题讨论】:

@Danny - 你也建议改一下标题吗? 【参考方案1】:

你可以使用来自HTML5 Boilerplate的这个sn-p。

<!-- 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>

【讨论】:

你可以把它放在一个函数中,但是记住 _gaq 必须是一个全局的(在窗口对象上)【参考方案2】:

尝试使用 Google 提供的确切 JavaScript 代码,然后根据您的 UI 框架中的构造有条件地显示该部分代码。您没有说明它在哪个平台上运行,如果它是 ASP.NET,您可以将代码放在 PlaceHolder 或 UserControl 中,然后根据配置文件设置将 Visible 设置为 true 或 false(如果应该包含脚本)。我已在多个站点上使用此方法来防止 Analytics 脚本被包含在预生产环境中。

【讨论】:

【参考方案3】:

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

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

【讨论】:

@voyager - 第一个链接显示如何使用我在帖子中显示的方法进行操作,但该方法不起作用。第二个链接描述了将 JS 添加到 html HEAD 属性,这是不可取的,因为这将 block html 呈现。【参考方案4】: 函数加载GA() if(typeof _gat == 'function') //已经加载 //初始化GA(); // 你可能希望上面的行取消注释.. // 我假设如果 _gat 对象存在 // 你不会想要的。 返回; var 主机名 = 'google-analytics.com'; var 协议 = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', 协议+主机名+'/ga.js'); document.body.appendChild(js); //2种方法检测ga.js的负载 //然而,一些浏览器同时使用两者 加载=假; // 所以使用布尔值 js.onreadystatechange = 函数 () 如果(js.readyState == '已加载') 如果(!加载) 初始GA(); 加载=真; ; js.onload = 函数() 如果(!加载) 初始GA(); 加载=真; ; 函数 innitGA() //var pageTracker = _gat._getTracker('GA_ACCOUNT/PROFILE_ID'); //pageTracker._initData(); //pageTracker._trackPageview(); alert('哦,我可以看 plz 吗?');

只需调用 loadGA()... 在 IE6/7/8、FF3、Chrome 和 Opera 上测试

对不起,如果我参加这个聚会有点晚了。

【讨论】:

【参考方案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);

我正在努力解决的问题是......这是谷歌允许的吗?

【讨论】:

问题说没有 jquery

以上是关于如何动态加载 Google Analytics JavaScript?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 Python 触发 Google Analytics 事件?

javascript Google Analytics(分析) - 动态表单字段跟踪数据层实施

javascript 使用Google Analytics跟踪JavaScript文件加载时间

Google Universal Analytics 再营销和动态再营销

谷歌分析 - 无法加载资源:http://www.google-analytics.com/ga.js

使用Nginx将请求转发至Google Analytics实现后端数据统计