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.
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:
