Tracking YouTube Video Views

You can easily use TUNE to track plays of YouTube videos as conversions. This allows you to compensate partners for providing users that play or watch the full video.

The code works by YouTube calling the loadConversionPixel function once a user press play or watched the entire video. Then the loadConversionPixel function loads the conversion tracking pixel for an offer.

YouTube Video Code

In the body of your HTML page you’ll have the code for your YouTube video. You can get the code from YouTube by clicking the Share button. Then click the Embed option. You’ll need to click the checkbox for the Old Embed Code.

<object width="560" height="315">
  <param name="movie" value="http://www.youtube.com/v/LzLLl0I8z6U?version=3&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1"></param>
  <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/LzLLl0I8z6U?version=3&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" id="ytvideo"></embed>
</object>

Place the code below the YouTube video code. This code calls the displayConversionPixel function after a user watches the whole video.

<script type="text/javascript">// <![CDATA[
  var playedOnce = false;
  function onYouTubePlayerReady(playerid) {
    player = document.getElementById("ytvideo");
    player.addEventListener("onStateChange", "youtubeEvent");
  }
  function youtubeEvent(state) {
    if(state == 1) {
      if(!playedOnce) {
        // Video started... Unique/first play
        playedOnce = true;
      }
      // Play pressed again
      return;
    }
    if(state == 0) {
      // Video ended
      displayConversionPixel();
      return;
    }
  }
// ]]></script>

If you want to credit a conversion instead as soon as the user clicks play, move displayConversionPixel function to where the variable playedOnce is false. The code below now displays the conversion pixel soon as the video is played.

<script type="text/javascript">// <![CDATA[
  var playedOnce = false;
  function onYouTubePlayerReady(playerid) {
    player = document.getElementById("ytvideo");
    player.addEventListener("onStateChange", "youtubeEvent");
  }
  function youtubeEvent(state) {
    if(state == 1) {
      if(!playedOnce) {
        // Video started... Unique/first play
        displayConversionPixel();
        playedOnce = true;
      }
      // Play pressed again
      return;
    }
    if(state == 0) {
      // Video ended
      return;
    }
  }
// ]]></script>

Conversion Pixel

Create an offer in your TUNE network for this YouTube campaign or create a new “Offer Goal” for YouTube play. Set the conversion tracking protocol on the offer as a HTTP iFrame pixel. In the head, you’ll need to place the code below. Replace the example conversion pixel with the conversion tracking pixel for the offer you’ve created in your TUNE network. If you already load jquery on your webpage, then you won’t need to include the jquery line of code at the beginning of this example.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
  var displayOnce = false;
  function displayConversionPixel(){
    // display HasOffers conversion tracking pixel
    if(!displayOnce) {
      $('#ho-pixels').append('<iframe src="http://demo.go2jump.org/aff_l?offer_id=506" scrolling="no" frameborder="0" width="1" height="1"></iframe>');
      displayOnce = true;
    }
  }
// ]]></script>

Before the close of your body tag on your webpage, input the following div so that once the user successfully plays the YouTube Video, the conversion pixel loads inside the div.

<div id="ho-pixels"></div>

Full Sample Code

The code below functions after the user watches the entire video.

<!DOCTYPE html>
<html>
<head>
<title>YouTube Watched Video</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
  var displayOnce = false;
  function displayConversionPixel(){
    // display HasOffers conversion tracking pixel
    if(!displayOnce) {
      $('#ho-pixels').append('<iframe src="http://demo.go2jump.org/aff_l?offer_id=506" scrolling="no" frameborder="0" width="1" height="1"></iframe>');
      displayOnce = true;
    }
  }
// ]]></script>
</head>
<body>
<object width="560" height="315">
  <param name="movie" value="http://www.youtube.com/v/LzLLl0I8z6U?version=3&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1"></param>
  <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/LzLLl0I8z6U?version=3&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" id="ytvideo"></embed>
</object>

<script type="text/javascript">// <![CDATA[
  var playedOnce = false;
  function onYouTubePlayerReady(playerid) {
    player = document.getElementById("ytvideo");
    player.addEventListener("onStateChange", "youtubeEvent");
  }
  function youtubeEvent(state) {
    if(state == 1) {
      if(!playedOnce) {
        // Video started... Unique/first play
        playedOnce = true;
      }
      // Play pressed again
      return;
    }
    if(state == 0) {
      // Video ended
      displayConversionPixel();
      return;
    }
  }
// ]]></script>

<div id="ho-pixels"></div>

</body>
</html>