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


  • Team Lead, Service Support @ Unbounce
  • 10 replies

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!


🚨
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?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


16 replies

Userlevel 7
Badge +1

Super handy!! Thanks Jordan! 👍

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!

Userlevel 5

Love this,

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

Hey @snomoto88, thanks for the positive feedback 😀

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

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! 😀

I can’t seem to get this to work if the form appears in a lightbox. Any help here would be much appreciated!

Hey @Dara_Phrakaysone ,

Thanks for the reply!

Do you have the Facebook pixel base code and the code from this Community post installed in the Lightbox? The Lightbox is loading in an iframe (almost like a separate page), so it will require that you install the code directly into the Javascripts section of the Lightbox.

Let me know if that helps 🙂

Hi Jordan,

Thanks for the speedy reply!!

I did manage to figure it out! On the actual form pop up, I was planning to track leads on the button click - tried both methods you listed and couldn’t figure it out (despite placing the base code on the pop up.

However, I realised I could track a conversion on the thank you confirmation dialogue, so I added a line within the base code itself. It seems to be working, but would you know if there will be any implications of this method?

Thanks!

Hey @Dara_Phrakaysone,

Great to hear! So just to confirm, you’re tracking the the conversion on the form confirmation dialog instead of the button click from the form? If so, that’s definitely what I would recommend as the most reliable method.

This community post is actually intended for tracking button clicks on the page that are not tied for a form submission (i.e. a link to an external page). I would advise against tracking clicks on a forms ‘submit’ button, because someone might click that without fully completing the form, and that could mess up your data.

Here is a full article on tracking form submissions on the form confirmation dialog:

Hope this helps 🙂

Hey, will this work for image link and text link clicks as well using the ID of those in place of the button IDs?

Thanks!

Hey @hyperboost,

Thanks for reaching out!

This should work for image/text links just like it does with buttons. That should still function like a button click since it’s a similar click-event in the page, but admittedly, it’s not something that I’ve actually tested. I would recommend plugging in the ID to an image or text element to see if that fires for you 🙂

Let me know if you have any other questions!

Hello,
I am having difficulty getting this to fire. I set it up for just a single button click to track as ViewContent however, the pixel won’t fire when the button is clicked. The PageView fires fine, its the button click that will not. Any chance someone can take a look and see what I am doing wrong?

Thanks

https://www.consumerawards.org/top-health-insurance/

Hey @hyperboost,

It looks like this issue might be related to a missing jQuery library. The code that I provided in this community post is actually written with jQuery framework, so it’s essential that you load a relevant code library (jQuery 1.4.2) for it to function.

image

Let me know if that helps out 😀 I’m also going to update the article to that other folks know that a jQuery library is required.

Respectfully,

Hi Jordang,
Thanks for the response! I checked the JQuery library button and republished, but it is still not tracking the button click as a ViewContent event (I set up the code for that). Is there an additional step I am missing? Do I have to do something with the JQuery (1.4.2) script?

Thanks! FYI I have ZERO programming skills so perhaps I need to hire someone for this? Not sure, any suggestions you have would be very helpful.

Best,
Jared

Sorry for the slow reply Jared!

I would recommend trying the event handler method for the ViewContent event (option 2 in the instructions above). I’m looking at Facebook’s Pixel Helper (browser extension) and it does the show the ViewContent event, but giving an unfortunately vague error message about the issue.

Hopefully that gets things squared away for you, but if you are looking to hire some help, you can certainly drop a request in Unbounce’s job board. This is a great place to connect with some Unbounce power users and digital marketing experts 😀

https://community.unbounce.com/c/job-board

Respectfully,

hi @jordang we could probably update this page https://documentation.unbounce.com/hc/en-us/articles/208259496-Integrating-with-the-Facebook-Pixel and add a little bit more information on step 2

“When pasting the Facebook Pixel script into your Form Confirmation Dialog javascript section, make sure you adjust the 12th line of code if you don’t want to see a page view event when the FCD loads. Change the value to fbq(‘track’, ‘Lead’) if the FCD indicates that someone has become your business leads”

I personally did it here https://www.loom.com/share/e433f37cf91143899ef2dc4bd4015e49 and tested the method here https://www.loom.com/share/8929391dd2d84d5cb80b102067216f25

I took this page https://www.facebook.com/business/help/402791146561655?id=1205376682832142 as the reference

Let me know if it makes sense. I think it will help a lot of us whose conversion tracking relies on the FCD showing up after a form submission is successful.

Thank you

Best,
Nito

Hi Dara,

I’m trying to do the same, would you be able to help me on this ?

Reply