Skip to main content

Tracking Youtube Views

Updated

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

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

YouTube Video Code

You’ll have the code for your YouTube video in the body of your HTML page. 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 the displayConversionPixel function to where the variable playedonce is false. The code below displays the conversion pixel as 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 platform for this YouTube campaign or create a new “Offer Goal” for YouTube play. Set the conversion tracking protocol on the offer as an 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 platform. If you already load jQuery on your webpage, 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>

Related articles