代码之家 › 专栏 › 技术社区 › BenMorel Manish Pradhan

如何等到跟踪脚本启动后再重定向用户?

html javascript

BenMorel Manish Pradhan · 技术社区 · 9 年前

我运行一个典型的比价网站,用户在那里浏览产品,然后点击链接转到商家的网站。

在被重定向到商家网站之前,用户会看到一个“我们正在重定向您…”页面。

此页面仅允许跟踪代码(Google Analytics、Adwords、Bing Ads.…)跟踪事件。

我在关门前就放了追踪码 </body> 标记,以避免在加载脚本时阻止页面的呈现。

我正在使用元刷新标记重定向用户:

<meta http-equiv="refresh" content="0; url=...">

它似乎工作正常,但我担心,根据浏览器/互联网连接的速度,重定向可能会在跟踪脚本启动之前发生。

为了安全起见,我可以将重定向延迟几秒钟,但我想让用户体验流畅。

我还可以在 <head> ,但:

这将在加载脚本时延迟“重定向…”页面上的显示
这将不确保在重定向用户之前跟踪脚本已经完成了它们的工作:首先加载跟踪脚本,然后异步触发另一个操作来跟踪事件。

我如何保证跟踪脚本已完成任务,同时仍然尽快重定向用户?

对于类似经历的任何反馈都将不胜感激。

6 回复 | 直到 9 年前

Simon H 9 年前

对于谷歌分析 official way 要做到这一点,请将出站链接作为“事件”进行跟踪。你需要设置一个 onclick 功能如下,Google将在收到分析消息后调用回调。

js文件

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-0000000-5', 'auto');
ga('send', 'pageview');

var trackOutboundLink = function(url) {
    ga('send', 'event', 'outbound_link', url,
        {
            'hitCallback': function () {
                document.location = url;
            }
        }
    );
};

html格式

<a href='<url>' onclick="trackOutboundLink('<url>'); return false;'>buy me now</a>"

return false 防止链接被跟踪,并将其留给 trackOutboundLinks 当GA回调时重定向到新Url。

如果你需要更多,请告诉我。例如,我在事件调用中使用更多的粒度来区分产品网站链接和您可以购买的网站。

Community CDub 7 年前

TL;博士 简而言之,每个图书馆都有自己的跟踪用户的方法。您应该以不同的方式处理每个库,并在它们全部完成时进行重定向。下面,我已经解释了我可以想到的不同的跟踪方式。特别是,请注意信标部分,我没有在这里的答案之间看到它,尽管我认为它在未来会被越来越多地使用。

这实际上取决于其他方跟踪用户的方式。一般来说,我认为有三种方法可以跟踪用户。JavaScript、图像和(可能)iframes。有些方法允许您检查跟踪是否完成。我会尝试解释不同的方法。简而言之,对于第三方,您必须检查他们是否完成了对用户的跟踪,并在所有跟踪完成后进行重定向(使用 window.location ).

1.Javascript

在JavaScript中,跟踪可以以不同的方式实现。我能想到4种不同的方法。我将尝试解释如何跟踪是否正确加载和处理了所有内容。

1.1.信标

灯塔不是很有名。这是一项新技术,它允许浏览器在页面卸载之前向服务器发送小数据包。这些是最容易处理的。在页面卸载时(因此在重定向启动后),他们仍然可以将最终数据发送到服务器。简而言之,不用太担心这种方式。

(但请注意,这不是每个浏览器都支持的。如果您想了解更多信息,请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon 。我不确定,但我认为Google Analytics正在使用此功能)。

1.2.AJAX请求

AJAX请求是最困难的。我看到其他人建议 $.ajaxComplete 来自jQuery库。这值得一试,但我不确定您是否能捕捉到AJAX调用,这些调用是从不同域加载的脚本发出的。从相同的域应该可以工作,我自己也使用了这个来跟踪页面上的AJAX调用。不过,您可以测试一下。取两个域。在第一个域上,使用jQuery捕捉AJAX调用。在第二个域上,托管一个进行AJAX调用的文件(不使用jQuery)。这样,您应该能够发现这是否有效。

否则,您应该检查库的跟踪方法是否有回调方法。调用此回调后,可以假设跟踪部分已完成。

1.3.附加图像

使用JavaScript,还可以在HTML中附加图像标记。简而言之,请参阅下面关于跟踪图像的部分。但是,您需要编写一小段JavaScript来检测附加的跟踪像素。我认为大多数库都会在图像中添加一些东西,这样你就可以用JS来识别它们。

