Как перенаправить * после * удаления пикселя отслеживания Facebook (или аналогичного)

1

Попытка выяснить, как перенаправить на новую страницу после сброса пикселя перенацеления Facebook.

У нас уже есть все настройки, но мы хотим добавить эту функциональность (так же, как https://meteor.link/)

В настоящее время мы используем window.location.replace('https://thelinkgoeshere.com'); но я думаю, что Facebook является асинхронным, поэтому мы не можем просто добавить над ним пиксельный код.

Спасибо за любую помощь, которую вы можете предоставить!

Теги:
url-redirection
facebook-pixel

3 ответа

4
Лучший ответ

Если вы внимательно посмотрите на пиксельный код Facebook, вы заметите, что где-то в этом коде динамический script тег, вставленный пикселем, имеет свойство async установленное как true:

t.async=!0; 

!0 оценивается как true.

Чтобы изменить это поведение, найдите, где это свойство задано в пикселе, и измените его на false:

t.async=false; 

Обычно это не рекомендуется, так как выключение async блокирует дальнейшее выполнение, пока скрипт не будет загружен и не запущен, но в вашем случае это именно то, что вам нужно.

Как только вы установите async на false, гарантируется, что JS-код FB будет загружаться и запускаться перед следующим скриптом, который следует за пикселем:

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

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

Нынешние ответы не совсем режут!

Верно, что перенаправление будет ждать загрузки fbevents.js. Однако он не дожидается, когда будут отправлены события fbq, что вы хотите от этого решения.

Вот два примера того, как Chrome обрабатывает ваше предложение на чрезвычайно медленном подключении и в 3G:

Изображение 174551

Изображение 174551

В первом примере Facebook не имеет времени, чтобы инициировать запрос отслеживания перед перенаправлением. Во втором примере он пытается инициировать его, но Chrome отменяет отслеживание из-за ожидающего перенаправления.

Было бы легко, если бы Facebook предоставил обратный вызов, например, Google Analytics, но на момент написания статьи он в настоящее время не предлагает функции обратного вызова.

В Интернете есть множество решений, которые просто используют фиксированный setTimeout для перенаправления после, скажем, секунды. Но это решение создает два типа проблем:

  1. Он не работает, когда соединение происходит медленнее, чем ожидалось. В этом случае перенаправление все равно будет происходить перед дорожкой. Таким образом, вы потеряете данные!
  2. Это заставляет пользователей на быстрых соединения ждать, пока ваш произвольный таймер пройдет, прежде чем они будут перенаправлены!

То, что вы можете сделать, хотя для достижения желаемого эффекта - это полный хак, и мне было бы очень приятно, если бы 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>

Это загружает точное изображение отслеживания из Facebook, которое используется в их методе fbq, что позволяет компенсировать медленное соединение с сервером Facebook. К сожалению, вы должны использовать изображение и не можете использовать простой запрос AJAX, поскольку Facebook Origin-Policy не позволяет этого.

Ниже приведен пример того, как Chrome обрабатывает перенаправление и запросы пикселов Facebook после изменения:

Изображение 174551

Похоже, что это позволяет Браузеру правильно переадресовывать очередь, поэтому это происходит после событий отслеживания пикселей. Я не пробовал это с унаследованными браузерами, поэтому повторяю: соблюдайте осторожность при использовании этого кода!

EDIT: Edge и Firefox показывают аналогичное поведение, и это решение, похоже, тоже работает с ними.

  • 0
    Мне пришлось поменять местами положения скрипта jquery и определения <img> , иногда изображение загружалось слишком быстро, и imagesLoaded() не imagesLoaded() . Теперь это работает.
  • 0
    Но все же, это кажется довольно ненадежным, иногда пиксель просто не отслеживается.
1

Вы можете изменить сценарий пикселя 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');

Ещё вопросы

Сообщество Overcoder
Наверх
Меню