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