How to set up the Meta Pixel and Events on your website

To track custom events on Formaloo with Facebook Pixel and set up Meta Pixel for your website, follow the step-by-step guide below.

This process allows you to monitor interactions with your forms, such as successful submissions, by using event listeners.

The guide will also show you how to install the Meta Pixel and track data on your website or sub-domain.

Set up the Meta pixel and events on your website

Go to Meta Events Manager.
Connect Data Sources:
- Click Connect data sources and select Web.
- Then, click Connect.
Create a Pixel:
- Enter a name for your pixel and click Create pixel.
- This will generate a new ID that you can view in Events Manager.
  Note: Events from your Meta pixel are shared to a dataset, which groups events from different sources. Your new dataset ID is the same as your new pixel ID. Learn more about datasets.
Verify Website Integration:
Enter your website URL to check for integration options, then click Check.
Select Data Connection Method:
Select how you would like to connect your data with Meta: Get guidance (recommended) or Do it yourself.
- Choose either Get guidance (recommended) or Do it yourself:
  - Select Get guidance if you would like setup recommendations. You can skip the rest of the instructions in this article if you select this option, and you can follow the onscreen instructions in Events Manager instead.
  - Select Do it yourself if you already know how you'd like to connect your data and don't want setup recommendations. If you select this option, follow the rest of the instructions in this article.
Select Conversions API and Meta pixel or Meta pixel only as your setup option, then click Next.
- If you select Conversions API and Meta pixel, choose how you want to set up the Conversions API and pixel: Set up with partner integration, Set up with Conversions API Gateway, or Set up manually. If you're not sure which option to choose, you can compare Conversions API setup options by cost and complexity.
- If you select Set up with partner integration, select your partner and follow the onscreen instructions to set up the pixel, Conversions API, and events.
- If you select Set up with Conversions API Gateway, follow the onscreen instructions to set up the pixel, Conversions API Gateway, and events.
- If you select Set up manually, follow the onscreen instructions to create personalized instructions to set up the pixel, Conversions API, and events. On the last screen, you'll have the option to set up the Conversions API yourself using the personalized instructions or send the instructions to a developer. If you need help creating the instructions, you can learn how to set up the Conversions API using personalized instructions.
- If you select Meta pixel only, choose how you want to set up your pixel code: Install code manually or Check for a partner.

Install the Pixel code

Go to Events Manager:
- Access Events Manager.
Select the Pixel:
- Click the Data sources icon (left-side), select the pixel that you want to set up, and click Continue pixel setup.
Select Meta pixel and click Connect.
Install the Code Manually:
- Copy the provided pixel base code and follow these steps based on your form setup:
  - For forms on a sub-domain or custom domain, replace the pixel ID with your specific ID and paste the code in the custom JS section in Formaloo’s form settings.
    
    FP custom code:
    
    <script>
    // Facebook Pixel Base Code (Replace with your actual Pixel ID)
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window,document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'PIXEL_ID');
    fbq('track', 'PageView');
    </script>
  - For embedded forms, paste the base code in the header section of your website, just before the closing head tag.
    
    FP regular code:
    
    
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'PIXEL_ID');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1335841160723318&ev=PageView&noscript=1"
    /></noscript>
    
Click Continue on the Facebook pixel dashboard.
Finalize the setup:
- Click Continue on the Facebook Pixel dashboard and enable Automatic advanced matching (optional).
- Add events using the Event Setup Tool or by manually adding code.

Steps to Track Formaloo custom events with Facebook Pixel

Track formaloo_submitSuccess event:

1- Set up event listener:

Add an event listener for the formaloo_submitSuccess event using JavaScript:

Use JavaScript’s addEventListener method to listen for this event:

document.addEventListener('formaloo_submitSuccess', function(event) {
fbq('trackCustom', 'FormalooSubmitSuccess', {
formData: event.detail // If the event has additional details
});
});

2- Add the code:

For sub-domain or custom domain forms, place the code right after the Facebook Pixel installation script in the custom JS section of your form.

Your final code should look like

<script> // Facebook Pixel Base Code (Replace with your actual Pixel ID) !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window,document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'PIXEL_ID'); fbq('track', 'PageView'); // Listen for "formaloo_submitSuccess" custom event document.addEventListener('formaloo_submitSuccess', function(event) { // Trigger Facebook Pixel custom event fbq('trackCustom', 'FormalooSubmitSuccess', { formData: event.detail // If the event has additional details }); }); </script>
For embedded forms, add the code right after the installation code in your page’s header.

3- Verify the tracker in the Facebook dashboard:

Go to Facebook Events Manager: Facebook Events Manager.
Select your Pixel: Choose the Pixel you are using for tracking.
Test Events:
- Navigate to the "Test Events" tab.
- Open your form in a new tab and trigger the formaloo_submitSuccess event. (submit your form and if you see the ending page it means the form was submitted successfully).
- Return to the Events Manager tab, and you should see the event (FormalooSubmitSuccess) listed under "Test Events" in real-time.
You can also view event history under Data Sources > Overview. In the Events Manager, you can see the list of all events tracked, including custom events like FormalooSubmitSuccess.

For more help with verifying the trackers or adding built-in options, check out the Facebook Pixel documentation.

How to track custom events in Formaloo using JavaScript

How to track Formaloo form Events with Google Analytics