Embedding Customizable Form Tracking Script in Marketing Engine Landing Page

Overview:

This article shows how to embed a JavaScript snippet in a Marketing Engine landing page to send form submissions to a dynamic webhook URL.

Use Case

You want to track submissions of different forms across various landing pages, sending the collected data to different webhook endpoints. This script is configurable for each page by simply changing two variables.

Customizable Script

Paste the following code into an HTML block on your landing page:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("landingpage_form_{landing_form_id}");
    const webhookURL = "{webhookURL}";

    // List of fields to exclude from webhook
    const excludeFields = [
      "Landing Page Token"
    ];

    if (form) {
      form.addEventListener("submit", function () {
        const formData = new FormData(form);
        const payload = {};

        for (const [key, value] of formData.entries()) {
          if (!excludeFields.includes(key)) {
            if (payload[key]) {
              payload[key] = Array.isArray(payload[key])
                ? [...payload[key], value]
                : [payload[key], value];
            } else {
              payload[key] = value;
            }
          }
        }

        const json = JSON.stringify(payload);
        console.log("Filtered Payload:", json);

        try {
          const blob = new Blob([json], { type: "text/plain" });
          navigator.sendBeacon(webhookURL, blob);
        } catch (err) {
          console.error("Beacon send error:", err);
        }
      });
    }
  });
</script>

How to Use It

1. Set landing_form_id: Replace the value of landing_form_id with the actual form ID for the landing page you're working on.

2. Set webhookURL: Replace the placeholder webhook URL with your actual endpoint (e.g., Zapier, webhook.site, internal server).

3. Paste the Script: Add the complete <script> block into an HTML section of the landing page using the editor’s embed block.