javascript - 如何动态加载 Google Analytics JavaScript？

Question

在不使用任何其他 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

score 7 · Accepted Answer

您可以使用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>

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

函数加载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 上测试

抱歉，如果我参加这个聚会有点晚了。

score -2 · Accepted Answer

我实际上只是把一些东西放在一起......使用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);

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

javascript - 如何动态加载 Google Analytics JavaScript？

5 回答 5

Related

Reference