How to create tracking embeds for your web page

Vidcaster video playback pages can be formatted to cookie specific contacts and track their play activity. This feature is mainly used for sharing videos through email, where you have a specific contact you are talking to and can format the tracking link for their email address. This functionality can be extended to embeds on a non-Vidcaster website page with the inclusion of javascript and some embed code modifications. This will allow you to send a contact to the page where the video is embedded with a specially formatted version of the url and start tracking their behavior.

Step 1: Format the Vidcaster embed code player url to track a contact.

A normal Vidcaster video embed looks like this:

<iframe width="640" height="360" title="test Video Player" src="http://tv.vidcaster.com/player/JNKu/?share=true&amp;fancyTitle=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

To change the embed to track a contact, update the player url to include "/?email=" and the email of the person you want to track. For this example, we will use "john@smith.com"

<iframe width="640" height="360" title="test Video Player" src="http://tv.vidcaster.com/player/JNKu/?email=john@smith.com&amp;share=true&amp;fancyTitle=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

This embed change would be fine, but you probably don't want everyone who visits the page and plays the video to be tracked as john@smith.com. See Step 2 for how to apply this to anyone you send to the page.

Step 2: Change the player url email address to a variable.

Update the email address in the embed player url to accept a variable. For example, if you were using a Django tag, the embed code might look like the following:

<iframe width="640" height="360" title="test Video Player" src="http://tv.vidcaster.com/player/JNKu/?email={{user.email}}&amp;share=true&amp;fancyTitle=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Or if you were using Rails:

<iframe width="640" height="360" title="test Video Player" src="http://tv.vidcaster.com/player/JNKu/?email=<%= user.email %>&amp;share=true&amp;fancyTitle=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Step 3: Add javascript to pull the email from the page url.

You can accomplish filling out the variable with a specific email address in the url through the use of the GET variable. Suppose you want to do an email campaign and track viewers who are visiting your blog article located at http://blog.vidcaster.com/custom-video-marketing-analytics-report-builder/. What you can do is customize the email so that each link is unique to the viewer's email and send them to the url with an additional get variable. http://blog.vidcaster.com/custom-video-marketing-analytics-report-builder/?email=john@smith.com. At which point if you were to replace the default iframe with something like the following, you would be able to track the viewer based on the email set in the GET variable.

<div id="vcframe">
</div>

<script>
var embed = '<iframe title="test Video Player" src="http://tv.vidcaster.com/player/JNKu/?email=useremail&amp;share=true&amp;fancyTitle=true" height="360" width="640" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var getVars = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    getVars[decode(arguments[1])] = decode(arguments[2]);
});
var userEmail = getVars["email"];
var embed = embed.replace("useremail", userEmail);
document.getElementById("vcframe").innerHTML = embed;
</script>