Track "Add to Cart" button clicks on Product pages with Facebook pixel

[JessicaC3]

Has anyone been able to track button clicks using the Facebook pixel on Product pages? I want to track whenever someone clicks my "Add to Cart" buttons. 

The event code for the Facebook pixel comes in two flavors, one to be sent on page load by pasting into the header section and one to be sent on inline actions. The second is what's supposed to track button clicks but I can't figure out what to do with it. There's no header sections to edit for the Product pages that I can find. 

[Adam7]

Do you have a link to the instructions from Facebook, @JessicaC? It might help to see those and what the code looks like they have you add.

[JessicaC3]

Hi @Adam, thanks for getting back to me. 

I was following a guide in my Facebook account view, but I found these instructions on Facebook, which are close but don't specifically mention the inline event code: https://www.facebook.com/business/help/952192354843755?helpref=faq_content#addeventcode

Here's a screen shot from the dialog box I was follwoing on how to paste in the event code:

[Wally2]

I have exactly the same issue here... Trying to install a FB inline event pixel on a button click on my site... Would be great if you could help us @Adam

[Adam7 · Accepted solution]

Ok, thanks for the additional info. I'm assuming that there's a separate bit of code that goes with this that they wanted added to the Header area, right? The code below should work if you add it to the long description area of a product page with the embed code element. You'll want to edit the value and content ID to something appropriate for that particular product. I updated the code you had so it's using the correct add-to-cart button ID.

<script type="text/javascript">
 jQuery("#wsite-com-product-add-to-cart").click(function() {
 fbq('track', 'AddToCart', {
 content_ids: ['1234'],
 content_type: 'product',
 value: 2.99,
 currency: 'USD'
 });
 });
</script>

[JessicaC3]

Thank you @Adam it worked! 

I was missing the correct add to cart button ID so it wasn't registering my clicks before. You are correct, the Facebook base pixel code is needed along with the event script you supplied. I pasted both into an embed code box at the top of my long description area on my product pages and tested it out. Now my clicks are registering in Facebooks Ad Managment Pixel center.

[Adam7]

Awesome! Glad to hear it's working.

[Jazz2]

Hi Adam/ Jessica,

I was wondering if you could help me.

I have been having similar problems. I  think i'm getting lost slightly with your instructions.

This is what I'm doing:

1. I have the Facebook base pixel code (NB: I've just replaced my pixel code with 00000s)

<!-- 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', '0000000000000000'); // Insert your pixel ID here.

fbq('track', 'PageView');

</script>

<noscript><img height="1" width="1" style="display:none"

src="https://www.facebook.com/tr?id=0000000000000000&ev=PageView&noscript=1"

/></noscript>

<!-- DO NOT MODIFY -->

<!-- End Facebook Pixel Code -->

2. I have Adam's code:

<script type="text/javascript">
 jQuery("#wsite-com-product-add-to-cart").click(function() {
 fbq('track', 'AddToCart', {
 content_ids: ['1234'],
 content_type: 'product',
 value: 34.99,
 currency: 'GBP'
 });
 });
</script>

I've edited the value and currency to reflect my product details ((Highlighted in red in your code above)

I'm not sure when you say in your instructions edit ontent ID? does this remain as above or needs to be changed to?

3. This where I get lost 😞 When you say:

"The code below should work if you add it to the long description area of a product page with the embed code element"

What doies this exactly entail doing?

Where is the long description area of a product page?

Any help would be much appreciated.

Thanks in advance.

Jazz

[Adam7]

No problem, @Jazz. In the code I gave, the content ID option is 1234, which you'll need to change to something unique to the product you want it to work with. The long description area for a product is on the page for the product itself when you view it in the editor. Navigate to editing your product on the store tab in the editor, then click the "go to product page" button. That should load the product page where you can drag an Embed Code element to the page and add the code I gave to it.

[flower1]

So, I understand the Facebook Pixel. However, it seems to stop there with Weebly. I need to create a product feed (algo) so I can add it to my product catalog on Facebook. You know, when someone visits my site, and then leaves without buying? Therefore, so I can target market them directly on Facebook. HOW CAN THIS BE DONE WITHIN WEEBLY?