Would you like to track in page events (i.e. button clicks) with your Facebook Pixel? JavaScript is coming to the rescue!
Hint: Check out Facebook’s documentation on in page events.
Instead of editing the HTML of a button, we’re going to use JavaScript to track events that occur on the page. Below we’re going to share two different options that will essentially do the same thing, so the choice is up to you!
🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
Option 1 - onClick Attribute Method
Step 1. Open Javascripts tab
Click the “Javascripts” tab at the bottom of your landing page
Step 2. Add the code snippet
Insert the following code snippet and save the code
<script>
$('#lp-pom-button').attr("onClick", "fbq('track', 'Purchase');");
</script>
Hint: Make sure you update the Button ID and Facebook Event you want to track!
Step 3. Check the placement
Ensure that your code snippet is placed after the Facebook pixel base code
Step 4. Is jQuery installed?
If you don’t already have a jQuery library installed on the page, then you will need to add one. You can add a new Javascript and copy+paste the code below. Set the placement to “Head” 😀
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Option 2 - Event Handler Method
Step 1. Open Javascripts tab
Click the “Javascripts” tab at the bottom of your landing page
Hint: Make sure you select the checkbox beside jQuery 1.4.2 or add your own jQuery library!
Step 2. Add the code snippet
Insert the following code snippet and save the code
<script>
$('#button ID').click(function() {
fbq('track', 'Purchase');
});
</script>
Hint: Make sure you update the Button ID and Facebook Event you want to track!
Step 3. Check the placement
Ensure that your code snippet is placed after the Facebook pixel base code
Step 4. Is jQuery installed?
If you don’t already have a jQuery library installed on the page, then you will need to add one. You can add a new Javascript and copy+paste the code below. Set the placement to “Head” 😀
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Want to take your Unbounce landing pages + Convertables
to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks
