从外部JS文件中使用Google Analytics异步代码

Question

从外部JS文件中使用Google Analytics异步代码

javascriptasynchronousgoogle-analyticsunobtrusive-javascript

32

我正在尝试将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>

然而，很明显有一个问题，因为几天后，我无法获取统计数据！

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

谢谢， Neil

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

- NeilD

这是否解决了你的问题？我遇到了同样的问题，尽管我在.js文件中全局定义了我的var _gaq。谢谢。 - Alec Sanger

据我所记，是的。老实说，对于大多数应用程序，我建议只需按照以下建议并直接将代码放入文档中即可... 对于这个特定项目，它需要在一个单独的文件中，这可能也是你的情况。 - NeilD

我一直在阅读SO上的许多类似帖子，有人说除了可能稍微延迟加载脚本之外没有任何问题，而其他人则说它会毁掉我的生活并将我定位于地狱。我需要它基于正在查看的页面传递不同的值，并希望将代码更改保留在单个文件中，而不是在每个网站页面上进行更改。它似乎运行良好，但如果您记得遇到任何问题，请告诉我。感激不尽。 - Alec Sanger

3个回答

14

你完全没有理解异步跟踪代码的要点。不要把它放在外部文件中，因为这就像包含旧的同步GA一样。

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

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

在页面底部的 <head> 部分之后插入异步片段，以便在页面或模板中使用任何其他脚本之后。

- gblazex

我理解你对AddLoadEvent()代码的意见，并且已经删除了所有的window.onload部分... :) 你介意深入讲解一下外部文件如何使它“完全像包含旧同步GA”吗？为什么将其拆分成单独的文件会导致执行方式不同？我已经阅读了建议，但在这个项目中，我需要将GA代码与主页面分开。 - NeilD

3

使用异步跟踪的主要好处是在代码加载之前就可以开始将事件推送到GA。只要页面能够开始将元素推送到_gaq数组中，就可以开始存储事件。相反地，如果强制在主脚本之外定义变量，就会迫使跟踪等待外部脚本下载完成后才能开始。这就与旧脚本完全一样。 - Chase Wilson

同样地，强制你的事件等待直到通过window.onload触发onload函数 <--- 这将迫使你等待更长时间...... 直到每个图像都下载完成；如果一些愚蠢的文件被卡住怎么办？ - Chase Wilson

好的，谢谢Chase...我已经删除了Window.Onload部分，现在我将尝试像Brian在另一个答案中建议的那样重新定义_gaq变量的作用域。 - NeilD

2

老实说，我没有阅读所有这些帖子，因为它们相当古老。然而，最近我有需要在一个包含1000个静态HTML文件的旧网站中添加Gtag（用于分析跟踪的Google标签管理器）。幸运的是，这些HTML文件中有一个单独的包含JS文件用于Spry菜单栏，就像我所说的那样，非常古老的网站！对于我的目的，我不担心性能，但要测量流量，以便我们可以迁移它。您的情况可能不同，但以下代码将适用于外部JS引入Gtag。

我使用此文件加载下面的代码，因为上面的代码是针对遗留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

- Joshua Berkowitz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian · Accepted Answer

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