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

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

javascript html

Javascript 如何等到启动跟踪脚本后再重定向用户？,javascript,html,Javascript,Html,我运行一个典型的价格比较网站，用户浏览产品，然后点击一个链接进入商家的网站在被重定向到商户网站之前，用户会看到一个“我们正在重定向您…”页面此页面仅允许跟踪代码（谷歌分析、广告词、Bing广告…）跟踪事件我将跟踪代码放在关闭标记的前面，以避免在加载脚本时阻塞页面的呈现我正在使用元刷新标记重定向用户： <meta http-equiv="refresh" content="0; url=..."> 它似乎工作正常，但我担心，根据浏览器/互联网连接的速度，重定向可能会在启动

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

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

此页面仅允许跟踪代码（谷歌分析、广告词、Bing广告…）跟踪事件

我将跟踪代码放在关闭标记的前面，以避免在加载脚本时阻塞页面的呈现

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

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

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

为了安全起见，我可以将重定向延迟几秒钟，但我想为用户保持平稳的体验

我也可以在

中包含脚本，但是：

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

我如何保证跟踪脚本完成了它们的工作，同时仍然尽快重定向用户？

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

对于谷歌分析，我们可以通过将出站链接跟踪为“事件”来实现这一点。您需要设置一个如下所示的

onclick

函数，谷歌在收到分析消息后将调用回调

(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

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

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

您最好的办法是检查它们是否都提供回调，然后对它们进行计数，如果它们都启动，则使用javascript

window.location

重定向用户，而不是元刷新

另一种方法是在这些脚本完成加载时检查哪些元素出现，然后等待它们全部出现，或者预设最大秒数并重定向用户。

另一种方法是使用捕获ajax响应（由跟踪提供商做出），然后将用户重定向到指定页面

但是我不知道

$.ajaxComplete（）

是否也捕获非jquery ajax请求。

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

此示例加载google网页，但仅在执行脚本后，请注意，第二个脚本不在主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>

文件

test2.js

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

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.');

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

当然，这取决于脚本的工作方式。如果它放置一个

onload

事件并在主体上写入一些img元素，它可能不起作用，或者有时起作用（这是最坏的情况，因为您可能认为它可以）

我不是很确定新的图像是什么，但我认为它是有效的

如果跟踪代码取决于文档加载，您可以尝试使用

document.onload

或跟踪机制API中的特定函数

您必须测试您的具体案例

图像元素构造函数：

这里有关于javascript同步性的信息，关于答案及其链接：

TL；DR简言之，每个库都有自己的用户跟踪方式。您应该以不同的方式处理每个库，并在它们全部完成后重定向。下面，我解释了我可以想到的各种跟踪方式。特别是，请注意信标部分，我在这里的答案之间没有看到它，虽然我认为将来会越来越多地使用它

这实际上取决于其他各方跟踪用户的方式。一般来说，我认为有三种跟踪用户的方式。JavaScript、图像和（可能）iframes。一些方法允许您检查跟踪是否完成。我将尝试解释不同的方法。简言之，对于每个第三方，您必须检查他们是否完成了对用户的跟踪，并在所有操作完成后重定向（使用

window.location

）

1.Javascript 在JavaScript中，跟踪可以以不同的方式实现。我可以在脑海中想出4种不同的方法。我将尝试解释如何跟踪所有内容是否正确加载和处理

1.1.信标信标并不广为人知。这是一项新技术，允许浏览器在页面卸载前向服务器发送小数据包。这些数据包最容易处理。此时页面已卸载（因此在重定向启动后）他们仍然可以将最终数据发送到服务器。简言之，不用太担心这种方式

（但请注意，这并不是每个浏览器都支持的。如果您想了解更多有关它的信息，请参阅。我不确定，但我认为Google Analytics正在使用它）

1.2.AJAX请求 AJAX请求是最困难的。我看到其他人建议

$。ajaxComplete

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