Question

尝试弄清楚如何在放弃Facebook重定向像素后重定向到新页面。

我们已经设置了所有其他功能，但希望添加此功能（与https://meteor.link/相同）

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

感谢您提供的任何帮助！

Answer 1

如果仔细查看Facebook像素代码，您会注意到代码中的某处，像素插入的动态script标记具有async属性像这样设置为true：

t.async=!0;

!0评估为true。

要更改此行为，请在像素中查找此属性的设置位置，并将其更改为false：

t.async=false;

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

将async设置为false后，可以保证FB像素JS代码将在像素后面的下一个脚本之前加载和运行：

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

<script>
    window.location.replace('https://thelinkgoeshere.com');
<script>

Answer 2

目前的答案并没有完全削减它！

重定向确实会等到 fbevents.js 加载完毕。但是它不会等待 fbq 事件被发送，这是你想要的解决方案。

以下两个示例介绍了Chrome如何在极慢的连接和3G上处理您的提案：

在第一个例子中，Facebook甚至没有时间在重定向之前发起跟踪请求。在第二个示例中，它确实可以启动它，但由于待处理的重定向，Chrome会取消跟踪。

如果Facebook提供像Google Analytics这样的回调会很容易，但截至撰写本文时，它目前还没有提供回调功能。

网上有很多解决方案只需使用固定的 setTimeout 来重定向，比如说，一秒钟。但是这种解决方案存在两种问题：

当连接速度低于预期时，它不起作用。在这种情况下，重定向仍将发生在轨道之前。所以你会丢失数据！
强制用户进行快速连接，等待任意计时器在重定向之前通过！

为了达到预期的效果你可以做的是一个完整的黑客，如果Facebook最终实现回调，我很乐意，所以小心使用：

注意：我为此使用了两个库（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>

这会加载来自Facebook的fbq方法中使用的精确跟踪图像，从而可以补偿与Facebook服务器的慢速连接。遗憾的是，你必须使用图像，不能使用简单的AJAX请求，因为Facebook的Origin-Policy不允许这样做。

以下是Chrome在更改后处理重定向和Facebook Pixel请求的示例：

这似乎允许浏览器正确排队重定向，因此它发生在像素跟踪事件之后。我没有尝试使用旧版浏览器，所以我会重复一遍：使用此代码时请务必小心！

修改 Edge和Firefox显示出类似的行为，这个解决方案似乎也适用于它们。

Answer 3

您可以修改放在页面上的facebook像素脚本

  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '111......1');
  fbq('track', 'PageView');

  //add your redirect here
  window.location.replace('https://thelinkgoeshere.com');

Answer 4

如前所述，JS代码将不起作用，因为在页面重定向之前不一定要跟踪该事件。如果您不想添加Flakey超时，最好的办法就是依靠后备像素img标签。

这是我的代码：

<html>
    <body>
        Please wait...
        <br>
        If you don't get redirected, click <a href="https://....">here</a>.

        <script>
            var img = document.createElement('img');
            var redirectFunction = function () {
                window.location = "https://....";
            };
            img.onload = redirectFunction;
            img.onerror = redirectFunction;

            document.body.appendChild(img);
            img.src = "https://www.facebook.com/tr?id=PIXEL_ID&ev=PageView&noscript=1";
        </script>
    </body>
</html>

提示：您可能希望在此页面上添加<meta property="og...标签，以便在Facebook上共享时显示标题和预览图像。

Answer 5

您是否考虑过使用Google跟踪代码管理器？

它使您可以更好地控制脚本的加载方式。此外，您可以在跟踪代码管理器中创建脚本，以在触发FB之一后进行重定向。

这正是我建立我的所遵循的：

https://youtu.be/DZm1Wz3zgzU

如何在删除facebook跟踪像素（或类似）之后重定向

5 个答案:

如何在*删除facebook跟踪像素（或类似）之后重定向*

5 个答案:

如何在删除facebook跟踪像素（或类似）之后重定向