如何在放置 Facebook 跟踪像素（或类似物）后进行重定向。

Question

如何在放置 Facebook 跟踪像素（或类似物）后进行重定向。

javascriptredirectfacebook-pixel

4

尝试找出如何在放置Facebook重新定位像素后重定向到新页面。

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

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

感谢您提供的任何帮助！

- Bryce York

5个回答

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>

- Christian Santos

0

如前所述，JS代码无法正常工作，因为事件在页面重定向之前不一定被跟踪。如果您不想添加不稳定的超时，那么最好的选择是依赖于备用像素标签。

以下是我的代码：

<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上分享时显示标题和预览图像。

- gphilip

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

- F. Christian

-1

你考虑过使用Google标签管理器吗？

它可以更好地控制脚本的加载方式。此外，你可以在标签管理器中创建脚本来重定向一旦FB触发了。

这正是我用来设置我的标签管理器的方法：

https://youtu.be/DZm1Wz3zgzU

- TrueStory

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RoGERONeill · Accepted Answer

当前的答案还不能完全解决问题！

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

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

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

如果Facebook像Google Analytics一样提供回调函数，那就太容易了。但截至撰写本文时，它当前并没有提供回调功能。

网络上有很多解决方案，简单地使用固定的setTimeout在一秒钟后进行重定向。但是这种解决方案存在两种问题：

当连接比预期慢得多时，它无法正常工作。在这种情况下，跟踪之前仍会发生重定向。因此您将失去数据！
它强制快速连接的用户等待您的任意计时器过去才能重定向！

但是，您可以通过一个完整的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像素请求：

似乎这使浏览器能够正确排队重定向，以便在像素跟踪事件之后发生。我没有尝试过旧版浏览器，所以我要再次重申：在使用此代码时请谨慎！

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