I'm new to all this and am just not getting how to track a video that can be played on my site.
I just installed my GA code to my page, so I'm going to assume that I'm using the new Asynchronous tracking. the issue is am not able to track this video in GA panel.
Thanks
My code looks like this .
<script type='text/javascript' src='js/jwplayer.js'></script>
<script type='text/javascript' src='js/jwplayer.html5.js'></script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40700489-1', 'epcint.com');
ga('send', 'pageview');
<script type="text/javascript">jwplayer.key = "myplayerkey=";</script>
<script type="text/javascript">
$(document).ready(function () {
jwplayer('mediaplayer').setup({
file: 'video.mp4',
width: "100%",
height: "480",
autostart: true,
ga: {
}
});
});
</script>
<div id="mediaplayer">
</div>
Any help will be highly appriciate
Thanks
Thanks for your feedback i have updated and Debug the code in GA
debugger i got the error whats this means ?
Initializing Google Analytics. analytics_debug.js:9 Registered new
plugin: ga(provide, "linker", Function) analytics_debug.js:9
Registered new plugin: ga(provide, "displayfeatures", Function)
analytics_debug.js:9 Running command: ga(create, UA-40700489-2,
infopav.com) analytics_debug.js:9 Creating new tracker: t0
analytics_debug.js:9 Running command: ga(send, pageview)
analytics_debug.js:9
Sent beacon:
v=1&_v=j16d&a=686083534&t=pageview&_s=1&dl=http%3A%2F%2Fdev.www.infopave.com%2FPage%2FIndex%2FHOW_TO_ACCESS_LTPP_DATA&ul=en-us&de=UTF-8…30201944&_u=MCCC~&cid=2101349279.1393503811&tid=UA-40700489-2&z=1727898794
analytics_debug.js:9 adSenseId (&a) 686083534
analytics_debug.js:9 apiVersion (&v) 1 analytics_debug.js:9
clientId (&cid) 2101349279.1393503811 analytics_debug.js:9
encoding (&de) UTF-8 analytics_debug.js:9 flashVersion
(&fl) 12.0 r0 analytics_debug.js:9 hitType (&t) pageview
analytics_debug.js:9 javaEnabled (&je) 1 analytics_debug.js:9
language (&ul) en-us analytics_debug.js:9 location
(&dl) http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA
analytics_debug.js:9 screenColors (&sd) 24-bit
analytics_debug.js:9 screenResolution (&sr) 1680x1050
analytics_debug.js:9 title (&dt) LTPP InfoPave - How to
Access LTPP Data? analytics_debug.js:9 trackingId (&tid)
UA-40700489-2 analytics_debug.js:9 viewportSize (&vp) 1665x429
analytics_debug.js:9
There was an error while handling a listener: TypeError: Cannot read property 'id' of null function
(){if("array"==a.typeOf(m.playlist)&&2>m.playlist.length&&(0==m.playlist.length||
!m.playlist[0].sources||0==m.playlist[0].sources.length))g();else if(s.getStatus()==a.loaderstatus.COMPLETE){for(var
e=0;em.modes[e].type;if(r.supportsConfig())return
r.addEventListener(l.ERROR,d),r.embed(),c(b,f.events),b}m.fallback?(a.log("No
suitable players found and fallback enabled"),new
j.download(n,m,g)):(a.log("No suitable players found and fallback
disabled"),n.parentNode.replaceChild(h,
n))}} jwplayer.js:3
event.returnValue is deprecated. Please use the standard
event.preventDefault() instead. jquery-1.8.2.min.js:2 9 Could not add
internal listener jwplayer.js:3 There was an error calling back an
event handler
Updated Code
$(document).ready(function () {
jwplayer("mediaplayer").setup({
file: 'rtmp://s1nu7pjztotbeg.cloudfront.net/cfx/st/mp4:Help/How_To/GettingStarted_V2-Sm_x264.mp4',
width: "100%",
height: "480",
autostart: true,
events: {
onComplete: function (evt) {
},
onReady: function (event) {
ga('send', 'event', 'Video Played', 'action', { 'page': 'http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA' });
},
onPlay: function (evt) {
},
onVolume: function (evt) {
alert("the new volume is: " + evt.volume);
}
},
ga: {
}
});
});
i want to send this when some one click the play button ,i want to send this code only
ga('send', 'event', 'Video Played', 'action', { 'page': 'http://dev.www.infopave.com/Page/Index/HOW_TO_ACCESS_LTPP_DATA' });
How i can get that button click in jquery thanks for your help...
Thanks any help will be highly appriciated
I would recommend you look into Event-tracking. You can add a tag in the onclick so that when a user clicks to view your video you will log an event that you can find in your google Analytics under Behavior -> events
I haven't tested this but you should be able to do something like:
<div id="mediaplayer" onclick="ga('send', 'event', 'video', 'click', 'videoname');">
</div>
Note: Events will first show up in the standard report after 24 hours. You can also see them in the real-time reports.
and finally i got success to solve my problem !
<div id="mediaplayer">
</div>
<ul>
<li>State: <span id="stateText">IDLE</span></li>
<li>time: <span id="elapsedText">0</span></li>
</ul>
<script type="text/javascript"> jwplayer.key = "mykeyeasdfasdf2132131=";</script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
file: 'rtmp://s1nu7pjztotbeg.cloudfront.net/cfx/st/mp4:Help/How_To/GettingStarted_V2-Sm_x264.mp4',
width: 465,
height: 300,
autostart: true,
events: {
onComplete: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
updateValues();
//ga('send', 'event', 'Video Completes', 'ULR of video or Title', 'Page URL', timedurationvalue);
},
onReady: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
updateValues();
// ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);
},
onPlay: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
// ga('send', 'event', 'Video Plays', 'ULR of video or Title', 'Page URL', timedurationvalue);
// ga('send', 'event', 'category', 'action', 'label', value);
},
onVolume: function (event) {
updateValues();
alert("onvolume called!");
},
onPause: function (event) {
var elapsedTime = jwplayer("mediaplayer").getPosition();
var timedurationvalue = ((elapsedTime / 60).toFixed(2));
// ga('send', 'event', 'Video Paused', 'ULR of video or Title', 'Page URL', timedurationvalue);
alert("onpause called!");
}
}
});
function setText(id, messageText) {
document.getElementById(id).innerHTML = messageText;
}
function updateValues() {
var state = jwplayer("mediaplayer").getState();
var elapsed = jwplayer("mediaplayer").getPosition();
setText("stateText", state);
setText("elapsedText", (elapsed / 60).toFixed(2));
}
</script>
JW Player only supports ga.js for the time being. The new universal analytics does not work yet. That is why.
Related
We have lots of links on a landing page which are effectively to be tracked in Google ads as a conversion (outbound click). We're using the code below but clicks on the links aren't being registered in Google ads..
There is no further URL to call on hence "// window.location = url;"
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
// window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-xxxxxxxxx',
'event_callback': callback
});
return false;
}
$(document).ready(function () {
$("#lp-id-10").click(function () {
gtag_report_conversion();
});
$(document).ready(function () {
$("#lp-id-11").click(function () {
gtag_report_conversion();
});
We've tried a few ways of coding this but our conversion point in Google ads is still marked as Unverified
I can't sent purchase event to google analytics. I can send others events if i use "ga('enet', 'event' ... " but code below do not working.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Success Page</title>
<script>
(function (i, s, o, g, r, a, m) {
i.GoogleAnalyticsObject = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga("create", "UA-XXXX-Y");
ga('require', 'ec');
ga('set', 'currencyCode', 'USD');
ga('set', 'anonymizeIp', true);
ga('ec:addProduct', {
'id': "8500830",
'name': "TEST",
'price': "2.9100",
'quantity': "1.0000"
});
ga('ec:setAction', 'purchase', {
'action': 'purchase',
'affiliation': "TEST",
'id': "000000111",
'revenue': "15.9100",
'shipping': "13.0000",
'tax': "0.0000"
});
ga('send', 'pageview');
</script>
</head>
<body></body>
</html>
I do not see any errors in chrome dev tools, but this event dosen't appear in "Real-time -> Conversion".
Any suggestion why?
E-commerce transactions are not reported as 'event' in google analytics so it's OK if you don't see it in Real-time report.
In this case, transaction data are sent alongside pageview hit so only corresponding pageview will appear in Real-Time.
Check the Conversions>Ecommecre reports to check if your transactions data are processed properly.
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'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.
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>