2.2K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Video Tracking

[ Edited ]
Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Hello,

I am trying to track different videos on a few websites.  The videos are all hosted on YouTube and I have them embeded in some Joomla websites.  I am trying to set up event tracking for the videos so that I can see which videos are being played on what websites.  After much reading and researching I found that I needed to set up events and the youtube api.  (I think)

 

I have pieced together the following 'code' and placed it on the website.  I have the video being embeded on the page and it plays, but when I go to ganalytics the event is not being triggered.  What am I missing? I probably have more than I need as I am piecing it together.  What I want to know is which video is played on the websites. 

 

  <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<iframe id="player" type="text/html"width="853" height="480" src="https://www.youtube.com/embed/9dWmDOdtPO0"?enablejsapi=1&origin=http://www.mywebsite.com"
  frameborder="0"></iframe>
 

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src="https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
 var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
         
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
          }
        });
      }

// 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
       console.log('player is ready');
      }

     
      // 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
    switch (event.data) {
     case YT.PlayerState.PLAYING:
      ga('send', 'event', 'Videos', 'playing', 'Home Page Video', 'Create Memories')
      })
      break;
    case YT.PlayerState.PAUSED:
      ga('send', 'event', 'Videos', 'paused', 'Home Page Video', 'Create Memories')
      })
      break;
    case YT.PlayerState.ENDED:
      ga('send', 'event', 'Videos', 'ended', 'Home Page Video', 'Create Memories')
      })
      break;
 
    };
};
 
    </script>