CODEWITHSUNDEEP
htmlfacebooktracking
cockypup
cockypup

Reputation: 1043

Facebook Conversion Pixel code: BODY vs HEAD

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>

Upvotes: 41

Views: 37415

Answers (6)

Shoti Ji
Shoti Ji

Reputation: 11

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.

Upvotes: 1

Mladen B.
Mladen B.

Reputation: 2996

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.

Upvotes: 1

Vaibhav Kumar
Vaibhav Kumar

Reputation: 544

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.

Upvotes: 11

Michal Trojanowski
Michal Trojanowski

Reputation: 12322

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.

Upvotes: 30

cockypup
cockypup

Reputation: 1043

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

Upvotes: 7

Tobi
Tobi

Reputation: 31479

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?

Upvotes: 1

Related Questions