How do I add the Facebook Conversion pixel to my checkout page?

[Mike-]

[Note: The title of this post has been edited by a moderator.]

Hi All,

I am having issues adding the NEW Facebook Conversion Pixel to the receipt page of my Weebly site .. www.RocknRomance.co.uk

I have managed to add the base code with no problem using the section under SEO and adding it to the header code .. That is working fine and logging visitors etc as it should

However.. this is where it all goes wrong .. I add the "Event Code" for purchases / conversions into the area that allows you to add a code into the receipt page .. but when I go to check the code using the "Facebook Pixel Helper" it says the following ...

Pixel Did Not Load

This error means that the Pixel Helper found what looks to be Facebook pixel code on your site, but the actual HTTP call was never made.

This could typically due to an error in the code, but could also occur if the pixel fires on a dynamic event (e.g. on a button click).

In that case, the error will disappear upon clicking on the button.

... So I go back and check that all the code has been added correctly and pasted in the right format .. I have tried the Basic, Recommended & Advanced versions of the event code several times each and every single time I get the same error ..

What on earth is going on here ?? I have literally spent days trying to figure it .. Facebook have confirmed the code is correct and it is not an issue there end .. Weebly don’t seem to have an answer either just saying that they cannot get involved in checking the code for each site etc ..

Because of this .. I’m sure I’m not alone here .. My business adverts and boosts on Facebook  are not optimised for conversions .. ie I’m spending money needlessly and with no efficiency .. and we are not talking about a few pounds here either .. we literally spend thousands a month on Facebook advertising ..

I really really need a decent & final solution to this and fast please people .. as I’m running out of patience .. is there any way I can get this to work or am I going to have to move my site to a different platform?

Kind Regards, and thank you in advance for any offerings of support        

[Kiphyl]

Hello Mike!

When adding the code are you including the <script></script> tags, <noscript> ... </noscipt> code, and the <!-- comments --> in the 'Receipt Page' tracking field? If so, I'd recommend removing those as the <script></script> tags are already added and the rest (the noscript tags and comment code) can cause issues.

I hope this helps!

[Mike- · Accepted solution]

Thanks but your solution did not work .. However .. I have formulated a fix that does actually work ..

OK, deep breath .. are you ready??

As well as pasting the new Facebook pixel code into the SEO part of weebly under Header Code, Copy the WHOLE base code again and place it in the "Custom Tracking Receipt Page" box under the section "Store" then "Set Up" section ...

You MUST leave the script tags in .. NOT REMOVE THEM AS ADVISED .. then in addition add the "Facebook Event Code" for Purchase Events exactly as illustrated in the infographic screen shot picture I have attached to the bottom of this post.. (I have removed/blanked out my Facebook account number as precaution) but the rest should be done exactly as shown .. Yes even though it clearly states "Do Not Modify" at the bottom of the code..

This shouldn’t work according to all the instructions, but it does .. I can’t seem to get the monetary value of conversions working just yet (I’m still working on this) but at least Facebook is recognising conversions and I can optimise my adverts for this event..

Also.. ignore the Facebook pixel helper error code that says it didn’t load  .. the checkout is a dynamic event and WILL indeed load once a checkout is fully completed by a customer or your test..

I would recommend following the steps above .. saving and publishing your website .. then making a test purchase .. then log onto Facebook, going to the pixel section on ads manager and checking its found the sale (this is at the very bottom of the pixel page and will be displayed as "Purchase" .. it should have a green dot to the left of it)

Hope this works for you as it did me .. I’m not a programmer and spent ,many many many frustrating hours trying to get this **bleep** code to work on my weebly site .. only my trial and error & basically ignoring all the instructions did I get it to work  eventually ..

[bibber]

I am running into same problem.  Facebook pixel installed to Weebly site.  CHECK.  But now, how get EVENT CODE installed on purchase confirmation page of weebly site?

You mentioned this as the place to put the whole pixel plus event code... "Custom Tracking Receipt Page" box under the section "Store" then "Set Up" section... but I am not sure what/where that is?

Should I just use an HTML embed element and put it at the top of the purchase confirmation page and paste whole pixel + event code into it?

[libertygrace]

Hey Mike, is this still working for you? Having the exact same issues but modifying the code doesn't seem to work!

Thanks

[EricW1]

Just followed your steps, tested it in FB, and it tracked the sale. Thanks for the tips!!

[fixit2]

why isnt the text in the photo finished. it says "Change the numberic value to" and you dont finish the sentence.

[dejadrewit]

I did what you said and it didn't work for me : ( 

[dejadrewit]

I have spent SO many hours trying to fix this. SO many days. all my facebook ads can only convert to regular pageviews and none of the checkout process. its really really frustrating and because of that i am not getting conversions cuz all FB is doing is findin me people to just click on my product.

[NGw]

Mike, you are awesome. Saved me so much time and WEEBLY really should do something about this. #noanchors

[jgweston]

Mike - you are a true SCHOLAR!

Weebly must not care much about it's eCommerce customers if they haven't addressed this problem. I was on the phone with them yesterday before finding this and they are clueless.

Your backend solution works for me as well; however, one suggestion:

In the Facebook header code that is double pasted into the Weebly Store tag area, you should delete the Facebook event code for tracking "Pageview" - as the normal header code that is in the SEO header section will count pageviews (if this isn't deleted, you will double count page views...).

This is what my code looks like (for the purchase code) and it is working for me:

---

<!-- FACEBOOK PIXEL CODE -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'USE-YOUR-OWN-FACEBOOK-ID-HERE');
fbq('track', 'Purchase', {
value: {total},
currency: 'USD'
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=292193850936125&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

---

Again, it is ridiculous that Weebly expects its users to do this. I migrated from Wordpress to Weebly for ease of use and because I liked their themes, but Weebly costs more and, if this isn't fixed, their functionality is seriously impaired.

Good luck, everyone.

[jgweston]

NOPE.. It appears, when using Facebook's new "Test Events" it appears this code change is still counting pageviews twice when using the checkout options even after deleting the pageviews event tag... but this is because Weebly goes through TWO pages (at least on the theme I am using) when the checkout is initiated.

URL: https://www.panamarocks.com/store/checkout/

URL: https://www.panamarocks.com/store/checkout/#cart

This doesn't fire if you are using a theme that intially adds to cart from the product page, but onle when the user clicks "Check Out" or whatever text the button the theme you are using contains and goes to the actual checkout page (but has not yet added payment information). Thus Weebly's "Custom Tracking - Cart Page" is more aligned with Facebook's "Initiate Checkout" event than "Add to Cart."

Fun times.

Weebly... this is ridiculous.

[dejadrewit]

I tried literally EVERYTHING and even customer support hasn't helped me. I added code to the STORE/SETUP page exactly how FB tells me to and these errors are showing me that all 3 codes are being added to the SAME PAGE, CART page instead of "payments" and "cofirmation" page. IS THIS A BUG!?! @Adam Someone please look into this! Attaching my code in the store setup page as well- however, i have tried pasting all kinds of codes here including the ENTIRE base code and Variables. and all are causing the same error. 

[Adam7]

There is more code that you need to add for those in order for it to track, I think. If you look at @Mike-'s screenshot above, you'll see that the fba('track', 'purchase'); bit is just one part of more code and not added by itself.