I'm trying to use basic onPlayerStateChange events in the Youtube IFrame API to track starts/stops/finishes in Google Analytics. The code worked in October, but now the video won't display. GA tracking code is the same and I get the same results in Wordpress and Drupal. Is it changes to the API?
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '461',
width: '560',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data ==YT.PlayerState.PLAYING)
{_gaq.push(['_trackEvent', 'Videos', 'Play', ‘AnyEvent’ ]); }
if (event.data ==YT.PlayerState.ENDED)
{_gaq.push(['_trackEvent', 'Videos', 'Watch to End', ‘AnyEvent’]); } }
</script>
<div id="player"></div>
Those are curly-single-quotes around ‘AnyEvent’, right? That's not valid JavaScript.
Related
I'm a french designer (so, sorry for my english mistakes) and I'm trying to create an interactive video with different videos hosted on youtube.
These videos already use the youtube 'annotations' or 'cards', but I want to hide them to create my own solution.
Basically I just want to show two divs at a certain timecode of the video to allow user to click on one of them to go to a new url. This thing works.
My question is simple : how can I hide the existing annotations?
I've tried with css, but it doesn't seem to work…
I'm not a full-time developer, so if you know a simple solution, I would be happy to know it :)
Here is the code
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'mVwQFmKc7mA',
playerVars: { 'autoplay': 1, 'controls': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 3 },
events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(displayNewDivs, 2000);*/
done = true;
}
}
function displayNewDivs() {
// HERE THE CODE TO SHOW NEW DIVS
}
</script>
Thank you very much!
I have a slideshow with youtube video's. But the problem now is that I can't trigger the onPlayerStateChange.
This is my code:
echo '<iframe id="youtube" src="http://www.youtube.com/embed/kOkQ4T5WO9E?enablejsapi=1&autoplay=1&rel=0</iframe>';
This is the JavaScript:
<script src="/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('youtube', {
events: { 'onStateChange': onPlayerStateChange }
});
}
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerStateChange(event) {
if (event.data === 0) {
alert('Video finished, next slide');
slide.next();
}
}
</script>
Is there a way to reload the iframe api when the video has ended?
I apologize, as last I knew, the YouTube API was entirely deprecated and almost no longer supported.
You're going to need to load new videos with the loadVideoByUrl function
player.loadVideoByUrl(mediaContentUrl:String,
startSeconds:Number,
suggestedQuality:String):Void
Also, you should change event.data === 0 to event.data == YT.PlayerState.ENDED
Has anyone managed to get the tracking of embedded YouTube video play/pause/ended working with the Monster Insights plugin for WordPress, or have an example where they have this working with Google universal.js? Please see below for the code I have so far. I have other GA Events being tracked successfully which are working fine, e.g. onclick="__gaTracker ('send', 'event', 'Mobile Call Button', 'call', 'mobile-call-button');"
<script>
// YouTube API
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_...";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This code is called by the YouTube API to create the player object
function onYouTubeIframeAPIReady(event) {
player = new YT.Player('decisions', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var pauseFlag = false;
function onPlayerReady(event) {
// do nothing, no tracking needed
}
function onPlayerStateChange(event) {
// track when user clicks to Play
if (event.data == YT.PlayerState.PLAYING) {
__gaTracker('send', 'event', 'Videos', 'Play', 'decisionsvideo');
pauseFlag = true;
}
// track when user clicks to Pause
if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
__gaTracker('send', 'event', 'Videos', 'Pause', 'decisionsvideo');
pauseFlag = false;
}
// track when video ends
if (event.data == YT.PlayerState.ENDED) {
__gaTracker('send', 'event', 'Videos', 'Finished', 'decisionsvideo');
}
}
</script>
I've some videos integrated through WordPress as iframe.
What I'm looking for is to redirect users to the homepage as soon as the video finishes playing.
Is there any event in Javascript to catch when existing Youtube video stops?
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
// first video
player = new YT.Player('player', {
events: {
'onReady': function(){ alert("Ready!"); },
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
console.log('player stopped');
}
}
Above code will work if your iframe looks as below
<iframe id="player" width="640" height="360" src="https://www.youtube.com/embed/ZdP0KM49IVk?enablejsapi=1" frameborder="0" allowfullscreen />
with id=player and ?enablejsapi=1
I have embeded some youtube videos in my website. I want to track the views of each videos with google analytics, but I cannot catch any onClick event because the videos are embeded in using iFrame. How can I track the views of youtube videos that is embeded in my webpage using iFrame ?
I've been using YouTube's API to track plays as events in Google Analytics. It's the same format in iFrame API and javascript. Look at the iFrame API if you want to track other functions. This is where I originally got the event tracking information.
You'll have to change the videoID below:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'fYmrMt01S1U',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
/// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
_gaq.push(['_trackEvent', 'Videos', 'Play',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.PAUSED) {
_gaq.push(['_trackEvent', 'Videos', 'Paused',
player.getVideoUrl()]);
}
if (event.data == YT.PlayerState.ENDED) {
_gaq.push(['_trackEvent', 'Videos', 'Watch to End',
player.getVideoUrl()]);
}
}
// ]]>
</script>