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 example javascript handlers \<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 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 support\@getroster com mailto\ support\@getroster com we're here to help!
