Integration: Youtube

About

Video is a very important part of the web today, and being able to segment users based on their web-video viewing behavior can be very useful. We created an integration example, using YouTube's API, where a segment is created once the user sees a video until the end.

Therefore, once a user has seen the YouTube video until the end on your site, you can then create a specific behavior, such as showing different content.

Quick Installation Steps

1. Make sure the BTBuckets tag is installed on this page
2. Download and store the swfobject YouTube API integration files to your site
3. Configure desired cluster within BTBuckets to be used in integration
4. Include javascript YouTube code with BTBuckets integration

Complete Guide

Step 1

Check our Quick start for more information about creating your account and installing tags on your site.

Step 2

You have to download and install the Javascript API necessary to call the YouTube videos. We recommend using the swfobject [http://code.google.com/p/swfobject/ files. Ideally, the swfobject should be stored where you store you script files. Make sure you store all the files with the same sub-directory structure.

Once these files have been uploaded, make note of the directory where these files were stored - this information will be necessary for step 4.

Step 3

You must now create a bucket to segment users who saw the YouTube video until the end. Since we will be using a dynamic event sent from YouTube once the viewer has seen the video until the end, we must use the EVENT navigation option:

Step 4

Copy and paste the following code in your HTML page where you want the YouTube video to be displayed.

  <script type="text/javascript" src="/swfobject/swfobject.js"></script>   
  
  <div id="ytapiplayer">
  You need Flash player 8+ and JavaScript enabled to view this video.
  </div>
  
  <script type="text/javascript">

  var youtube_video_id = "zZmh7gScF08";
  var btbucket_video_cluster = "youtube_blog_example"; //bucket friendly name
  var btbucket_video_event = "youtube_video"; //value inputted for event
  
  function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  }
  
  function onytplayerStateChange(newState) { 
     if (newState == 0) 
     { 
        $BTB.trackEvent(btbucket_video_event); 
     }
  }
  
  var params = { allowScriptAccess: "always" };
  var atts = { id: "myytplayer" };
  youtube_video_id = "http://www.youtube.com/v/" + youtube_video_id + escape("&enablejsapi=1&playerapiid=ytplayer");
  
  if ($BTB.isUserOnBucket(btbucket_video_cluster) == false) 
  { 
     swfobject.embedSWF(youtube_video_id,"ytapiplayer", "425", "356", "8", null, null, params, atts); 
  } 
  else 
  { 
     document.getElementById("ytapiplayer").innerHTML="You already watched the video, we won't bore you again!"; 
  }
  </script>

Now you have to edit the paramters of this script. Begin by editing the first line with location of the swfobject javascript code you stored in step 2.

Then, you must then replace the code sections shown in yellow below with the variables of your choice. In the bucket configuration used in step 3, we used the youtube_video.

Last, you have to input the alternative HTML code you want shown when the user already saw the video to the end, shown in red.

YouTube State Values

Possible values are:

• unstarted (-1)
• ended (0)
• playing (1)
• paused (2)
• buffering (3)
• video cued (5)

Important Notes

• If you are installing this code on a Wordpress blog, make sure you download and install the wp-unformatted plugin. After activating the plugin, you must then set the page/post Custom Fields:
  • sandpaper key to 1 value
  • sponge key to 1 value