*在删除Facebook跟踪像素(或类似像素)后如何重定向

Bry*_*ork 2 javascript url-redirection facebook-pixel

尝试找出删除Facebook重定向像素后如何重定向到新页面。

我们已经完成了所有其他设置,但是想要添加此功能(与https://meteor.link/相同)

我们目前使用,window.location.replace('https://thelinkgoeshere.com');但我认为Facebook是异步的,因此我们不能仅在其上方添加像素代码。

感谢您的任何帮助,您可以提供!

RoG*_*ill 7

当前的答案还不能完全解决!

的确,重定向将一直等到fbevents.js已加载。但是,它不等待发送fbq事件,而这正是您希望从该解决方案中获得的。

以下是两个有关Chrome如何在极慢的连接速度和3G条件下处理您的提案的示例:

演示非常慢的连接

3G演示

在第一个示例中,Facebook甚至没有时间在重定向之前启动跟踪请求。在第二个示例中,它确实要求启动它,但是Chrome取消了跟踪,原因是待处理的重定向。

如果Facebook提供像Google Analytics(分析)那样的Callback会很容易,但是截至撰写本文时,它当前不提供Callback功能。

Web上有很多解决方案,它们仅使用固定的setTimeout在一秒钟后重定向。但是这种解决方案存在两种问题:

  1. 当连接的速度比预期的慢时,它将不起作用。在这种情况下,重定向仍会在曲目之前发生。因此,您将丢失数据!
  2. 它迫使处于快速连接状态的用户在重定向之前等待您的任意计时器通过!

尽管可以实现理想的效果,但是您可以做的是完整的Hack,我很想Facebook是否最终实现Callback,因此请谨慎使用

注意:为此,我使用了两个库(jQuery和imagesLoaded)。您可能没有这些也可以这样做,但是我选择了简单的路线,并且不太在意开销。

<html>
<head>
    // Header Stuff
    <script>
       // Regular Facebook Pixel Code (Does not need to be modified with async!)
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</head>
<body>
    <!-- You should provide a Fallback Button here in case automatic redirect fails! -->
    <img id="pixelLoad" src="https://www.facebook.com/tr/">
    <script>
        $(function()
        {
            $("#pixelLoad").imagesLoaded().done(function(inst)
            {
                setTimeout(function(){ window.location.href='someURL'; },100);
            });
        });
    </script>
</body>
Run Code Online (Sandbox Code Playgroud)

这将从其fbq方法中使用的Facebook加载准确的跟踪图像,从而允许补偿与Facebook服务器的缓慢连接。遗憾的是,您必须使用图像,而不能使用简单的AJAX请求,因为Facebook的Origin-Policy不允许这样做。

以下是有关更改后Chrome如何处理重定向和Facebook Pixel请求的示例:

在此处输入图片说明

看来这使浏览器可以正确地将重定向排队,因此它发生在像素跟踪事件之后。我尚未在旧版浏览器上尝试过此操作,因此我将重复自己一遍:使用此代码时要小心!

编辑: Edge和Firefox表现出相似的行为,并且此解决方案似乎也适用于它们。


Chr*_*tos 6

如果您仔细查看Facebook像素代码,您会发现该代码中的某个位置,script像素插入的动态标签的async属性设置true如下:

t.async=!0; 
Run Code Online (Sandbox Code Playgroud)

!0评估为true

要更改此行为,请找到在像素中设置此属性的位置,并将其更改为false:

t.async=false; 
Run Code Online (Sandbox Code Playgroud)

通常不建议这样做,因为关闭async该脚本将阻止进一步执行,直到脚本被加载并执行为止,但是在您的情况下,这正是您所需要的。

一旦设置async为false,就可以确保FB像素JS代码将在该像素之后的下一个脚本之前加载运行:

<script> 
    // FB pixel here with async false 
</script>

<script>
    window.location.replace('https://thelinkgoeshere.com');
<script>
Run Code Online (Sandbox Code Playgroud)