使用来自外部 JS 文件的 Google Analytics 异步代码答案

【问题标题】：Using Google Analytics asynchronous code from external JS file使用来自外部 JS 文件的 Google Analytics 异步代码
【发布时间】：2011-03-16 21:11:20
【问题描述】：

我正在尝试将异步版本的 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>

但是，显然有一个问题，几天后，我无法获得统计信息！

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

谢谢，尼尔

编辑：好的...在下面的一些反馈之后，我将添加 new 我的 .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();

【问题讨论】：

这是否解决了您的问题？我遇到了同样的问题，尽管我在 .js 文件中全局定义了我的 var _gaq。谢谢。
据我记忆，是的。老实说，对于大多数应用程序，我建议您只遵循以下建议并将代码直接放在文档中......这个特定项目的要求是它位于一个单独的文件中，这可能是也可能不是你的情况。
我已经阅读了很多关于 SO 的类似主题，并且看到人们说除了加载脚本可能会出现轻微延迟之外没有任何问题，而其他人则说它会毁了我的生命，并谴责我下地狱。我需要它根据正在查看的页面传递差异值，并且希望将代码更改保留在单个文件中而不是网站的每个页面上。它似乎工作正常，但如果你能记住你遇到的任何问题，请告诉我。欣赏它。

标签： javascript asynchronous google-analytics unobtrusive-javascript

【解决方案1】：

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

【讨论】：

谢谢我将 var _gaq 移到我的函数之外，它立即生效！
谢谢！这也解决了我们的问题:)

【解决方案2】：

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

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

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

在 <head> 部分的底部 页面，在您的任何其他脚本之后页面或模板可能会使用。

【讨论】：

我同意你对 AddLoadEvent() 代码的看法，并且我已经删除了所有 window.onload 部分...... :) 你介意我要求你更深入地了解吗外部文件如何使其“完全像包含旧的同步 GA”。为什么将其拆分为单独的文件会导致其执行方式不同？我已阅读建议，但我需要在此项目中将 GA 代码与母版页分开。
拥有异步跟踪的最大好处是您可以在代码加载之前开始将事件推送到 GA。一旦您的页面可以开始将元素推送到 _gaq 数组中，您就可以开始存储事件。相反，当您在主脚本之外强制执行变量时，您会强制跟踪等到外部脚本下载后。这就是它与旧脚本完全相同的方式。
同样，强制你的事件等待直到通过 window.onload 触发 onload 函数
好的，谢谢 Chase...我已经删除了 Window.Onload 位，现在我将尝试重新调整 _gaq 变量的范围，就像 Brian 在另一个答案中建议的那样。

【解决方案3】：

老实说，我还没有通读所有这些帖子，因为它们已经相当老了。但是，我最近需要将 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

【讨论】：