Youtube API + Google Analytics API

API de Youtube: http://code.google.com/intl/es-ES/apis/youtube/overview.html API de Google Analytics: http://code.google.com/intl/es-ES/apis/analytics/docs/ Lo que voy a hacer es realizar el seguimiento de los eventos del vídeo de Youtube que tiene colgado mi cliente, un Hotel en Benidorm,  en su página principal. Hay que tener en cuenta varias cosas:
  1. En el src del embed del object se tiene que activar la API de Youtube: nablejsapi=1
  2. Poner el id del objeto embed: id=ytplayer
  3. Implementar la función function onYouTubePlayerReady(playerId) que se se lanza de forma automática cuando el vídeo está listo.
  4. Obtener el video de youtube:  ytplayer = document.getElementById("ytplayer");
  5. Manejar el evento onStateChange: ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
  6. Lanzar los eventos asíncronos de Google Analytics
function onPlayerStateChange(newState) { updateHTML("playerState", newState); if(newState == 1 && !ha_empezado) { ha_empezado = true; concatHTML("mensajes", "Ha empezado a reproducirse el video"); _gaq.push(['_trackEvent', 'Videos', 'Play', 'Video_Principal']);   } if(newState == 0 && ha_empezado){ concatHTML("mensajes", "Se ha terminado de repdorucir el video"); _gaq.push(['_trackEvent', 'Videos', 'Complete', 'Video_Principal']);   } } Ejemplo: http://softme.servehttp.com/youtube_api.html
<html>
<head></head>
<body>
  <script type="text/javascript">
var ytplayer;
var ha_empezado = false;
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}
function concatHTML(elmId, value) {
  document.getElementById(elmId).innerHTML += value;
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
  alert("An error occured of type:" + errorCode);
}
// This function is called when the player changes state
function onPlayerStateChange(newState) {
  updateHTML("playerState", newState);
  if(newState == 1 && !ha_empezado) {
   ha_empezado = true;
   concatHTML("mensajes", "Ha empezado a reproducirse el video");
   //_gaq.push(['_trackEvent', 'Videos', 'Play', 'Video_Principal']);
  }
  if(newState == 0 && ha_empezado){
   concatHTML("mensajes", "Se ha terminado de repdorucir el video");
//_gaq.push(['_trackEvent', 'Videos', 'Complete', 'Video_Principal']);
  }
}
// Display information about the current state of the player
function updatePlayerInfo() {
  // Also check that at least one function exists since when IE unloads the
  // page, it will destroy the SWF before clearing the interval.
  if(ytplayer && ytplayer.getDuration) {
    updateHTML("videoDuration", ytplayer.getDuration());
    updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
    updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
    updateHTML("startBytes", ytplayer.getVideoStartBytes());
    updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
  }
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("ytplayer");
  // This causes the updatePlayerInfo function to be called every 250ms to
  // get fresh data from the player
  setInterval(updatePlayerInfo, 250);
  updatePlayerInfo();
  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
  ytplayer.addEventListener("onError", "onPlayerError");
}
  </script>
<object width="400" height="280">
<param name="movie" value="http://www.youtube.com/v/--ZqsfyG30Y?fs=1&amp;hl=es_ES"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
id="ytplayer"
src="http://www.youtube.com/v/--ZqsfyG30Y?enablejsapi=1&fs=1&amp;hl=es_ES"
type="application/x-shockwave-flash"
width="400"
height="280"
allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
  <br>
  <p>
State: <span id="playerState"></span><br>
Duration: <span id="videoDuration"></span><br>
Current Time: <span id="videoCurrentTime"></span><br>
Bytes Total: <span id="bytesTotal"></span><br>
Start Bytes: <span id="startBytes"></span><br>
Bytes Loaded: <span id="bytesLoaded"></span><br>
Mensaje al usuario: <span id="mensajes"></span><br>
  </p>
</body>
</html>
<