UTM parameters are a series of five URL parameters used by marketers to track the effectiveness of online marketing campaigns across traffic sources and publishing media.
One way to record UTM parameters from visits to your web page is to pass information from the browser URL into hidden fields on a form. When a visitor to your page submits information on a form, the hidden fields are filled with the value of the UTM parameters.
Vidyard's Marketo Form integration uses the Marketo Forms 2.0 API, making it possible to fill visible or hidden fields on a form with custom data, including from query strings in the page URL. This article explains how to pass UTM parameters into a Marketo form that you've added to a video.
There are additional steps required when the Marketo form is on a Vidyard video because the parameters must first be passed into the Vidyard player, and then into the Marketo form. To do this, you will need hidden field(s) on your Marketo form, custom code added to the CTA in Vidyard, and custom code added to the page where your Vidyard video is embedded.
If you're not familiar with adding a Marketo form to a Vidyard video player, we recommend that you first learn how to add a Marketo form to your video.
Add hidden field(s) to your Marketo form
In Marketo, you will need to add hidden field(s) to your form so that there is somewhere for the values of the UTM parameters to go. You will need one for each of the UTM parameters you will be using (ie. you will need a hidden field for
utm_source, another hidden field for
Add custom code to the form CTA in Vidyard
In order to pass UTM parameters into a Marketo form on your Vidyard video, there must be a field(s) in the form that can be used to store the data, as well as some additional code added to the CTA to interact with the form, and some additional code on the page where the player is embedded.
- Create a Marketo form CTA in Vidyard.
- Paste that code into your Marketo CTA in Vidyard, making sure to paste it below the line reading
marketoHandler.form = form;and above the line reading
- Make sure to change the names of
fieldName2, etc. to match the names of the hidden fields you created in Marketo. The name of the hidden field in Marketo is the value of the Field field, found in the Properties section of the field on your Marketo form. If this value contains any spaces or underscores, remove the spaces and underscores before adding it to the code in your Vidyard CTA. For example, the value of Field below is
UTM Source, but in the Vidyard CTA we must use
UTMSource; if the value of Field was
UTM_Source, we must use
UTMSourcein the Vidyard CTA.
Add custom code to the page where your video is embedded
If your video is on a Vidyard sharing page, no additional code is needed.
If your video is embedded on your own webpage:
- Make sure you are using Vidyard's responsive embed code.
- Add jQuery to the head of your page. This is required because the code in step 4 makes use of jQuery. You can add jQuery using
- To ensure that you're using the latest version of jQuery, you can consult https://www.w3schools.com/jquery/jquery_get_started.asp
- Add an
<img>tag for your video embed code.
- Copy the code from https://codepen.io/rachel-1/pen/eYpOoee, and add it below the embed code for your Vidyard video player.
- In line 10 of that code, we obtain the player by looking for the value of the
idadded to the
<img>tag. Make sure to update the
idin the provided code to match the value of the
idin your video embed.