How do I pass UTM parameters into the Marketo form that I added to my video?

Disclaimer: This article is provided for instructional purposes only. Vidyard does not support or guarantee the code. Vidyard also cannot offer support for third-party tools and platforms or technologies such as JavaScript, jQuery or CSS

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 utm_campaign, etc.)

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.

1. Create a Marketo form CTA in Vidyard.
2. Copy the JavaScript code from this example: https://codepen.io/rachel-1/pen/NWGKmqP
3. 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 form.onSubmit(function(form) {
   
4. Make sure to change the names of fieldName1, 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 UTMSource in 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:

1. Make sure you are using Vidyard's responsive embed code.
2. 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 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>.
   • To ensure that you're using the latest version of jQuery, you can consult https://www.w3schools.com/jquery/jquery_get_started.asp 
3. Add an id to the <img> tag for your video embed code.
4. Copy the code from https://codepen.io/rachel-1/pen/eYpOoee, and add it below the embed code for your Vidyard video player. 
5. In line 10 of that code, we obtain the player by looking for the value of the id added to the <img> tag. Make sure to update the id in the provided code to match the value of the id in your video embed.