Divi is an all around great theme. It’s simple enough for clients to use and dynamic enough to still fit the needs of a working agency. I’m always impressed by the neverending emails announcing exciting updates and new templates. It’s apparent that the Elegant Themes team listens to their customers and seeks to create a great product.
Needless to say, Divi does have its shortcomings. Adding advanced functionality to buttons isn’t quite as easy because they exist in the theme as a stylized tag. The Facebook code to track an event on an inline function requires pasting the code to the HTML element for the desired button. This is not possible to achieve using the essential features of the Divi button module.
The other option would be to paste the code on the page that loads upon clicking the button. If you have access to the body code of that page, simply insert the Facebook code for the event you would like to track.
If you don’t have access to that page ie the button links to a third party store page or ticket vendor, you’ll need to follow this tutorial to get your event codes up and running.
First, we need to apply a custom CSS code to the button module.
I set my CSS ID to fb_pixel_initiatecheckout. You can choose how to label these. It just needs to be something you remember. If you want to use my system, these would be the IDs facebook could track:
fb_pixel_ViewContent
fb_pixel_Search
fb_pixel_AddToCart
fb_pixel_AddToWishList
fb_pixel_InitiateCheckout
fb_pixel_AddPaymentInfo
fb_pixel_Purchase
fb_pixel_Lead
fb_pixel_CompleteRegistration
Once you’ve set the CSS ID for the button you want to track, go into Divi Theme Options from your WordPress dashboard and click on the Integrations tab. In the section, we will place the following code:
It should look like this:
This code will trigger anytime the button with the assigned CSS ID is clicked. Be sure to replace the ID on line 4 to match the ID you used in your button module.
Need help getting this setup? Our team can help. Just reach out to us and we’ll get back to you as soon as possible.
Hi, I can’t seem to trigger the event, i.e. it’s not showing up in my Event tracker. I used the Lead event instead the example one. Check Loom video here: https://www.useloom.com/share/5b041154256c440e90d86be8726fe42f
Same problem, did you manage to fix it?
Great tutorial… Although – your jquery is referencing a class – not an ID… So this syntax will not work.
You’re absolutely right. I’ll have to update the tutorial. Thanks!
Isn’t “id” assigned by #?
It looks like you have a class assigned.
I’ll be updating the tutorial soon. Thanks for the heads up.
I found another way! It is very convenient to use for this Google Tag Manager!!! To do this, you need to create a class variable, then create a trigger with the name of the button class, and then create a tag with a code from Facebook and select the previously created trigger for it :))
Hey WhyL could you give a breakdown on exactly how to do your method for a noob like me..? 😊
It’s a great recommendation. We’ll work to post a tutorial using WhyL’s method over the next couple of days.
Hi Mitch, any time frame on an update? Struggling to get this working.
Just updated the article. Let me know if you still have questions.
Thanks Mitch, have you updated the tutorial? What would be the correct syntax?
I just updated it with the correct syntax.
Facebook now has a very easy tool to add the pixel events to your website. It recognizes automatically buttons on your website and you can just make an event by clicking on the button you want to track.
MITCH. CLARKE. YOU NINJA. Thank you so much for this – it’s working amazing and I feel like a tech goddess that I got this set up and working. A massive thank you for being today’s GOAT. You rock!
Stephanie, you’re so welcome! Glad I could help.