Skip to content

Instantly share code, notes, and snippets.

@thoughtpalette
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thoughtpalette/9420350 to your computer and use it in GitHub Desktop.
Save thoughtpalette/9420350 to your computer and use it in GitHub Desktop.
GA Click Tracking, Scroll Tracking and YouTube Video (play/complete) tracking for Single and Multiple Videos
var asyncYouTubeApiLoad = function() {
//https://developers.google.com/youtube/iframe_api_reference
// 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);
};
var initiateVideoTracking = function() {
var initialLoad = false,
$player = $('#player'),
player;
asyncYouTubeApiLoad();
getVideoTrackingValues();
$('.slide img').click(function(e) {
$yt_trackValue = $(this).data('tracking-value');
onYouTubeIframeAPIReady();
});
function getVideoTrackingValues() {
$yt_trackValue = $player.data('tracking-value');
}
executeYouTubeReady();
function executeYouTubeReady() {
// Wait for API
setTimeout(function() {
onYouTubeIframeAPIReady();
}, 200);
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
initialLoad = true;
}
function onPlayerStateChange(event) {
console.log(event.data);
// event.data values
// 0 (ended)
// 1 (playing)
if (event.data == 1 && initialLoad) {
fireVideoEventTracking('video_play');
initialLoad = false;
} else if (event.data == 0) {
fireVideoEventTracking('video_complete');
}
}
function fireVideoEventTracking(eventType) {
_gaq.push(['_trackEvent', 'video', eventType, $yt_trackValue]);
}
};
// Scroll Tracking (Virtual Pageviews) only on Homepage
var initiateScrollTracking = function() {
var borderHeight = 30,
heroSectionHeight = $('#section-1').height() + borderHeight,
articleSectionTop = heroSectionHeight,
campaignSectionTop = $('.row').height() * 4 + heroSectionHeight + borderHeight,
contactPadding = 100,
contactSectionTop = campaignSectionTop + $('#section-3').height() + contactPadding,
scrollHeight = $(document).scrollTop(),
articleTracked = false,
campaignTracked = false,
contactTracked = false;
// Initial View
_gaq.push(['_trackPageview','/panel1_hero'])
function evaluateScrollPosition() {
scrollHeight = $(document).scrollTop();
if (scrollHeight >= articleSectionTop && !articleTracked) {
_gaq.push(['_trackPageview','/panel2_article'])
articleTracked = true;
} else if (scrollHeight >= campaignSectionTop && !campaignTracked) {
_gaq.push(['_trackPageview','/panel3_commercial'])
campaignTracked = true;
} else if (scrollHeight >= contactSectionTop && !contactTracked) {
_gaq.push(['_trackPageview','/panel4_contact'])
contactTracked = true;
}
}
$(window).scroll(function(e) {
evaluateScrollPosition();
});
};
// Basic Click Tracking
$(".track").click(function(e){
var $this = $(this),
$trackCat = $this.data('tracking-category'),
$trackAction = $this.data('tracking-action'),
$trackValue = $this.data('tracking-value'),
$trackValueExtra = $this.data('tracking-value-extra');
if ($trackValueExtra !== undefined) {
$trackValue = $trackValue + '_' + $trackValueExtra;
}
_gaq.push(['_trackEvent', $trackCat, $trackAction, $trackValue]);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment