代码之家 › 专栏 › 技术社区 › Bryce York

删除脸书跟踪像素(或类似像素)后如何重定向

facebook-pixel url-redirection javascript

Bryce York · 技术社区 · 7 年前

试图找出在删除脸书重定位像素后如何重定向到新页面。

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

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

谢谢你能提供的任何帮助!

5 回复 | 直到 7 年前

RoGERONeill 7 年前

目前的答案并不能完全解决这个问题!

确实,重定向将等到 fbevents。js公司 已加载。然而,它并不等待 fbq公司 要发送的事件,这是您希望从该解决方案中获得的内容。

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

在第一个例子中,Facebook甚至没有时间在重定向之前启动跟踪请求。在第二个示例中,它确实能够启动它,但由于挂起的重定向,Chrome取消了跟踪。

如果脸书能像谷歌分析一样提供回调功能,这将很容易,但截至撰写本文时,它目前还没有提供回调功能。

网络上有很多解决方案,只需使用固定的 设置超时 例如,在一秒钟后重定向。但这种解决方案带来了两种问题:

当连接比预期慢得多时,它不工作。在这种情况下,重定向仍将发生在轨迹之前。所以你会丢失数据!
它迫使快速连接的用户在重定向之前等待您的任意计时器通过!

不过,为了达到预期效果,你可以做的是彻底破解,如果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的源站策略不允许这样做。

以下是Chrome在更改后如何处理重定向和Facebook像素请求的示例:

这似乎允许浏览器正确地对重定向进行排队,因此它发生在像素跟踪事件之后。我没有在传统浏览器上尝试过这一点,所以我要重复一遍: 使用此代码时要小心!

编辑: Edge和Firefox表现出类似的行为,这个解决方案似乎也适用于它们。

Christian Santos 7 年前

如果你仔细观察脸书的像素代码,你会注意到在代码的某个地方,动态 script 像素插入的标签具有 async 属性设置为 true 像这样:

t.async=!0;

!0 评估结果为 真的 .

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

t.async=false;

通常不建议将其关闭 异步 将阻止进一步执行,直到加载并执行脚本,但在您的情况下,这正是您需要的。

一旦设置 异步 如果为false,则保证加载FB pixel JS代码和在像素后面的下一个脚本之前运行:

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

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

F. Christian 7 年前

你可以修改你放在页面上的脸书像素脚本

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

gphilip 5 年前

如前所述,JS代码将无法工作,因为在页面重定向之前不一定会跟踪事件。如果您不想添加片状超时,那么最好依靠回退像素 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... 标签,以便在脸书上共享时显示标题和预览图像。

-1

TrueStory 5 年前

你考虑过使用谷歌标签管理器吗?

它可以更好地控制脚本的加载方式。此外,您可以在标记管理器中创建脚本,以便在触发FB one后重定向。

这正是我设立我的公司所遵循的原则:

https://youtu.be/DZm1Wz3zgzU