40

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>
cockypup
  • 1,013
  • 1
  • 10
  • 24

6 Answers6

29

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.

Michal Trojanowski
  • 10,641
  • 2
  • 22
  • 41
  • 10
    What concerns me with having the script in the is that there is a – Alex Czarto Dec 09 '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 00: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 03 '20 at 14:09
11

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.

Vaibhav Kumar
  • 544
  • 5
  • 17
  • 9
    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 00: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 07: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
7

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

cockypup
  • 1,013
  • 1
  • 10
  • 24
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?

Tobi
  • 31,405
  • 8
  • 58
  • 90
  • 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 – 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 ` – Alexis Wilke Sep 27 '17 at 00: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.

Mladen B.
  • 2,784
  • 2
  • 23
  • 34
1

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.

Shoti Ji
  • 11
  • 2