i have 11 youtube videos in page wnat track of them using youtube api , google analytics below have tried please me how debug using google analytics debugger , have gone wrong
i using new analytics.js
html
<div style="margin-bottom: 24px;"> <iframe id="video01" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/xxx?enablejsapi=1" frameborder="0"></iframe> <iframe id="video02" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/yyy?enablejsapi=1" frameborder="0"></iframe> <iframe id="video03" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/zzz?enablejsapi=1" frameborder="0"></iframe> <iframe id="video04" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/eee?enablejsapi=1" frameborder="0"></iframe> <iframe id="video05" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/rrr?enablejsapi=1" frameborder="0"></iframe> <iframe id="video06" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/www?enablejsapi=1" frameborder="0"></iframe> <iframe id="video07" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/qqq?enablejsapi=1" frameborder="0"></iframe> <iframe id="video08" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/bbb?enablejsapi=1" frameborder="0"></iframe> <iframe id="video09" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/lll?enablejsapi=1" frameborder="0"></iframe> <iframe id="video10" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/ooo?enablejsapi=1" frameborder="0"></iframe> <iframe id="video11" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/kkk?enablejsapi=1" frameborder="0"></iframe> </div> java script
$(function () { try { 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. function creates <iframe> (and youtube player) // after api code downloads. var video01, video02, video03, video04, video05 , video06, video07, video08, video09, video10, video11, playerinfolist = [ { id: 'video01', height: '390', width: '640', videoid: 'ml_bgim3fzy' }, { id: 'video02', height: '390', width: '640', videoid: 'hv__30bvw8u' }, { id: 'video03', height: '390', width: '640', videoid: 'a9h93f-8wqk' }, { id: 'video04', height: '390', width: '640', videoid: 'c9n2chg6e7a' }, { id: 'video05', height: '390', width: '640', videoid: '-j07hsbrfl8' }, { id: 'video06', height: '390', width: '640', videoid: 'faor8xaj5ri' }, { id: 'video07', height: '390', width: '640', videoid: 'r2qr5atjq6o' }, { id: 'video08', height: '390', width: '640', videoid: 'n-2q3cu5jna' }, { id: 'video09', height: '390', width: '640', videoid: 'g963tya8bgc' }, { id: 'video10', height: '390', width: '640', videoid: '5p4podfyqeq' }, { id: 'video11', height: '390', width: '640', videoid: 'uba6prwwr6o' }]; function onyoutubeiframeapiready() { if (typeof playerinfolist === 'undefined') return; $.each(playerinfolist, function (index, playerinfo) { var video = playerinfo.id; video = createplayer(playerinfo) }); function createplayer(playerinfo) { return new yt.player(playerinfo.id, { height: playerinfo.height, width: playerinfo.width, videoid: playerinfo.videoid, events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } } // api call function when video player ready. function onplayerready(event) { event.target.playvideo(); } // api calls function when player's state changes. // function indicates when playing video (state=1), // player should play 6 seconds , stop. var pauseflag = false; function onplayerstatechange(event) { // track when user clicks play if (event.data == yt.playerstate.playing) { _gaq.push(['_trackevent', 'videos', 'play', 'test video']); pauseflag = true; } // track when user clicks pause if (event.data == yt.playerstate.paused && pauseflag) { _gaq.push(['_trackevent', 'videos', 'pause', 'test video']); pauseflag = false; } // track when video ends if (event.data == yt.playerstate.ended) { _gaq.push(['_trackevent', 'videos', 'finished', 'test video']); } } } catch (exception) { } }); i seeing in console section
i shared similar question, while uses jquery, can shed light on issue. i've altered use older _gaq.push() method google analytics match question.
here's script came works number of embedded youtube videos on page. apologize uses jquery, idea there: loop through each youtube embed , assign player based on index. i'm pretty optimized bit too.
it uses class youtubeplayer loop through each embed.
<script> var players = {}; var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); function onyoutubeiframeapiready(e){ jquery('iframe.youtubeplayer').each(function(i){ var youtubeiframeclass = jquery(this).attr('id'); players[youtubeiframeclass] = new yt.player(youtubeiframeclass, { events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); }); } var pauseflag = false; function onplayerready(e){ //player ready functions go here } function onplayerstatechange(e){ var videotitle = e['target']['b']['videodata']['title']; if ( e.data == yt.playerstate.playing ){ _gaq.push(['_trackevent', 'videos', 'play', videotitle]); pauseflag = true; } if ( e.data == yt.playerstate.ended ){ _gaq.push(['_trackevent', 'videos', 'finished', videotitle]); } else if ( e.data == yt.playerstate.paused && pauseflag ){ _gaq.push(['_trackevent', 'videos', 'pause', videotitle]); pauseflag = false; } } </script> hope @ least gets headed in right direction!
Comments
Post a Comment