AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

Analytics
1.9K members online now
1.9K 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>