1.4.附加iframe

当然,附加iframe也是一种选择。我认为它不会经常与JavaScript结合使用,但其想法应该与跟踪像素相同。

2.图像

图像应该没有那么难。如果您自己将图像放置在主体中,请添加特定的类或ID,并使用jQuery的 load 事件同样,我不确定它是否会一直启动,但有一些方法可以让你确信它会启动。例如,请参见SO上的以下问题: Check if an image is loaded (no errors) in JavaScript

对于用JavaScript附加的跟踪像素,如果始终使用某个类,则在 <body> 标签例如:

<body>
<script type="text/javascript">
    $(document).on('load', '.trackingPixelClass', function () {
        // increase counter and check if every tracking work is done
    });
</script>

3.框架

如果完成了图像,IFrames应该与跟踪相同。这应该是可行的,但我不能100%确定如果iframe从另一个域加载内容会发生什么。浏览器可能认为这是安全风险。

Buzinas 9 年前

我想到了一些解决方案,我将向您展示我认为最适合您的方案。

尽管如此,这个解决方案只有一个先决条件:您必须查看它们的代码是做什么的,这样您就可以知道在运行脚本时创建了什么全局对象。所有这些跟踪代码都会生成全局变量,所以下面的代码应该是小菜一碟。

例如,Google Analytics创建了 ga 对象,并且一旦完全加载,它将创建 answer 具有值的属性 42 在这个对象中,您可以执行以下操作:

document.addEventListener('DOMContentLoaded', function() {
  function check(arr, callback) {        
    if (arr.filter(function(item) {
      var final = window;
      
      item = item.split('.');
      
      for (var i = 0; i < item.length; i++)
        final = final[item[i]];      
      
      return typeof final !== 'undefined' ? true : false;    
    }).length < arr.length) {
      setTimeout(function() { check(arr, callback) }, 0);
      return;
    }
    callback();
  }

  check(['ga.answer'], function() {
    location.replace('http://www.pudim.com.br/'); // change it to the merchant's website
  });
});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-0000000-5', 'auto');
ga('send', 'pageview');

Redirecting...

上面的代码不断调用 check 函数,直到所有元素都已加载,然后,一旦所有元素都可用,它会立即将用户重定向到所需的页面。

注意:您可以将代码放在页面的任何位置(最好将其放在内联文件中,而不是放在单独的文件中)。

Marcin Raczkowski 9 年前

答案真的取决于你使用的“跟踪器”。其中一些使用难以跟踪的异步调用。

最好的办法是检查它们是否都提供了回调,然后计算它们,如果它们都使用javascript window.location 重定向用户而不是元刷新。

另一个选项是检查当这些脚本完成加载时哪些元素出现,然后等待它们全部出现或预设最大秒数并重定向用户。

Community CDub 7 年前

当您有Javascript元素时,页面加载将停止。脚本加载并运行,然后页面继续运行,除非将其标记为异步,否则脚本加载将异步。

此示例加载谷歌网页,但仅在脚本执行后,请注意第二个脚本不在主HTML上。在文件夹中创建以下三个文件:

文件 test.htm

<html>
<head>
<script src="test.js"></script>
<meta http-equiv="refresh" content="0; url=http://www.google.com/">
</head>
<body>Text
</body>
</html>

文件 test.js

document.write('<script src="test2.js"></script>');

文件 test2.js

alert('Hello');
img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/800px Googlelogo.png';
alert('Loaded image ' + img.outerHTML); // Note sure about this
alert('Will redirect now.');

警报位于第二个脚本文件中,它们在重定向之前运行。您将仅在警报后看到文本“文本”,浏览器将加载下一页。

当然,这取决于脚本的工作方式。如果它将 onload 事件,并在主体上编写一些img元素,它可能不起作用,或者有时会起作用(这是最坏的情况,因为您可能认为它没问题)。

我不太确定 new Image ,但我认为它有效。

如果跟踪代码取决于文档加载,您可以尝试使用 document.onload 或来自跟踪机制API的特定函数。

你必须测试你的具体案例。

图像元素构造函数: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

这里有关于javascript同步性的信息,关于答案及其链接: When is JavaScript synchronous?

Catalin 9 年前

另一个想法是 $.ajaxComplete 捕获ajax响应(由跟踪提供者做出),然后将用户重定向到指定的页面。

但我不知道 $.ajaxComplete() 还捕获非jquery ajax请求。