2017-01-20 7 views
4

Я хочу определить в своем JavaScript-коде, что загрузка пикселя Facebook была завершена. Это возможно?Ждите Facebook Pixel Load

Для справки здесь является Facebook код Pixel Tracking:

<script> 
!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','//connect.facebook.net/en_US/fbevents.js'); 
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView'); 
</script> 
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none" 
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1" 
/></noscript> 

разбив его, кажется, что fbq('init', ...) вызывает script тег должен быть добавлен с атрибутом async набор и src набор для //connect.facebook.net/en_US/fbevents.js.

Впоследствии вызов fbq('track', ...) каким-то образом вызывает HTTP GET для изображения через один редирект.

Как определить, что все шаги завершены, особенно, что конечная загрузка изображения завершена?

+0

@CBroe внимательно, 'async' установлен в'! 0', который вычисляет 'true'. и 'fbq' определен inline, поэтому вызовы' fbq' работают нормально, даже если скрипт загружает async. – user2297550

+1

@CBroe различные сценарии, в которых я хочу знать, что это полно: скажем, пользователь нажимает на элемент управления, который приведет его на другой сайт, а затем я хочу отложить перенаправление до загрузки пикселя. Это может произойти, если сеть работает медленно, и пользователь сразу нажал на элемент управления. – user2297550

+0

@CBroe Пожалуйста, уходите от этого вопроса. Вы начали с мелкой критики, заставив меня исправить и уточнить, исходя из предположения, что это было конструктивное упражнение. В конечном счете, вы решили выгрузить довольно нетехническое мнение, не прибегая к техническому выкупу, чтобы сопровождать его. – user2297550

ответ

4

Вы можете использовать ниже код, если вы хотите, чтобы вызвать определенное событие FB после успешного завершения FB пиксельной загрузки, вот код:

<script> 
     function drop_fb_pixel() { 
      try { 
       //Drop FB Pixel 
       fbq('track', 'ViewContent', { 
        content_ids: ['12'], 
        content_type: 'product' 
       }); 
      } 
      catch (err) { 
       setTimeout(function() { drop_fb_pixel(); }, 3000); 

      } 
     } 
     $(document).ready(function() { 
      drop_fb_pixel(); 
     }); 


    </script> 

Логика довольно прост, после загрузки документа этого сценарий будет пытаться для запуска события FB, если получена ошибка, тогда он попытается активировать событие снова через 3 секунды, вы можете настроить время срабатывания события по вашей собственной логике приложения.

+1

кажется, что ваш код не демонстрирует никакого способа запуска кода после загрузки пикселя facebook? таймаут не является надежным способом, поскольку сеть может быть медленной. – user2297550

+0

@ user2297550, код Любви проверяет, существует ли пиксель Facebook при загрузке документа, а если нет, он начинает таймаут, чтобы снова проверить за 3 секунды и продолжать делать это до тех пор, пока пиксель не появится. Даже если сеть работает медленно, она продолжает работать каждые 3 секунды, пока пиксель не появится. –

+0

@JohnWasham Не совсем. Насколько я понимаю, код просто модифицирует DOM, чтобы добавить тег '

0

Ответ @ love-chopra - это все в порядке, однако я думаю, что использовать setTimeout() с задержкой 3 секунды - это не лучшее решение, когда мы говорим о webpa GE. Из моего POV решение может быть setInterval(), чтобы проверить его постоянно, пока fbevents.js не загружен.

var fbLoaded = false; 
    var tryFB = null; 

    function drop_fb_pixel() { 
    fbLoaded = true; 
    try { 
     fbq('track', 'ViewContent', { 
     content_ids: ['12'], 
     content_type: 'product' 
     }); 
    } catch (err) { 
     fbLoaded = false; 
    } 

    if (fbLoaded) { 
     clearInterval(tryFB); 
    } 
    } 

    tryFB = setInterval(function() { 
    drop_fb_pixel(); 
    }, 100); 
1

Я принял удар. Учитывая функцию обратного вызова с именем myCallback и ваш частный идентификатор имени myId, используйте этот код:

(function wait() { 
    // check for the generic script 
    // easiest check to prevent race condition 
    if (fbq.version > '2.0') { 
     // now check for the custom script 
     // `fbq.on` is now ready (`fbq.once` would be better but has a bug) 
    fbq.on('configLoaded', function (name) { 
     if (name === myId) { 
      myCallback(); 
     } 
     }); 
    } else { 
     setTimeout(wait, 10); 
    } 
    })(); 

myCallback будет называться, как только все будет готово. Это является точной fbq.version="2.7.17";

Reference https://github.com/poteto/ember-metrics/pull/151

+1

Слушайте все - [Kelly Selden] (https://stackoverflow.com/a/44836211/1265306) скалы. Это точный ответ и единственный во всей сети, я не мог найти никакой ссылки/документации относительно этого события, только файлы сценария JS возвращаются в запросе пикселя. Если у кого-то есть ссылка на документацию, пожалуйста, поделитесь ею. – naviram

+1

@naviram Спасибо. Я нашел это, разоблачив и прочитав их источник. К сожалению, этого нет в документации. –

 Смежные вопросы

  • Нет связанных вопросов^_^