Track application form events

3 min

Capturing incoming ad clicks to your ambassador application form on your website is essential for tracking conversions from ad view through successful form submission. With Roster, you can use event listeners to track these conversion events when the application form is embedded into a website. This allows brands to seamlessly connect ad traffic with form submissions and pass this data to ad networks or analytics platforms for comprehensive tracking.

You can download this reference HTML file for context when following the instructions below. Just be sure to set the correct parent_origin URL parameter if your are running the HTML file on your local host.

Step-by-step instructions

Embed the application form

Navigate to the desired program in Roster

Open the program's settings

In Recruitment > Application form click Copy > Copy embed code to copy the HTML required to embed the form.

Paste the embed code into the HTML of the web page where you want to display the form.

Modify the embed code with query string parameter

Locate the iframe URL in the embed code.

Add the query string parameter parent_origin.

Set parent_origin equal to the domain where the form will be viewed. For example:

For local testing, set to localhost.

For a brand's domain, use https://yourbrand.com.

Set up event handling in your parent page

Include JavaScript in the parent web page to listen for events from the embedded form (see example script below).

Use this script to handle form view and submission events. The following events are emitted:

form_viewed (user viewed a live application form)

submit_success (user submitted to a live application form)

form_closed_viewed (user viewed a closed application form)

Forward the captured event data to your chosen analytics platform or ad network, such as a Meta Pixel or Google Pixel.

Example Javascript handlers to include in the parent web page:

 <script>
    window.addEventListener("message", function (event) {
      // Only handle messages from the Roster application form
      if (!event.data || event.data.source !== "roster:app-form") return;

      var type = event.data.type;       // "form_viewed", "form_closed_viewed", or "submit_success"
      var formName = event.data.formName; // Name of the application form
      var formKey = event.data.formKey;   // Unique key for the form

      switch (type) {
        case "form_viewed":
          console.log("Application form viewed:", formName);

          // Meta Pixel example
          // fbq("trackCustom", "ApplicationFormViewed", { form_name: formName });

          // Google Ads example
          // gtag("event", "conversion", { send_to: "AW-XXXXXXXXX/XXXXXXXX" });

          break;

        case "submit_success":
          console.log("Application submitted:", formName);

          // Meta Pixel example
          // fbq("track", "Lead", { content_name: formName });

          // Google Ads example
          // gtag("event", "conversion", { send_to: "AW-XXXXXXXXX/XXXXXXXX" });

          break;

        case "form_closed_viewed":
          console.log("Closed form viewed:", formName);
          break;
      }
    });
  </script>

Example event data:

  form_viewed — visitor opens a page with an active application form embedded:
  {
    "source": "roster:app-form",
    "version": "1.0",
    "type": "form_viewed",
    "formKey": "a1b2c3d4",
    "formName": "Fall 2026 Ambassador Program"
  }

  submit_success — visitor successfully submits the application:
  {
    "source": "roster:app-form",
    "version": "1.0",
    "type": "submit_success",
    "formKey": "a1b2c3d4",
    "formName": "Fall 2026 Ambassador Program"
  }

  form_closed_viewed — visitor opens a page where the form is embedded but the form is currently closed:
  {
    "source": "roster:app-form",
    "version": "1.0",
    "type": "form_closed_viewed",
    "formKey": "a1b2c3d4",
    "formName": "Fall 2026 Ambassador Program"
  }

Test and verify

Refresh the parent page to ensure the form is embedded correctly.

Monitor console logs to verify that form view and submission events are being captured and sent to the specified analytics platform.

Need help?

If you need any additional assistance with with your Roster account, feel free to contact our support team at [email protected]. We're here to help!