Question

Can I place the Facebook Conversion Pixel inside the BODY (as opposed to inside the HEAD, which is what Facebook suggest in their specs?

I don't see why not. Has anybody tried it?

Here is an example of the code

<script type="text/javascript">
        var fb_param = {};
        fb_param.pixel_id = '123456789';
        fb_param.value = '10';
        fb_param.currency = 'USD';
        (function(){
            var fpw = document.createElement('script');
            fpw.async = true;
            fpw.src = '//connect.facebook.net/en_US/fp.js';
            var ref = document.getElementsByTagName('script')[0];
            ref.parentNode.insertBefore(fpw, ref);
        })();
    </script>
    <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=1234566&amp;value=10&amp;currency=USD" /></noscript>
Was it helpful?

Solution

According to this answer here: https://www.facebook.com/help/community/question/?id=10200354561858276

you can place it inside the <BODY> element but FB recommends to keep it at the beginning of <BODY> or in the <HEAD> as the conversion will be then counted even if the page does not load fully or the user closes the page.

OTHER TIPS

You can put fb pixel code anywhere in the doc. It will work. Tested

If you put in the end of the body, there is one drawback, you won't get the pixel count if the user closed the browser (case - the page is not loaded fully).

But if it is present in the head, you will get the pixel count in case of the page is not loaded properly.

Apparently, yes. It works in the BODY. Tested.

The provided code will place the reference to the FB script before the first occurence of a tag anyway, see:

var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);

What exactly is the reason why you want to change this?

What I did is to place the <script> part of the code in the HEAD section and <noscript> part at the end of the BODY section. Why?

If the Javascript is enabled, and if it is important to you to count every hit to your page, no matter if the page has been fully loaded or not, this will still work.

If the Javascript is not enabled, the <noscript> part will also be executed, without causing the disturbance in the dom model layout (on my page, it added some bogus height to that 1px image, for god knows what reason) and, most importantly, it WILL validate in the W3C HTML validator. If you leave the noscript part in the head section, the img tag within noscript will cause a validation error.

Yes, you can include the Facebook Pixel Code in the HTML body. According to Meta for Developers, you can put it in the head or body of your HTML. Here's what they state on their website: "If you need to install the Pixel using a lightweight implementation, you can install it with a tag. To do this, add the code below between an opening and closing tag within your website's header or body, and replace {pixel-id} with your pixel's ID and {standard-event} with a Standard Event.strong text"

You can check their website using this link, https://developers.facebook.com/docs/meta-pixel/advanced.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top