META Pixel Injection on Landing Pages with Form

Overview:

META Pixel injection on a landing page that contains a form serves several important purposes related to tracking, analytics, and performance optimization for marketing efforts. Here's a detailed breakdown:

Primary Purpose of META Pixel Injection

1. Conversion Tracking

The META (formerly Facebook) Pixel allows you to track form submissions as conversions:

• When a user fills out and submits the form, the pixel fires an event (e.g., Lead, CompleteRegistration, or a custom event).

• This helps you determine how effective your Facebook or Instagram ads are at driving actions on your site.

2. Event-Based Behavior Insights

• Pixel tracks events like PageView, ViewContent, and SubmitForm.

• You get data on:

  • How many users reached the form page

  • How many interacted with the form

  • How many completed it

• This allows you to calculate form drop-off rates and user engagement levels.

3. Build Custom Audiences

• Injecting the pixel lets you retarget visitors who:

  • Visited the page but didn’t submit the form

  • Partially completed the form

  • Showed high engagement but didn’t convert

• You can create Lookalike Audiences based on those who did convert.

4. Ad Delivery Optimization

• Facebook’s ad algorithm uses pixel data to optimize delivery toward people more likely to take the desired action (form submission).

• This is especially helpful when using conversion-based bidding.

Implementation

Here’s a step-by-step guide on how to generate a Meta Pixel and use it to track form submissions on your landing page:

1. Embedding the Meta Pixel

• Go to Events Manager directly Visit: https://business.facebook.com/events_manager2/
• Choose the Correct Business Account (Top left dropdown: select the business you’re working under)

• Click "Connect Data Sources" You’ll find this on the left panel or top right of the Events Manager dashboard.

• Select "Web" and choose the following option.

• Select Meta pixel only

• Give your Pixel a name (e.g., "Satisfi Labs Landing Page <Event Name> Pixel") and click Continue

• You’ll receive a Pixel ID and a code snippet

• In the Satisfi Labs Marketing Engine Landing Page builder, add an HTML code block and add the code snippet.

2. Tracking the form submissions

When someone fills out a form on a website — for example, to enter a sweepstakes at a Phish concert or sign up for event alerts — marketers often want to track that action as a "conversion" in Meta’s ad ecosystem.

To be able to track the form submissions and pass the data for tracking, we need to add another HTML code block below the previous one and add the following code:

<!-- Load SHA-256 Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      const form = document.getElementById('landingpage_form_{form_id}');
      if (!form) {
        console.warn("❌ Form with ID 'landingpage_form_{form_id}' not found.");
        return;
      }

      console.log("✅ Form found. Attaching Meta event listener...");

      form.addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent immediate reload so logs & fbq can run

        const formData = new FormData(form);

        // Extract values
        const email = (formData.get("Email") || "").trim().toLowerCase();
        const rawPhone = formData.get("Phone") || "";

        // Get the country code label text (e.g. "+1")
        let countryCode = "";
        const countrySelect = document.getElementById("select_landingpage_form_{form_id}");
        if (countrySelect && countrySelect.selectedOptions.length > 0) {
          const selectedOption = countrySelect.selectedOptions[0];
          const labelText = selectedOption.textContent || "";
          const match = labelText.match(/\(\+?(\d+)\)/);
          if (match) {
            countryCode = "+" + match[1];
          }
        }

        // Clean phone number and combine with country code
        const cleanedPhone = rawPhone.replace(/\D/g, '');
        const fullPhone = countryCode + cleanedPhone;

        // Hashing
        const hashedEmail = CryptoJS.SHA256(email).toString();
        const hashedPhone = CryptoJS.SHA256(fullPhone).toString();

        console.log("🔒 Hashed Email (em):", hashedEmail);
        console.log("🔒 Hashed Phone (ph):", hashedPhone);

        // Fire Meta Pixel Lead event
        if (typeof fbq !== 'undefined') {
          fbq('track', 'Lead', {
            content_name: '{Event name or a meaningful form tracking name}',
            content_category: 'Satisfi Labs Marketing Engine',
            status: 'submitted',
            user_data: {
              em: hashedEmail,
              ph: hashedPhone
            }
          });
          console.log("📤 Meta Lead event fired with hashed user_data!");
        } else {
          console.warn("⚠️ fbq not defined — Meta Pixel may not be loaded.");
        }

        // Allow form to submit after short delay
        setTimeout(function () {
          form.submit();
        }, 300);
      });
    }, 1000);
  });
</script>

form_id can be copied from the landing page builder screen as follows:

Events will show up as below on Facebook’s end.

Why Meta Requires Hashing

Meta (and other platforms like Google Ads) require you to:

• Hash personally identifiable information (PII) like email and phone using SHA-256 before sending

• This protects user privacy and ensures you're not transmitting raw user data through browser requests

Meta then:

• Internally compares the hash to what it already knows about the user

• If it finds a match (via the user's account data), it can attribute the conversion