Welcome to the Instapage Support Center

|

Using events to track conversions with the Facebook Pixel

Our direct Facebook Pixel integration allows you to track page view event tracking on your landing pages. Besides this, Facebook allows for custom events usage. The advantage of implementing custom events instead of the standard page view event is that you can use conversion optimization and track more efficiently. Furthermore, using custom events will allow for a more granular use of Facebook's Custom Audiences feature.

Custom conversions can be triggered either by button clicks, by form submissions or by visits to a thank you page (used as a conversion page).

Please check our article on how to connect your Facebook Pixel to your landing page.

After placing your Facebook Pixel ID on your page, follow the instructions below to set up your desired event tracking.

The code snippets will need to be placed in Settings - Javascript - Body.

javascript.png

javascript_body_.jpg

 

1. Conversions triggered by button clicks

For tracking button clicks or form submissions on your page as Facebook custom events, you will need to use the following code snippet:

<script>
window.addEventListener('DOMContentLoaded', function () {
var element = document.querySelector("#element-123 .btn");
element.addEventListener("click", handler);
function handler() {
fbq('track', 'Lead');
}
});
</script>

You will need to customize the code with your Facebook event and change the #element-ID with the corresponding element ID that you want to trigger the event. Here is how you can find the button element ID number:

button_gif.gif 

2. Conversions triggered by form submissions

For tracking form submissions as Facebook custom events, please use this code snippet:

<script type="text/javascript">
window.instapageFormSubmitSuccess = function( form ){
fbq('track', 'Lead');
};
</script>

 

If you have multiple forms on the same page, please use the snippet below. This needs to be pasted into Settings - Javascript - Body:

<script>
window.instapageFormSubmitSuccess = function( form, wid ){
if ( wid === 6 )
{
fbq('track', 'Lead');
}
else if ( wid === 7 )
{
fbq('track', 'Lead');
}
else
{
// do nothing out of a box
}
};
</script>

For this second code snippet, you will need to edit the "wid" value, which is only the digit part of the element ID. For #element-659, the "wid" value is "659".

When using the FB Pixel Helper (browser extension) to check if the pixels are firing correctly, please disable the AdBlocker extension (if the case).

3. Conversions triggered on the thank you page

You can also track conversions with a thank you page. First, create and publish a thank you page, and then set your main landing page to redirect to the thank you page.

In this case, both pages should have the Pixel ID connected through our direct integration in Settings - Analytics, according to this article.

After making sure that the pixel is connected on both pages, add this code snippet only to the thank you page, in Settings - JavaScript - Body: 

<script>
fbq('track', 'Lead');
</script>

In the code snippets above, fbq('track'  , 'Lead') is an example, but you can choose to replace it with any predefined Facebook events:

Standard Event Name

Promoted Object custom_event_type value

ViewContent

CONTENT_VIEW

Search

SEARCH

AddToCart

ADD_TO_CART

AddToWishlist

ADD_TO_WISHLIST

InitiateCheckout

INITIATED_CHECKOUT

AddPaymentInfo

ADD_PAYMENT_INFO

Purchase

PURCHASE

Lead

LEAD

CompleteRegistration

COMPLETE_REGISTRATION

 

Here's more about setting up a custom event, from Facebook: Create custom conversions using events.

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have a Professional Services team that can help our Enterprise users. The Enterprise Solution includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/enterprise-benefits

How to track events from different tracking platforms

If you need to track conversions using events from both Facebook and Google Analytics or Google Ads, you just need to add the code for that platform in the same function, instead of copying the entire code again. This is because the function only needs to be triggered once. If you use the same code with the same function twice, the second function will override the first one. You can find the content of the respective functions in the dedicated articles for conversion tracking for the other platforms, linked above.

1. For form submissions

<script type="text/javascript">
window.instapageFormSubmitSuccess = function( form ){
// insert the content of the function
// for all the desired tracking platforms here

};
</script>

2. For button clicks

<script>
window.addEventListener('DOMContentLoaded', function () {
var element = document.querySelector("#element-123 .btn");
element.addEventListener("click", handler);
function handler() {
// insert the content of the function
// for all the desired tracking platforms here

}
});
</script>

 

Have more questions? Submit a request
Was this article helpful?
2 out of 2 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!