35

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>
2
  • 7
    I'm bothered by putting an <img> tag inside the <head>. That totally violates the HTML specification. – Chloe Sep 14 '17 at 20:01
  • 3
    @Chloe, you can move the <noscript>... part to the body and that will work fine. – Alexis Wilke Sep 27 '17 at 0:08
27

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.

4
  • 10
    What concerns me with having the script in the <HEAD> is that there is a <NOSCRIPT> tag that outputs an <IMG> tag -- Is that allowed in the <HEAD>?? Actually, this is addressed here: stackoverflow.com/questions/3469587/… -- Apparently not an issue. – Alex Czarto Dec 9 '15 at 20:45
  • 21
    And facebook want to count it as conversion but if the user closes the page before it loads, from a real perspective this is not a conversion. This means that it should not be counted at all. I think that this conversion code should be put at the end of the body. Last possible tag. – VStoykov Jul 20 '16 at 11:18
  • 3
    Are you saying that if I close my tab or browser, whatever is in the head is going to be executed anyway? I would imagine that it all will be killed anyway. Also if the user closes the page, why would we want to count that as a hit? – Alexis Wilke Sep 27 '17 at 0:04
  • 2
    For most pages, I would want to put it at the end to make sure that the conversion is counted only for those visitors who are most likely to respond to retargeting ads. Quality of users is more important here than the quantity as Facebook would show your ads to those people similar to these. But for pages that redirect, it is better to have it at the head. For example that page on your site that records the visit before redirecting the visitor to your product page on Amazon. – Tuhin Paul May 3 '20 at 14:09
10

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.

3
  • 8
    How useful is it to count a hit if the user is not going to see the page anyway?! – Alexis Wilke Sep 27 '17 at 0:03
  • 6
    @AlexisWilke For me, there is not much use if a user is not going to see the page. I prefer to put in the end. – Vaibhav Kumar Sep 28 '17 at 7:09
  • 1
    Alexis, a user might be able to see the whole page (or at least what has already been downloaded) even though the page wasn't "fully loaded". For example, maybe some unimportant external resource is loading slowly/forever, just before your fb pixel code, blocking the rest of the page from being loaded, but most modern browsers will render the page components as soon as they download those. In such cases, users will be browsing through the pages without even noticing that those weren't fully loaded, but you won't get any hits to your stats. – Mladen B. Jan 18 '19 at 10:57
6

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

1
  • Why not to put this at the bottom of the page? – Jitendra Vyas May 13 '14 at 11:19
1

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?

5
  • Because of the structure of my website, placing things in the HEAD turns into very non elegant code. Can be done, but will look awkward. I rather place it in the BODY. – cockypup Jan 29 '14 at 19:56
  • Just try it, but the code of the self-evaluating function will place the script reference before the first <script> element in the DOM anyway... – Tobi Jan 29 '14 at 20:00
  • I think that is the problem. It will create a SCRIPT block and place it in the DOM (inside BODY). That SCRIPT probably needs the variable fb_param to work, and probably it needs to be defined before the block is inserted. That is probably why they indicate that it has to be placed in the HEAD (so the variable is already defined). I will test it and report back. I was trying to avoid testing it (if somebody had tried it) because to test it I have to use a lot of social engineering to get the FB account credentials from my client. LOL. – cockypup Jan 29 '14 at 20:10
  • 4
    also, placing an IMG inside the HEAD does not sound correct to me (the NONSCRIPT part) – cockypup Jan 29 '14 at 20:15
  • @cockypup, note that you could place the <noscript>... part in your body and still have the other <script>... part in your <head>... tag. That way you solve both problems. – Alexis Wilke Sep 27 '17 at 0:07
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.