How do i use Facebook Pixel

I am trying to set up a facebook conversion pixel on the Webflow Website.

Do i place the pixel code snippet, into the area that the Attached image specifies?

Page → settings → Custom Code → Inside ‘Head’ Tag.

Previously, when i asked webflow, they said ‘check out this link’ How to track Webflow Form with Facebook (Pixel) and Google Analytics - General - Forum | Webflow

‘This Link’ is roundabout and not direct. I would have preferred a beautiful, concise, clear explanation.

No, you cannot place it in the head, as it contains a div tag. You will need to place an embed component as the first item on the page, then paste the code in it.

2 Likes

I’ve been having the same problem adding the universal Facebook Pixel (the new one). If I want this site wide (like a google analytics code) do you have advice on that? Thanks for your time.

For Google Analytics, there is a tab in the Site Settings where you can enter the analytics ID. For other sitewide code, there is the Custom Code tab

Hi @samliew, I was thinking, one possible workaround, until updates are released, may be to use some javascript placed in the footer, to write out the divs needed for FB pixel and use javascript to append that to the body.

Take a peek here: javascript - Getting the first element from <body> then insertBefore() - Stack Overflow

What do you think?

@cyberdave any idea on the ETA for the custom code module update? Also, any chance you could provide an example of using the above process? Greatly appreciated.

Hi @Chris_K, thanks, I know that improvements are planned, but I do not have an ETA yet. Keep tuned for more info.

@cyberdave

From what I can understand from the official Facebook Pixel documentation, I do not see a need for that. Although they recommend to put the pixel code in the header, we can still use the Site Footer Custom Code block and it should work the same.

1 Like

Correct, it should be as simple as that, although I recommend pasting the code into the Footer Code box instead of the Head.

Hey @samliew, I get an error when I do that stating that the Pixel is not found using the Chrome Pixel Helper

How are you inserting the code? Can you please provide your project’s public share link and published link?

Here is the public share: https://preview.webflow.com/preview/uncollege-dev?preview=8b10f1627a01274d2dd5386e5bf853be

Published: http://uncollege.org

We’ve tried inserting the standard Facebook Pixel in both the custom code header and body separately with no luck. That said, I know it’s not a pixel error because I’ve tested the same pixel on a Hubspot hosted site and it worked just fine.

Thanks again for the help! Great community here.

It looks fine. Are you using an ad-blocker??