使用来自外部 JS 文件的 Google Analytics（分析）异步代码-解网

问：

我正在尝试将 Google Analytics（分析）跟踪代码的异步版本添加到网站。

我想将 JavaScript 保存在一个单独的文件中，然后从那里调用它。

这是我目前在 .js 文件中的内容：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function loadtracking() {
    var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
}

addLoadEvent(loadtracking);

这是我在母版页的标签中得到的内容：<head>

<script type="text/javascript" src="js/google-analytics.js" ></script>

但是，显然存在一个问题，因为几天后，我没有得到统计数据！

有什么想法我需要改变吗？

谢谢尼尔

编辑：好的...在下面的一些反馈之后，我将添加我的 .js 文件的新当前内容。我会保持更新，以便如果/当这个问题得到解决时，它有望帮助其他试图做类似事情的人。

var _gaq = _gaq || [];

function loadtracking() {
        window._gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        window._gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
}

loadtracking();

javascript 异步 google-analytics unobtrusive-javascript

我一直在 SO 上阅读很多类似的帖子，并且看到人们说除了加载脚本可能略有延迟之外，它没有问题，而其他人则说它会毁了我的生活并谴责我下地狱。我需要它根据正在查看的页面传递 dif 值，并希望将代码更改保存在单个文件中，而不是网站的每个页面上。它似乎工作正常，但如果您能记住遇到的任何问题，请告诉我。欣赏它。

答：

14赞 gblazex 7/16/2010 #1

您完全错过了异步跟踪代码的重点。不要将其放在外部文件中，因为这与包含旧的同步 GA 完全一样。

最重要的是，不要将跟踪代码推迟到，因为它可能为时已晚。window.onload

如果使用异步 GA，只需将其放在文档顶部的内联脚本标记中即可。这也是Google Analytics网站上的建议。

将异步代码段插入 <head> 部分的底部 页面，在任何其他脚本之后页面或模板可能会使用。

我接受你对 AddLoadEvent（）代码的看法，并且我已经删除了所有 window.onload 部分...... :)你是否介意我要求你更深入地了解外部文件将如何使其“与包括旧的同步 GA 完全相同”。为什么将其拆分为单独的文件会导致其执行方式不同？我已阅读该建议，但在此项目中，我需要将 GA 代码与母版页分开。

3赞 Chase Wilson 7/17/2010

异步跟踪的最大好处是，您可以在代码加载之前开始将事件推送到 GA 中。一旦页面可以开始将元素推送到 _gaq 数组中，您就可以开始存储事件。相反，当您强制将变量放在主脚本之外时，您将强制跟踪等到外部脚本下载之后。这就是它与旧剧本完全一样的方式。

0赞 Chase Wilson 7/17/2010

同样，强制事件等到通过 window.onload <---触发 onload 函数将迫使您等待更长的时间......直到每个图像都下载完毕;如果一些延迟的文件挂断了怎么办？

0赞 NeilD 7/19/2010

好的，谢谢蔡斯......我已经删除了 Window.Onload 位，现在我将尝试像 Brian 在另一个答案中建议的那样重新处理 _gaq 变量。

26赞 Brian 7/17/2010 #2

变量定义位于函数内部。这意味着它在该函数内部的本地范围，不会全局存在。Google Analytics 依赖于全局变量。如果要将其保留在这样的函数中，请将其引用为。var _gaq_gaqwindow._gaq

老实说，我没有通读所有这些帖子，因为它们很旧。但是，我最近需要将 Gtag（用于分析跟踪的谷歌标签管理器）添加到一个旧网站，该网站是一个 1000 个静态 HTML 文件，并且（幸运的是）html 文件有一个用于 spry 菜单栏的包含 js 文件，就像我说的非常旧的网站！出于我的目的，我不担心性能，而是测量流量，以便我们可以迁移它。您的情况可能有所不同，但以下代码适用于 Gtag 的外部 js 包含。

我使用此文件加载了下面的代码，因为上面的代码适用于旧版 ga.js

//Added Google Anyltics Tag Container Tracking - included here to min rebuilding DOM 

function loadGoogleAnalytics(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true;
    ga.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
}

loadGoogleAnalytics(); //Create the script 

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-XXXXXXXXX-1');
//Confirmed with Google tag Assistant

上一个：如何使用JS / jQuery检查浏览器是否支持touchstart？

下一个：第一个 html 帮助程序生成客户端验证属性，而第二个则不生成

使用来自外部 JS 文件的 Google Analytics（分析）异步代码

Using Google Analytics asynchronous code from external JS file

评论

评论

评论