Skip to content

Instantly share code, notes, and snippets.

@rasummer
Created March 4, 2013 20:44
Show Gist options
  • Save rasummer/5085491 to your computer and use it in GitHub Desktop.
Save rasummer/5085491 to your computer and use it in GitHub Desktop.
Google Event Tracking
<!DOCTYPE HTML>
<html>
<head>
<title>Navicure - Greenway</title>
<link rel="stylesheet" href="../demoplayer/stylesheets/player.css" type="text/css" media="screen">
<link rel="stylesheet" href="../demoplayer/stylesheets/demo-website-overide.css" type="text/css" media="screen">
<script src="../demoplayer/javascripts/player.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32132340-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta name="viewport" content="width=880" />
<script type="text/javascript" >
//tracking vars
var track_category = 'Navicure Greenway'
var percentage_played = 0;
var secs_played = 0;
var track_play = true;
var title = null;
var this_duration = 0;
var video_completed = true;
var ctaLink = null;
// player options and playlist setup
$(function() {
Player.setup({
jwplayer: '../demoplayer/jwplayer',
playlist: [
{
duration: 144,
image: 'images/nav-greenway-preview.png',
title: 'Navicure Greenway',
levels: [
{ file: 'video/nav-gwy.mp4' }
]
}
],
jwplayer_options: {
autostart: true
}
});
//Events and Tracking
Player.addHandler('onPlay', function() {
if(track_play) {
title = Player.Controller.playlist[Player.Controller.current.index].title;
this_duration = Player.Controller.playlist[Player.Controller.current.index].duration;
track_play = false;
video_completed = false;
_gaq.push(['_trackEvent', track_category, 'Video: Started', title]);
};
});
Player.addHandler('onComplete', function(e) {
video_completed = true;
_gaq.push(['_trackEvent', track_category, 'Video: Completed', title]);
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, this_duration]);
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, 100]);
});
Player.addHandler('onPlaylistItem', function(e) {
if(!video_completed) {
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, secs_played]);
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, percentage_played]);
}
track_play = true;
});
Player.addHandler('onTime', function(e) {
secs_played = Math.round(e.position);
percentage_played = Math.round((secs_played / this_duration) * 100);
});
$('.track-link').live("click", function(event){
event.preventDefault();
_gaq.push(['_trackEvent', track_category, $(this).data('track-action') , Player.Controller.playlist[Player.Controller.current.index].title]);
ctaLink = $(this).attr('href');
setTimeout(function() {
top.location.href = ctaLink;
}, 1500);
});
window.onbeforeunload = function(e) {
if(!video_completed) {
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, percentage_played]);
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, secs_played]);
}
};
//end of Events and Tracking
});
</script>
<script src="../demoplayer/javascripts/lum-sharethis.js" type="text/javascript"></script>
</head>
<body>
<div id="demoplayer-position">
<script type="text/x-handlebars">
{{#view Player.View styles="grid"}}
{{view Player.PlayerView}}
<div id="demoplayer-branding">
<img src="images/nav-logo.png" />
<div class="share">
<span class='st_twitter_large' ></span>
<span class='st_facebook_large' ></span>
<span class='st_email_large' ></span>
<span class='st_sharethis_large' ></span>
</div>
<a class="demoplayer-branding-content track-link" href="http://info.navicure.com/NavicureGreenwayStressLess.html" data-track-action="CTA: Player - Request Demo Button Click" target="_top" ><img src="../demoplayer/images/request.png" /></a>
<a class="demoplayer-branding-content track-link" href="http://www.navicure.com" data-track-action="CTA: Player - Testimonial Button Click" target="_top" ><img src="../demoplayer/images/testimonial.png" /></a>
</div>
{{/view}}
</script>
<script type="text/x-handlebars" data-template-name="annotations">
{{#annotation cta-1 video="1" start="141" image="images/nav-greenway-cta.png"}}
<a class="track-link" href="http://www.navicure.com" data-track-action="CTA: Video - Testimonial Button Click" target="_top" style="position: absolute;top: 262px;left: 189px;width: 178px;height: 35px;"></a>
<a class="track-link" href="http://info.navicure.com/NavicureGreenwayStressLess.html" data-track-action="CTA: Video - Request Demo Button Click" target="_top" style="position: absolute;top: 261px;left: 483px;width: 150px;height: 35px;"></a>
<div class="demoplayer-action-replaycurrent">
<a href="#" id="replay"><img src="../demoplayer/images/replay.png" /></a>
</div>
{{/annotation}}
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment