3

试图弄清楚如何在删除 Facebook 重定向像素后重定向到新页面。

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

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

感谢您的任何帮助，您可以提供！

4

5 回答 5

10

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

确实，重定向将等到fbevents.js加载完毕。但是，它不会等待发送fbq事件，这是您希望从此解决方案中得到的。

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

连接速度非常慢的演示

3G 演示

在第一个示例中，Facebook 甚至没有时间在重定向之前启动跟踪请求。在第二个示例中，它确实可以启动它，但 Chrome 取消了跟踪，因为待定重定向。

如果 Facebook 会像 Google Analytics 那样提供回调，那将很容易，但在撰写本文时，它目前不提供回调功能。

Web 上有很多解决方案，它们简单地使用固定的setTimeout在例如一秒钟后进行重定向。但是这个解决方案带来了两种问题：

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

不过，要达到预期的效果，您可以做的是一个完整的 Hack，如果 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 表现出类似的行为，而且这个解决方案似乎也适用于它们。

于 2018-03-07T16:42:49.953 回答
7

如果您仔细查看 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>
于 2017-12-07T03:46:06.997 回答
0

您可以修改您放在页面上的 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');
于 2017-12-08T19:52:06.337 回答
0

如前所述，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 上共享时显示标题和预览图像。

于 2019-09-04T08:21:25.727 回答
-1

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

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

这正是我设置我所遵循的：

https://youtu.be/DZm1Wz3zgzU

于 2019-08-29T20:07:33.210 回答