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 have tried quite a few versions of this mixing up diff things but I still cant get events to trigger. (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.
enter code here
<!-- 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>