I run a typical price comparison website, where the user browses products, then clicks on a link to go to the merchant's website.
我运行一个典型的价格比较网站,用户浏览产品,然后点击链接进入商家的网站。
Before being redirected to the merchant's website, the user is presented with a "we are redirecting you..." page.
在被重定向到商家网站之前,用户会看到一个“我们正在重定向你…”的页面。
This page is only there to allow tracking codes (Google Analytics, Adwords, Bing Ads...) to track the event.
这个页面只允许跟踪代码(谷歌分析,Adwords, Bing Ads…)跟踪事件。
I've placed the tracking codes right before the closing </body>
tag, to avoid blocking the rendering of the page while the scripts are loaded.
我已经将跟踪代码放在关闭标记之前,以避免在加载脚本时阻塞页面的呈现。
I'm redirecting the user with a meta refresh tag:
我用一个元刷新标签重定向用户:
<meta http-equiv="refresh" content="0; url=...">
It seems to work alright, but I'm worried that, depending on the browser / speed of the internet connection, the redirect can happen before the tracking scripts have fired.
它看起来运行良好,但是我担心,根据internet连接的浏览器/速度,在跟踪脚本被触发之前,重定向就会发生。
I could just delay the redirect for a few seconds to be on the safe side, but I want to keep the experience smooth for the user.
为了安全起见,我可以将重定向延迟几秒钟,但我想让用户体验更顺畅。
I could also include the scripts in the <head>
, but:
我也可以在中包含这些脚本,但是:
- This would delay the display on the "redirecting..." page while the scripts are loaded
- 在加载脚本时,这会延迟“重定向…”页面上的显示
- This would not guarantee that the tracking scripts have done their job before the user is redirected: the tracking script is first loaded, then triggers another action asynchronously to track the event.
- 这不能保证跟踪脚本在用户重定向之前就完成了它们的工作:首先加载跟踪脚本,然后异步触发另一个动作来跟踪事件。
How can I guarantee that the tracking scripts have done their jobs, while still redirecting the user ASAP?
我如何保证跟踪脚本已经完成了它们的工作,同时还能尽快重定向用户?
Any feedback on a similar experience will be appreciated.
如果您对类似的经历有任何反馈,我们将非常感激。
7 个解决方案
#1
4
For Google analytics there is an official way to do this by tracking outbound links as 'events'. You need to set up an onclick
function as below, and Google will call a callback when it has received the analytics message.
对于谷歌分析来说,有一种官方的方法可以通过将出站链接跟踪为“事件”来实现这一点。您需要设置如下所示的onclick函数,谷歌在接收到分析消息后将调用回调。
js
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
html
<a href='<url>' onclick="trackOutboundLink('<url>'); return false;'>buy me now</a>"
return false
prevents the link being followed as such, and leaves it to trackOutboundLinks
to redirect to the new Url when called back by GA.
返回false防止链接被跟踪,并将其保留到trackOutboundLinks,以便在由GA调用时重定向到新Url。
Let me know if you need more. For example I use more granularity in my event calls to distinguish between links to the websites of the product and websites where you can purchase.
如果你需要更多,请告诉我。例如,我在事件调用中使用更细粒度的方法来区分产品的网站链接和可以购买的网站链接。
#2
3
TL;DR In short, every library has their own way of tracking users. You should handle every library differently and redirect when they all finished. Below, I've explained the different ways of tracking I could think of on the top of head. Especially, pay attention to the beacons part, I haven't seen it between the answers here, though it will be used more and more in the future I think.
简而言之,每个图书馆都有自己的用户跟踪方式。您应该以不同的方式处理每个库,并在它们全部完成时重定向。下面,我解释了我能想到的各种跟踪方式。特别要注意信标部分,我在这里还没有看到答案之间的关系,虽然我认为将来会越来越多的用到它。
This actually depends on the way other parties track the users. In general, I think there are three kind of ways to track a user. JavaScript, images and (maybe) iframes. Some methods allow you to check if the tracking is done. I'll try to explain the different methods. In short, per 3rd party you'll have to check if they finished tracking the user and redirect when all have finished (using window.location
).
这实际上取决于其他方跟踪用户的方式。一般来说,我认为有三种跟踪用户的方法。JavaScript、图像和(可能)iframe。有些方法允许您检查跟踪是否完成。我将尝试解释不同的方法。简而言之,对于每个第三方,您必须检查他们是否完成了跟踪用户和重定向(使用windows .location)。
1. Javascript
In JavaScript, tracking can be implemented in different ways. I can think of 4 different methods on the top of my head. I'll try to explain how you can track if everything is loaded and processed correctly.
在JavaScript中,跟踪可以以不同的方式实现。我能想到四种不同的方法。我将尝试解释如何跟踪是否所有内容都被正确加载和处理。
1.1. Beacons
Beacons are not very well known. It is a new technology, which allows the browser to send small packets of data to the server before the page unloads. Those are the easiest to handle. At the moment the page has unloaded (so after the redirect is initiated) they can still send their final data to the server. In short, don't worry to much about this way.
信标不是很有名。这是一项新技术,允许浏览器在页面卸载之前向服务器发送小数据包。这些是最容易处理的。当页面已经卸载时(因此重定向启动后),他们仍然可以将最终的数据发送到服务器。简而言之,不要太担心这个问题。
(But be aware, this is not yet supported in every browser. If you want to read more about it, please see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon . I'm not sure, but I thought Google Analytics was using this).
(但请注意,这在每个浏览器中都没有得到支持。如果您想要了解更多,请参见https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon。我不确定,但我认为谷歌分析公司正在使用这个)。
1.2. AJAX Requests
The AJAX requests are the most difficult. I see others have suggested $.ajaxComplete
from the jQuery library. It's worth a try, but I'm not sure if you can catch AJAX calls which are made from scripts that are loaded from a different domain. From the same domains should work, I've used this myself to keep track of the AJAX calls on a page. You could test this however. Take two domains. On the first domain, use jQuery to catch the AJAX calls. On the second domain, host a file which makes an AJAX call (without using jQuery). This way, you should be able to find out if this works.
AJAX请求是最困难的。我看到有人建议给我钱。来自jQuery库的ajaxComplete。这值得一试,但我不确定您是否能够捕获AJAX调用,这些调用是由从不同域加载的脚本生成的。从相同的域应该可以工作,我自己使用这个来跟踪页面上的AJAX调用。你可以测试一下。两个域。在第一个域中,使用jQuery捕获AJAX调用。在第二个域中,托管一个文件,该文件进行AJAX调用(不使用jQuery)。用这种方法,你应该能够发现它是否有效。
Otherwise, you should check if the libraries have a callback method for their tracking methods. Once this callback is called, you can assume the tracking part has finished.
否则,您应该检查库是否有用于跟踪方法的回调方法。调用这个回调后,可以假定跟踪部分已经完成。
1.3. Append image
With JavaScript, it is also possible to append an image tag to the HTML. In short, see the section below about tracking images. But, you will need to write some small piece of JavaScript to detect the tracking pixel which is appended. I think most libraries will add something to the image so you can identify them with JS.
使用JavaScript,也可以将图像标记附加到HTML中。简而言之,请参阅下面关于跟踪图像的部分。但是,您需要编写一小段JavaScript来检测被追加的跟踪像素。我认为大多数库都会向图像中添加一些东西,以便您可以用JS识别它们。
1.4. Append iframe
Of course, appending an iframe is also an option. I don't think it will be used that often in combination with JavaScript, but the idea should be the same as with the tracking pixels.
当然,添加iframe也是一种选择。我认为它不会经常与JavaScript结合使用,但其思想应该与跟踪像素相同。
2. Images
Images should not be that difficult. If you place the images in the body yourself, add a certain class or ID and use jQuery's load
event. Again, I'm not sure this will always launch, but there are ways which can make you sure it does. For example, see this questions on SO: Check if an image is loaded (no errors) in JavaScript
图像不应该那么困难。如果您将图像放置在主体中,那么添加一个类或ID并使用jQuery的load事件。再说一遍,我不确定它是否总是会启动,但是有一些方法可以确保它会启动。例如,请参见这个问题:检查在JavaScript中是否加载了图像(没有错误)
For the tracking pixels append with JavaScript, if the always use a certain class, you write some JavaScript right after the <body>
tag. For example:
对于使用JavaScript追加的跟踪像素,如果总是使用某个类,则在标记之后编写一些JavaScript。例如:
<body>
<script type="text/javascript">
$(document).on('load', '.trackingPixelClass', function () {
// increase counter and check if every tracking work is done
});
</script>
3. IFrames
IFrames should be the same as tracking if images are done. This should work, but I'm not a 100% certain what happens if the iframe loads content from another domain. Browsers might think this is a security risk.
iframe应该与跟踪图像相同。这应该可以,但是我不能100%确定如果iframe从另一个域加载内容会发生什么。浏览器可能认为这是安全风险。
#3
2
There are a few solutions that come to my mind, I'll show you the one I think it fits best for your case.
我想到了一些解决办法,我给你看一个我认为最适合你的方案。
Although, there is one single pre-requisite for this solution to work: you must take a look what their code does, so you can figure out what global object is created when the script is run. All those tracking codes generate global variables, so the code below should work as a piece of cake.
虽然,这个解决方案的工作只有一个先决条件:您必须查看它们的代码做了什么,以便在运行脚本时确定创建了什么全局对象。所有这些跟踪代码都生成全局变量,因此下面的代码应该是小菜一碟。
For example, the Google Analytics creates a ga
object, and as soon as it's fully loaded, it creates an answer
property with a value 42
in this object, so, you could do:
例如,谷歌分析创建了一个ga对象,一旦它被完全加载,它就会创建一个带有值42in的答案属性,因此,您可以这样做:
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...
The code above keeps calling a check
function until all the elements are already loaded, and then, as soon as they are all available, it immediately redirects the user to the page you want.
上面的代码一直调用一个检查函数,直到所有的元素都已经加载,然后,当它们都可用时,它会立即将用户重定向到您想要的页面。
Note: You can pute the code above anywhere in your page (better to put it inline than in a separate file).
注意:你可以在你的页面的任何地方(最好是内联,而不是在单独的文件中)把代码pute。
#4
1
The answer really depends on what "trackers" you use. Some of them use asynchronous calls which are hard to track.
答案取决于你使用什么“追踪器”。其中一些使用难以跟踪的异步调用。
Your best bet is to check if all of them provide callbacks and hen count them, and if they all fire use javascript window.location
to redirect user instead of meta-refresh.
最好的办法是检查它们是否都提供回调,并计算它们的数量,如果它们全部触发,请使用javascript窗口。定位以重定向用户而不是元刷新。
Another option would be to check which elements appear when those scripts finish loading, then wait either till they all appear or preset max number of seconds and redirect the user.
另一个选项是在脚本加载完成时检查哪些元素出现,然后等待它们全部出现,或者预先设置最大秒数并重新定向用户。
#5
1
When you have a Javascript element, the page loading is halted. the script loads and run, then your page continues, unless you mark it async, that makes the script loading asynchronous.
当您有一个Javascript元素时,页面加载将被停止。脚本加载并运行,然后您的页面继续,除非您将其标记为异步的,这将使脚本加载成为异步的。
This example loads google webpage but only after the script is executed, note that the second script is not on the main HTML. Create these three files on a folder:
此示例加载谷歌页面,但仅在执行脚本之后,请注意第二个脚本不在主HTML上。在一个文件夹中创建这三个文件:
file test.htm
文件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>
file test.js
. js的文件
document.write('<script src="test2.js"></script>');
file test2.js
文件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.');
The alerts are at the second script file, and they run before the redirect. You will see the text "Text" only after the alerts, and the browser will load the next page.
警报位于第二个脚本文件,它们在重定向之前运行。您将只在警报之后看到文本“text”,浏览器将加载下一个页面。
Of course this depends on how the script works. If it puts an onload
event and write some img element on the body, it may not work, or work sometimes (that is the worst case because you may think it is ok).
当然,这取决于脚本的工作方式。如果它放置一个onload事件并在主体上写一些img元素,那么它可能不会工作,或者有时会工作(这是最坏的情况,因为您可能认为它是可以的)。
I am not really sure about the new Image
, but I think it works.
我不太确定新的形象,但我认为它是可行的。
If the tracking codes depends on document loading, you may try to use the document.onload
or a specific function from the tracking mechanism API.
如果跟踪代码依赖于文档加载,您可以尝试使用文档。onload或跟踪机制API中的特定函数。
You will have to test your specific case.
您将不得不测试您的特定案例。
The image element constructor: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
图像元素构造函数:https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
There is information about javascript synchronicity here, on the answers and their links: When is JavaScript synchronous?
这里有关于javascript同步的信息,关于答案及其链接:javascript何时是同步的?
#6
0
Another idea would be to use $.ajaxComplete to capture the ajax responses (made by tracking providers), and then redirect the user to the specified page.
另一个想法是使用$。ajaxComplete捕获ajax响应(由跟踪提供程序生成),然后将用户重定向到指定的页面。
But I don't know if $.ajaxComplete()
also captures non-jquery ajax requests.
但是我不知道$. ajaxcomplete()是否也捕获了非jquery ajax请求。
#7
-2
You could try using JQuery's $(document).ready()
Read more about it here
您可以尝试使用JQuery的$(document).ready()来阅读更多相关信息
#1
4
For Google analytics there is an official way to do this by tracking outbound links as 'events'. You need to set up an onclick
function as below, and Google will call a callback when it has received the analytics message.
对于谷歌分析来说,有一种官方的方法可以通过将出站链接跟踪为“事件”来实现这一点。您需要设置如下所示的onclick函数,谷歌在接收到分析消息后将调用回调。
js
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
html
<a href='<url>' onclick="trackOutboundLink('<url>'); return false;'>buy me now</a>"
return false
prevents the link being followed as such, and leaves it to trackOutboundLinks
to redirect to the new Url when called back by GA.
返回false防止链接被跟踪,并将其保留到trackOutboundLinks,以便在由GA调用时重定向到新Url。
Let me know if you need more. For example I use more granularity in my event calls to distinguish between links to the websites of the product and websites where you can purchase.
如果你需要更多,请告诉我。例如,我在事件调用中使用更细粒度的方法来区分产品的网站链接和可以购买的网站链接。
#2
3
TL;DR In short, every library has their own way of tracking users. You should handle every library differently and redirect when they all finished. Below, I've explained the different ways of tracking I could think of on the top of head. Especially, pay attention to the beacons part, I haven't seen it between the answers here, though it will be used more and more in the future I think.
简而言之,每个图书馆都有自己的用户跟踪方式。您应该以不同的方式处理每个库,并在它们全部完成时重定向。下面,我解释了我能想到的各种跟踪方式。特别要注意信标部分,我在这里还没有看到答案之间的关系,虽然我认为将来会越来越多的用到它。
This actually depends on the way other parties track the users. In general, I think there are three kind of ways to track a user. JavaScript, images and (maybe) iframes. Some methods allow you to check if the tracking is done. I'll try to explain the different methods. In short, per 3rd party you'll have to check if they finished tracking the user and redirect when all have finished (using window.location
).
这实际上取决于其他方跟踪用户的方式。一般来说,我认为有三种跟踪用户的方法。JavaScript、图像和(可能)iframe。有些方法允许您检查跟踪是否完成。我将尝试解释不同的方法。简而言之,对于每个第三方,您必须检查他们是否完成了跟踪用户和重定向(使用windows .location)。
1. Javascript
In JavaScript, tracking can be implemented in different ways. I can think of 4 different methods on the top of my head. I'll try to explain how you can track if everything is loaded and processed correctly.
在JavaScript中,跟踪可以以不同的方式实现。我能想到四种不同的方法。我将尝试解释如何跟踪是否所有内容都被正确加载和处理。
1.1. Beacons
Beacons are not very well known. It is a new technology, which allows the browser to send small packets of data to the server before the page unloads. Those are the easiest to handle. At the moment the page has unloaded (so after the redirect is initiated) they can still send their final data to the server. In short, don't worry to much about this way.
信标不是很有名。这是一项新技术,允许浏览器在页面卸载之前向服务器发送小数据包。这些是最容易处理的。当页面已经卸载时(因此重定向启动后),他们仍然可以将最终的数据发送到服务器。简而言之,不要太担心这个问题。
(But be aware, this is not yet supported in every browser. If you want to read more about it, please see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon . I'm not sure, but I thought Google Analytics was using this).
(但请注意,这在每个浏览器中都没有得到支持。如果您想要了解更多,请参见https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon。我不确定,但我认为谷歌分析公司正在使用这个)。
1.2. AJAX Requests
The AJAX requests are the most difficult. I see others have suggested $.ajaxComplete
from the jQuery library. It's worth a try, but I'm not sure if you can catch AJAX calls which are made from scripts that are loaded from a different domain. From the same domains should work, I've used this myself to keep track of the AJAX calls on a page. You could test this however. Take two domains. On the first domain, use jQuery to catch the AJAX calls. On the second domain, host a file which makes an AJAX call (without using jQuery). This way, you should be able to find out if this works.
AJAX请求是最困难的。我看到有人建议给我钱。来自jQuery库的ajaxComplete。这值得一试,但我不确定您是否能够捕获AJAX调用,这些调用是由从不同域加载的脚本生成的。从相同的域应该可以工作,我自己使用这个来跟踪页面上的AJAX调用。你可以测试一下。两个域。在第一个域中,使用jQuery捕获AJAX调用。在第二个域中,托管一个文件,该文件进行AJAX调用(不使用jQuery)。用这种方法,你应该能够发现它是否有效。
Otherwise, you should check if the libraries have a callback method for their tracking methods. Once this callback is called, you can assume the tracking part has finished.
否则,您应该检查库是否有用于跟踪方法的回调方法。调用这个回调后,可以假定跟踪部分已经完成。
1.3. Append image
With JavaScript, it is also possible to append an image tag to the HTML. In short, see the section below about tracking images. But, you will need to write some small piece of JavaScript to detect the tracking pixel which is appended. I think most libraries will add something to the image so you can identify them with JS.
使用JavaScript,也可以将图像标记附加到HTML中。简而言之,请参阅下面关于跟踪图像的部分。但是,您需要编写一小段JavaScript来检测被追加的跟踪像素。我认为大多数库都会向图像中添加一些东西,以便您可以用JS识别它们。
1.4. Append iframe
Of course, appending an iframe is also an option. I don't think it will be used that often in combination with JavaScript, but the idea should be the same as with the tracking pixels.
当然,添加iframe也是一种选择。我认为它不会经常与JavaScript结合使用,但其思想应该与跟踪像素相同。
2. Images
Images should not be that difficult. If you place the images in the body yourself, add a certain class or ID and use jQuery's load
event. Again, I'm not sure this will always launch, but there are ways which can make you sure it does. For example, see this questions on SO: Check if an image is loaded (no errors) in JavaScript
图像不应该那么困难。如果您将图像放置在主体中,那么添加一个类或ID并使用jQuery的load事件。再说一遍,我不确定它是否总是会启动,但是有一些方法可以确保它会启动。例如,请参见这个问题:检查在JavaScript中是否加载了图像(没有错误)
For the tracking pixels append with JavaScript, if the always use a certain class, you write some JavaScript right after the <body>
tag. For example:
对于使用JavaScript追加的跟踪像素,如果总是使用某个类,则在标记之后编写一些JavaScript。例如:
<body>
<script type="text/javascript">
$(document).on('load', '.trackingPixelClass', function () {
// increase counter and check if every tracking work is done
});
</script>
3. IFrames
IFrames should be the same as tracking if images are done. This should work, but I'm not a 100% certain what happens if the iframe loads content from another domain. Browsers might think this is a security risk.
iframe应该与跟踪图像相同。这应该可以,但是我不能100%确定如果iframe从另一个域加载内容会发生什么。浏览器可能认为这是安全风险。
#3
2
There are a few solutions that come to my mind, I'll show you the one I think it fits best for your case.
我想到了一些解决办法,我给你看一个我认为最适合你的方案。
Although, there is one single pre-requisite for this solution to work: you must take a look what their code does, so you can figure out what global object is created when the script is run. All those tracking codes generate global variables, so the code below should work as a piece of cake.
虽然,这个解决方案的工作只有一个先决条件:您必须查看它们的代码做了什么,以便在运行脚本时确定创建了什么全局对象。所有这些跟踪代码都生成全局变量,因此下面的代码应该是小菜一碟。
For example, the Google Analytics creates a ga
object, and as soon as it's fully loaded, it creates an answer
property with a value 42
in this object, so, you could do:
例如,谷歌分析创建了一个ga对象,一旦它被完全加载,它就会创建一个带有值42in的答案属性,因此,您可以这样做:
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...
The code above keeps calling a check
function until all the elements are already loaded, and then, as soon as they are all available, it immediately redirects the user to the page you want.
上面的代码一直调用一个检查函数,直到所有的元素都已经加载,然后,当它们都可用时,它会立即将用户重定向到您想要的页面。
Note: You can pute the code above anywhere in your page (better to put it inline than in a separate file).
注意:你可以在你的页面的任何地方(最好是内联,而不是在单独的文件中)把代码pute。
#4
1
The answer really depends on what "trackers" you use. Some of them use asynchronous calls which are hard to track.
答案取决于你使用什么“追踪器”。其中一些使用难以跟踪的异步调用。
Your best bet is to check if all of them provide callbacks and hen count them, and if they all fire use javascript window.location
to redirect user instead of meta-refresh.
最好的办法是检查它们是否都提供回调,并计算它们的数量,如果它们全部触发,请使用javascript窗口。定位以重定向用户而不是元刷新。
Another option would be to check which elements appear when those scripts finish loading, then wait either till they all appear or preset max number of seconds and redirect the user.
另一个选项是在脚本加载完成时检查哪些元素出现,然后等待它们全部出现,或者预先设置最大秒数并重新定向用户。
#5
1
When you have a Javascript element, the page loading is halted. the script loads and run, then your page continues, unless you mark it async, that makes the script loading asynchronous.
当您有一个Javascript元素时,页面加载将被停止。脚本加载并运行,然后您的页面继续,除非您将其标记为异步的,这将使脚本加载成为异步的。
This example loads google webpage but only after the script is executed, note that the second script is not on the main HTML. Create these three files on a folder:
此示例加载谷歌页面,但仅在执行脚本之后,请注意第二个脚本不在主HTML上。在一个文件夹中创建这三个文件:
file test.htm
文件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>
file test.js
. js的文件
document.write('<script src="test2.js"></script>');
file test2.js
文件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.');
The alerts are at the second script file, and they run before the redirect. You will see the text "Text" only after the alerts, and the browser will load the next page.
警报位于第二个脚本文件,它们在重定向之前运行。您将只在警报之后看到文本“text”,浏览器将加载下一个页面。
Of course this depends on how the script works. If it puts an onload
event and write some img element on the body, it may not work, or work sometimes (that is the worst case because you may think it is ok).
当然,这取决于脚本的工作方式。如果它放置一个onload事件并在主体上写一些img元素,那么它可能不会工作,或者有时会工作(这是最坏的情况,因为您可能认为它是可以的)。
I am not really sure about the new Image
, but I think it works.
我不太确定新的形象,但我认为它是可行的。
If the tracking codes depends on document loading, you may try to use the document.onload
or a specific function from the tracking mechanism API.
如果跟踪代码依赖于文档加载,您可以尝试使用文档。onload或跟踪机制API中的特定函数。
You will have to test your specific case.
您将不得不测试您的特定案例。
The image element constructor: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
图像元素构造函数:https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
There is information about javascript synchronicity here, on the answers and their links: When is JavaScript synchronous?
这里有关于javascript同步的信息,关于答案及其链接:javascript何时是同步的?
#6
0
Another idea would be to use $.ajaxComplete to capture the ajax responses (made by tracking providers), and then redirect the user to the specified page.
另一个想法是使用$。ajaxComplete捕获ajax响应(由跟踪提供程序生成),然后将用户重定向到指定的页面。
But I don't know if $.ajaxComplete()
also captures non-jquery ajax requests.
但是我不知道$. ajaxcomplete()是否也捕获了非jquery ajax请求。
#7
-2
You could try using JQuery's $(document).ready()
Read more about it here
您可以尝试使用JQuery的$(document).ready()来阅读更多相关信息