# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.satisfilabs.com/resource-center/marketing-engine/templates-and-landing-pages/landing-page-template-with-a-form/meta-pixel-injection-on-landing-pages-with-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.