[How to] Set up Facebook pixel tracking for in page events (button clicks)

facebook
button
#1

community tips scripts banner

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!


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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


Option 2 - Event Handler 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>
     $('#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


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

7 Likes

#2

Super handy!! Thanks Jordan! :+1:

1 Like

#3

Super eerie I was JUST looking for this today in FB’s documentation and then this popped up in my email! Awesome @jordang thanks much!

Quick question, I’m trying to use this to track different fb events for individual questions INSIDE a multi-step form. Here’s where I’m having trouble… For this onClick method you mentioned above, I don’t know if it would be able to discern different events as the user goes through the form, since the button being clicked to trigger the different events is the “Next” button and the next button element id stays the same throughout the form instead of having different name/id as the questions/fields change.

Does my question/dilemma make sense? If there’s no way to get around this then I was thinking maybe the solution is, instead of doing a button click event, do a “trigger event based on visibility” and have each event trigger as that question appears throughout the multi-step form flow.

Any help or insight would be greatly appreciated. Thanks so much in advance, and thanks for including the script above!

2 Likes

#4

Love this,

Gotta keep it handy. I’m sure a project will come up where I want to use it! Thanks!

2 Likes

#5

Hey @snomoto88, thanks for the positive feedback :smile:

That definitely makes sense. Unfortunately, I don’t think you would be able to achieve this with the out-of-the-box scrips provided. As you mentioned, the “Next” button remains the same for each step in the multi-step form, which means that onClick tracking won’t know how to differentiate the various steps in your form. The tracking relies heavily on element metadata (like the button ID), so I don’t think we can apply it to the varying form fields :frowning_face:.

One possible solution would be adding multiple “Next” buttons to the multi-step form (Disclaimer: I haven’t attempted this, just trying to get creative with ideas, so I can’t actually speak to the difficulty or effectiveness of this). Adding multiple buttons would require you to modify the multi-step form script to show/hide the different buttons for each step of the form.

This would solve the issue of unique IDs in terms of onClick tracking for the Facebook pixel, but this would make the multistep form tracking much more complicated and conditional. If you (or any colleagues) have some development experience, it could be worth pouring a few cups of coffee and giving it a try, but admittedly I could see this getting a little bit janky.

I hope this helps! :smile:

0 Likes