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.
Vidyard's integration into Marketo provides a mechanism to push your video view data. It also collects the identification of the viewer for use in the Vidyard's Contact Center. This allows you to understand how much of your content is being watched and by whom. What it doesn't tell you is how the viewer engaged with the Action content, and on which videos.
Using Vidyard Actions, you will be able to present options (a.k.a. 'Calls To Action' or CTAs) to the viewer during playback. This can be anything from a link to another page, a 'Request a Demo' button or a 'Choose Your Own Adventure'. You could even ask for an opinion on the content such as 'Did this help' or 'Did you like this video'.
Once you have Action information available in Marketo, you can start to:
- Segment your viewers.
- Set up scoring rules that relate to their behaviour.
This article assumes that you have already collected their identification via a form. Therefore, there is a contact/lead/prospect record to pass the information into.
Solutions
There are two methods that you can use to track Actions in Marketo. Either through a 'Clicked Link' activity, or a Custom Field.
If you are only looking to track clicks to external pages, the most simple way is to show a 'Clicked Link on Webpage' activity:
Another option is to use a Marketo custom field on a contact record and a hidden related form field in the Action. With some scripting (examples in the steps below), you can collect contextual information.
The below example shows the viewer 'Registered' on a video called '3minSample'.
Track Clicked Links in the Activity Feed
<script type="text/javascript">
var setupMarketoCTA=function(){function i(){API.marketo&&API.marketo.cookie&&(document.cookie="_mkto_trk="+decodeURIComponent(API.marketo.cookie)),n.form&&API.marketo&&API.marketo.cookie&&(n.form.addHiddenFields({_mkt_trk:decodeURIComponent(API.marketo.cookie)}),n.form.onSubmit(function(o){o.vals({_mkt_trk:decodeURIComponent(API.marketo.cookie)}),API.closeCta()})),window.history&&API.marketo&&API.marketo.cookie&&(uri=a(window.location.href,"mkt_tok",API.marketo.cookie),window.history.replaceState({path:uri},"",uri))}for(var n={form:null,onFormLoad:[]},a=function(o,e,t){var r=o.indexOf("#"),i=-1===r?"":o.substr(r);o=-1===r?o:o.substr(0,r);var n=new RegExp("([?&])"+e+"=.*?(&|$)","i"),a=-1!==o.indexOf("?")?"&":"?";return(o=o.match(n)?o.replace(n,"$1"+e+"="+t+"$2"):o+a+e+"="+t)+i};0!==n.onFormLoad.length;){var o=n.onFormLoad.shift();"function"==typeof o&&o()}function d(){n.formLoaded||(loadForm(n),n.formLoaded=!0)}window.addEventListener("associateVisitor",function(){if(API.marketo&&API.marketo.cookie){if(null!==window.frameElement.id)try{for(var o,e=parseInt(window.frameElement.id.split("_")[2],10),t=vyContext.player.chapters_attributes,r=0;r<t.length;r++)t[r].id===e&&(o=t[r].video_id);void 0!==o&&(uri=a(window.location.href,"video_id",o),window.history.replaceState({path:uri},"",uri))}catch(o){window.console&&console.log("Could not set video id referrer for Marketo",o)}n.form?i():(i(),n.onFormLoad.push(i),d())}}),window.setTimeout(d,100)};document.addEventListener("DOMContentLoaded",setupMarketoCTA);
</script>
Custom Fields with Action variables
Using a hidden Marketo form on the Action and some additional code, you will be able to simultaneously send information about what the viewer clicked on into a Custom Field in Marketo which will appear on the Activity Log on the contact record. This field can be overwritten by new interactions within Actions, or you can decide to set up a custom field for a specific Action. This will allow you to continue to see whether the contact ever completed that action without looking at Activity History, or adding them to lists.
Steps
1. Create a custom field in Marketo. Call it 'Vidyard Event'
2. Now create a form that will be used to pass the information into in the Action. This should only contain the 'Vidyard Event' custom field. Do not worry about the style of this form, as it will be hidden.
3. Once the form is created and saved, head back into Vidyard and create a new Marketo form:
4. Enter your form ID and server name into the box when prompted. This can be found in the Embed Code option for the form in Marketo.
5. When you have the pre generated HTML available, we will now need to add an additional style to hide the form and set up the mechanism to pass data into Marketo.
<style>
.form-container{display: none;} /*This hides the form*/
</style>
<!-- Create or insert the HTML code for the form here -->
<script>
var video_tag = vyContext.player.chapters_attributes[0].video_attributes.name; /*This provides the video name of where the Event is displaying*/
$('Class or ID').click(function(){
$('#vidyardEvent').val("Some Information on Video: " + video_tag);
$(".mktoButton").click();
})
</script>
6. After you have added your custom HTML, you will know the class or ID of the elements that need to be tracked. For example, if you want to track the clicks of a 'Register Now' button in the '.button' class, then the code would look like this.
<style>
.form-container{display: none;}
</style>
<a href="https://www.thispage.com" target="_blank"><button class="button">Register Now</button></a>
<script>
var video_tag = vyContext.player.chapters_attributes[0].video_attributes.name;
$('.button').click(function(){
$('#vidyardEvent').val("Registered on Video: " + video_tag);
$(".mktoButton").click();
})
</script>
Note: In jQuery, a class will begin with a '.' and an ID will begin with a '#'. You can use either as part of the 'click function', or use a generic 'a' reference, so that any hyperlinks will be recorded.