All geek questions in one place

Wait for Facebook Pixel Load

I want to find in my JavaScript code that the loading of the Facebook pixel is complete. Is it possible?

For reference, the Facebook pixel tracking code is used here:

<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>

Interrupting, it seems to fbq('init', ...)add a tag scriptwith a set of attributes asyncand srcset to //connect.facebook.net/en_US/fbevents.js.

Subsequently, the call fbq('track', ...)somehow calls HTTP GETfor the image through a single redirection.

How to determine that all steps are completed, especially that the final image download is complete?

+7
source share
6 answers

. myId 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";

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

+5

, 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>

, script FB, , 3 ,

+4

OP @user2297550 , - , , ( ). , Facebook <script> , , , . , OP , PageView . , , .

, Facebook new Image() src - https://www.facebook.com/tr/?id=XXXXXX&ev=PageView&{more parameters}. , sendGET:

this.sendGET = function(b, c, d) {
    b.replaceEntry("rqm", "GET");
    var f = b.toQueryString();
    f = i(c, d) + "?" + f;
    if (f.length < 2048) {
        var g = new Image();
        if (d != null) {
            var h = a.getShouldProxy();
            g.onerror = function() {
                a.setShouldProxy(!0), h || e.sendGET(b, c, d)
            }
        }
        g.src = f;
        return !0
    }
    return !1
};

, Image.onload Image.onload . - , Facebook :

OriginalImage = Image;
Image = function(){
  let oi = new OriginalImage();
  oi.onload = function() {
    // if the image that loaded was indeed a Facebook pixel
    // for a "PageView" event, redirect
    if( this.src.indexOf( 'facebook.com/tr/?id=XXXXXX&ev=PageView' ) != -1 )
      window.location = 'https://example.com/redirect-here';
  };
  return oi;
};

, " " :

<html>
<head>
<!-- Facebook Pixel Code -->
<script>
  OriginalImage = Image;
  Image = function(){
    let oi = new OriginalImage();
    oi.onload = function() {
      // if the image that loaded was indeed a Facebook pixel
      // for a "PageView" event, redirect
      if( this.src.indexOf( 'facebook.com/tr/?id=XXXXXX&ev=PageView' ) != -1 )
        window.location = 'https://example.com/redirect-here';
    };
    return oi;
  };

  !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', 'XXXXXX');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
</head>
<body></body>
</html>

, Javascript <noscript> "onload", , :

<html>
<head>
<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"
       onload="window.location = 'https://example.com/redirect-here';"/>
<!-- End Facebook Pixel Code -->
</head>
<body></body>
</html>

, Facebook .

, , Facebook. onload . , Facebook , .

+1

@love-chopra , , setTimeout() 3s - , -. 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);
0
<script>
  $(document).ready(function () {

    function fbqcheck() {
      if(typeof fbq === 'undefined') {
        setTimeout(fbqcheck, 5);
      } else {
        alert('Facebook pixel loaded');
      }
    }

    fbqcheck();

  });
</script>
-1

I know this is an old post, but what about uploading a Pixel Helper to Facebook as a Chrome extension? This will inform you immediately if there is a pixel load on your site.

enter image description here

-1
source

Source: https://habr.com/ru/post/1667311/

More articles:


All Articles