Track application form events

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 video walkthrough video transcript this is a transcript from the loom video walkthrough \[00 00] hey, this is jeff at roster in this video i'm going to show you how you can capture incoming ad clicks to your application form \[00 08] this is a scenario where you as a brand might be driving paid ad traffic to your ambassador application form on your website and you want to be able to track those, uhm, conversion events all the way through from ad view, through clicks \[00 24] through successful form submission what we've done is put in some event listeners into the application form when it's embedded into an application \[00 33] let me hit refresh here so this is an application form example that i have embedded into this sample html page \[00 41] and then i hit refresh and you can see that the event was emitted, that this form was viewed, and it tells me which for \[00 48] so you could, i could be a brand and i could be paying to have traffic come to my embedded application form on my website and then i could track that all the way through \[01 00] so, um, let's say that the ambassador then, alice jones, fills this out they click submit and now we see that the event was submitted \[01 21] so, because this event is being triggered up to the top level page where the form is being embedded, then your webpage could then handle that as a event for whatever ad network you're using or whatever analytics platform you're using and can forward that event onto them \[01 40] and that's how you could get the end to end completion of the, uh, form view and then the form submission back and trace it back to the ad click event \[01 49] so, uhm, it's pretty straightforward i'm going to view the source of this little test page that i built and you can see right here that i embedded the application form \[02 00] this comes almost essentially from coming here and clicking copy embed code and i just paste that here and then the only thing that i need to do that's not included in the original embed code is i need to add this query string parameter to the iframe url here \[02 20] i need to to do this and parent underscore origin and then i need to set this equal to the domain where i expect to, the form to be viewed \[02 30] since i'm running this on my computer, i've set it to local host but if your brand was, you know, say bellnutrition com, then you would set this parent origin equal to https colon slash slash bellnutrition com \[02 46] and that's really all you need to do do in order to get that to work and then on your parent page, you would need to have some javascript that was waiting for that event to get fired by the embedded application form \[03 00] and that logic happens here and you can do whatever you want in here pass that on to a meta, the meta pixel, pass it on to the google pixel, wherever that ad traffic is coming from \[03 11] and, uh, you should be able to use this as a reference of what the event data coming into your, uh, parent page, the parent page where that's embedded into, um, gives you an idea of what that data actually looks like so that you know how to handle it and appropriately forward it on to the, uh, ad network \[03 31] or analytics platform that you're using that's really all there is to it if you have any questions whatsoever, reach out to us \[03 39] happy to help walk you through that and hopefully this is something that adds value to your brand thanks 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 use this script to handle form view and submission events the following events are emitted form viewed (user viewed a live application form) form closed (user viewed a closed application form) submit success (user submitted to a live application form) forward the captured event data to your chosen analytics platform or ad network, such as a meta pixel or google pixel 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!