如何在重定向用户之前等待跟踪脚本被触发?

时间:2015-09-21 09:39:46

标签: javascript html

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

在重定向到商家网站之前,系统会向用户显示“我们正在重定向您...”页面。

此页面仅允许跟踪代码(Google Analytics,Adwords,Bing Ads ...)来跟踪活动。

我已将跟踪代码放在结束</body>标记之前,以避免在加载脚本时阻止呈现页面。

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

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

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

我可以将重定向延迟几秒钟以保证安全,但我希望为用户保持顺畅的体验。

我还可以在<head>中添加脚本,但是:

  • 这会在加载脚本时延迟“重定向...”页面上的显示
  • 这将 保证跟踪脚本在重定向用户之前已完成其工作:首先加载跟踪脚本,然后异步触发另一个操作以跟踪事件。

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

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

7 个答案:

答案 0 :(得分:4)

对于Google分析,可以通过跟踪出站链接作为“事件”来执行此操作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会阻止此链接被跟踪,并在GA回叫时将其留给trackOutboundLinks重定向到新的Url。

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

答案 1 :(得分:3)

  

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

这实际上取决于其他方跟踪用户的方式。总的来说,我认为有三种方法可以跟踪用户。 JavaScript,图片和(也许)iframe。某些方法允许您检查跟踪是否已完成。我将尝试解释不同的方法。简而言之,对于第三方,您必须检查他们是否完成了跟踪用户并在完成所有操作后重定向(使用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请求是最困难的。我看到其他人已经从jQuery库中建议了$.ajaxComplete。值得一试,但我不确定你是否可以捕获由不同域加载的脚本制作的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>标记后面编写一些JavaScript。例如:

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

3。 I-帧

如果完成图像,IFrame应与跟踪相同。这应该可行,但我不能100%确定如果iframe从其他域加载内容会发生什么。浏览器可能会认为存在安全风险。

答案 2 :(得分:2)

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

虽然此解决方案有一个前提条件可供使用:您必须查看其代码的作用,以便您可以确定在运行脚本时创建的全局对象。所有这些跟踪代码都会生成全局变量,因此下面的代码应该可以作为小菜一碟。

例如,Google Analytics会创建一个ga对象,一旦完全加载,它就会在此对象中创建一个值为answer的{​​{1}}属性,因此,您可以这样做:

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...函数,直到所有元素都已加载,然后,只要它们全部可用,它立即将用户重定向到您想要的页面。

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

答案 3 :(得分:1)

答案实际上取决于您使用的“跟踪器”。其中一些使用难以跟踪的异步调用。

您最好的选择是检查所有这些是否都提供了回调,并且母鸡会对它们进行计数,如果它们全部触发,请使用javascript window.location重定向用户而不是元刷新。

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

答案 4 :(得分:1)

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

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

档案<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

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

当然这取决于脚本的工作原理。如果它放置一个new Image事件并在主体上写一些img元素,它可能不起作用,或者有时工作(这是最糟糕的情况,因为你可能认为它没问题)。

我对document.onload并不十分确定,但我认为它有效。

如果跟踪代码取决于文档加载,您可以尝试使用IO或跟踪机制API中的特定功能。

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

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

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

答案 5 :(得分:0)

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

但我不知道$.ajaxComplete()是否也捕获了非jquery ajax请求。

答案 6 :(得分:-2)

您可以尝试使用JQuery的 public partial class Form1 : Form { public Form1() { InitializeComponent(); InitializeGUI(); } public void InitializeGUI() { int fileCount = Directory.GetFiles(?????, "*.xml", SearchOption.AllDirectories).Length; textBox1.Text = fileCount.ToString(); } //When the user clicks select file private void button1_Click(object sender, EventArgs e) { FolderBrowserDialog fbd = new FolderBrowserDialog(); DialogResult result = fbd.ShowDialog(); string[] files = Directory.GetFiles(fbd.SelectedPath); } } 详细了解here