Adding The "Add To Cart" Facebook Pixel Event To Your Store

omktg

Active Member
CLICK HERE FOR THE UPDATE: Adding Your Facebook Pixel and Track Pixel Events OnClick on your store tutorial

Hey Guys,

Last week, I created a tutorial on how to install the Facebook pixel in your Alidropship themes. Since that day at least 4 people have asked me how to install the Add To Cart event, since I did not include it in the tutorial.

If you have not read it yet, here it is:
Adding The Facebook Pixel To Your Alidropship Theme [Part 1]
Adding The Facebook Pixel To Your Alidropship Theme [Part 2]

The reason why I did not include it, was because it is necessary to know a bit of JS coding in order to make it work [it's possible to do it by doing some research on google], and because you dont need it to run a campaign on Facebook, you can always optimize your ad delivery for ViewContent and Initiate Checkout before optimizing for Purchase. All of this is a little advance, and i suggest you guys, to learn everything you can about Facebook before buying traffic there. because if not, you can loose a lot of money.

Here is a place to start learning for free:
https://www.facebookblueprint.com/student/catalog

That been said, this is the code Facebook provides for click events:

<!-- fbaddtocart -->
<button id="addToCartButton">Add to Cart</button>

<script type="text/javascript">
$( '#$addToCartButton' ).click(function() {
fbq('track', 'AddToCart');
...
</script>
<!-- fbaddtocart -->

The code above tell us, that our button must have a unique ID, in that example named addToCartButton, but even if you install this in your store footer, it won't work. The reason is because Michelangelo and Rembrandt dont use IDs, just classes for the Add to Cart Button. And the other issue is that WordPress does not recognize [$] as a JS function.

But there is a solution for everything.

I have fixed that code, and test it on Michelangelo, and works perfectly, just install it in your store footer [your store>customization>footer>footer tag container]:

<!-- addtocart by omktg -->
<script type="text/javascript">
jQuery( '.btn.addCart' ).click(function() {
fbq('track', 'AddToCart');
});
</script>
<!-- addtocart by omktg -->

As you can see there, i have replaced the $ with jQuery, to make it work in WordPress without conflict, and i also replaced #$addToCartButton with .btn.addCart that are the classes used for the Add to Cart button in the Michelangelo/Rembrandt themes.

This should work for any theme you are using, but is your responsibility to test, just change the classes of that code, with the classes your button has. and if your button has an ID then it is easier, just replace that text with your button or html element ID, for example in Raphael/Davinci it is #addToCart

That is it guys, now you can track your add to cart clicks. But remember, if you want to run ads on Facebook, all this was something that you should already know.

A big part of being successful in this type of business, is being curious, and having the ability to search everything you don't know on your own, in google, or anywhere else, as always, no matter how much you know, there will be problems that you will have to solve on your own.

That been said:

This code is not going to create product catalogs like the Facebook Business Addon does. I have not tried the Addon yet, but please @Ekaterina Sayapina correct me if i am wrong.

The Addon will create a product catalog that you can then upload to your Facebook add account, it will also allow you to set automatic updates, plus it is compatible with WooCommerce too.

If it does all of the above, it means that with that Addon it will be easier to retarget your users using Facebook ads, because you can show them the exact products they visited before, without having to create a new campaign/addset.

So maybe that Addon is a good investment, if you have already traffic that is not converting, or if you are planning to bring sales by retargeting your store visitors. You can check out the Addon here, to see all its features and benefits.
 
Last edited:
  • Like
Reactions: Kop

omktg

Active Member
Hey guys,

Please remember that this is an onclick event, so in all your pages it will be red when you view it in the FB pixel helper.

What you need to do to test it is to click your add to cart button, and look how it turns to green on your FB pixel helper.

The event only loads when you click on your targeted element. In this case, your add to cart button.
 

nardog03

Member
Hey guys,

Please remember that this is an onclick event, so in all your pages it will be red when you view it in the FB pixel helper.

What you need to do to test it is to click your add to cart button, and look how it turns to green on your FB pixel helper.

The event only loads when you click on your targeted element. In this case, your add to cart button.
Hey brother I just want to say thank you again. I tried it and it works 100% thank you soo much brother :)
 

Dimitriy Strekalov

Administrator
Staff member
Dear clients, please note, that the method of manual Pixel installation to Footer may not be compatible with the Facebook Business Add-on Pixel installation method. In other words, you should always use only one method - either manual installation metod, or Facebook Business Add-on installation method. In case you use both methods at a time, it may cause errors in Pixel events firing. Anyway, we highly recommend to use our Facebook Business Add-on for Pixel installation as a more convenient and stable method.
 

ferronf

New Member
DaVinci 2.0 theme supports button id and my button id is... id="addToCart"..

So do I modify the code like this?

<script type="text/javascript">
jQuery( '.btn.addToCart' ).click(function() {
fbq('track', 'AddToCart');
});
</script>

Is that correct? Should it be
jQuery( '.btn.addToCart' ) or
jQuery( '.addToCart' ) ?
 

omktg

Active Member
DaVinci 2.0 theme supports button id and my button id is... id="addToCart"..

So do I modify the code like this?

<script type="text/javascript">
jQuery( '.btn.addToCart' ).click(function() {
fbq('track', 'AddToCart');
});
</script>

Is that correct? Should it be
jQuery( '.btn.addToCart' ) or
jQuery( '.addToCart' ) ?


Hi,

Here is how to get your Element, ID and Classes correctly:

So for your theme would be:

<!-- fbaddtocart by updatedreview -->
<script type="text/javascript">
jQuery( 'button#addToCart' ).click(function() {
fbq('track', 'AddToCart');
});
</script>
<!-- fbaddtocart by updatedreview -->

Always remember, elements are alone [button], IDs start with # [addToCart], and Classes with a . [.js-addToCart]

But, for this example you dont need to use the class or classes, because you already have the ID, and IDs are unique in HTML elements.

I dont know why you changed the default Facebook event in your example, that shouldn't be changed.
jQuery( '.addToCart' ) NO
fbq('track', 'AddToCart') YES
 
Top