# META Pixel Injection on Landing Pages with Form

## Overview: <a href="#introduction" id="introduction"></a>

**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** <a href="#id-1.-conversion-tracking" id="id-1.-conversion-tracking"></a>

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** <a href="#id-2.-event-based-behavior-insights" id="id-2.-event-based-behavior-insights"></a>

* 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** <a href="#id-3.-build-custom-audiences" id="id-3.-build-custom-audiences"></a>

* 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** <a href="#id-4.-a-d-delivery-optimization" id="id-4.-a-d-delivery-optimization"></a>

* 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 <a href="#implementation" id="implementation"></a>

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 <a href="#id-1.-embedding-the-meta-pixel" id="id-1.-embedding-the-meta-pixel"></a>

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

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FNC7A8KTLlxUjPALQmmHT%2Fimage.png?alt=media&#x26;token=aa9e98e2-56db-48ee-b7d6-73c686d03884" alt=""><figcaption></figcaption></figure>

* Select Meta pixel only

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FVji6RjIgde9fyVVw48se%2Fimage.png?alt=media&#x26;token=374024bc-3e1e-43da-9798-90b567ead545" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F55eA82icbfN2ibO3AsXQ%2Fimage.png?alt=media&#x26;token=6afdebe6-6bfa-42f7-bdcb-9c4f9de5f619" alt=""><figcaption></figcaption></figure>

### 2. Tracking the form submissions <a href="#id-2.-tracking-the-form-submissions" id="id-2.-tracking-the-form-submissions"></a>

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:

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F4TKvsACqdfrNMQeBeTyE%2Fimage.png?alt=media&#x26;token=9f354e3a-1fdc-437a-8820-7bf0769484d6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FHkaLHNQuqf7Yfsjn3ekP%2Fimage.png?alt=media&#x26;token=9362f296-583a-4644-90bb-d16a279bf422" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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**
  {% endhint %}