Google Analytics Track Youtube Interactions

google-analytics-track-youtube.coffee

do (window, document) ->

	iframes = document.getElementsByTagName("iframe")
	youTubeIframes = []
	regex = /.*youtube.*\/(embed|v)\/(.+)\?.*/

	window.youtube = window.youtube or {}
	youtube.movies = youtube.movies or {}

	category = youtube.movies.category = if youtube.movies.category then youtube.movies.category else "youtube"
	range = youtube.movies.timeRange = if youtube.movies.timeRange then youtube.movies.timeRange else [25, 50, 75]
	
	myYT = 
		mapPercent: {}

		forceApi: (iframe) ->
			src = iframe.src
			if src.indexOf(".youtube.com") > -1 #se o iframe é do youtube
				if src.indexOf("enablejsapi=1") is -1 #se a api não esta ligada
					if src.indexOf("?") is -1
						iframe.src = src = src + "?enablejsapi=1" #força a api
					else
						iframe.src = src = src + "&enablejsapi=1" #força a api
				
				videoId = src.match(regex)[2]
				div = document.createElement("div") #cria um div
				div.id = videoId #id do div é igual ao id do video
				iframe.parentNode.insertBefore(div, iframe) #insere o div abaixo do iframe
				div.appendChild(iframe) #move o iframe para dentro do novo div
				youTubeIframes.push(iframe)

		startPercent: (target) ->
			url = target.getVideoUrl()
			that = myYT.mapPercent[url] = {}

			that.count = if that.count then that.count else 0
			that.last = if that.last then that.last else 0
			
			that.duration = parseInt(target.getDuration(), 10)

			calc = ->
				current = target.getCurrentTime()
				percent = (100 * current) / that.duration
				if percent >= range[that.count]

					that.last = range[that.count]

					if window._gaq
						_gaq.push ["_trackEvent", category, "#{that.last}%", url]
					if window.ga
						ga("send", "event", category, "#{that.last}%", url)
					if window._gas
						_gas.push ["_trackEvent", category, "#{that.last}%", url]

					that.count = that.count + 1

			that.timer = window.setInterval(calc, 1000)

		stopPercent: (target) ->
			window.clearTimeout(myYT.mapPercent[target.getVideoUrl()].timer)

		trackAction: (action, target) ->
			videoUrl = target.getVideoUrl()
			if window._gaq
				_gaq.push ["_trackEvent", category, action, videoUrl]
			if window.ga
				ga("send", "event", category, action, videoUrl)
			if window._gas
				_gas.push ["_trackEvent", category, action, videoUrl]

		stageChange: (event) ->
			target = event.target
			that = myYT.mapPercent[target.getVideoUrl()]
			switch event.data
				when 0
					myYT.trackAction "finish", target
					myYT.stopPercent target
					that.count = 0
				when 1
					myYT.trackAction "play", target
					myYT.startPercent target
				when 2
					myYT.trackAction "pause", target
					myYT.stopPercent target
				when 3
					myYT.trackAction "buffering", target

		playerReady: (event) ->
			myYT.trackAction "ready", event.target

	window.onYouTubePlayerAPIReady = ->
		category = youtube.movies.category = if youtube.movies.category then youtube.movies.category else "youtube"

		myYT.forceApi(iframe) for iframe in iframes
		youtube.movies.player = {}

		for iframe in youTubeIframes
			opts =
				videoId: iframe.parentNode.id
				height: iframe.height
				width: iframe.width

			player = new YT.Player(iframe.parentNode, opts)
			player.addEventListener("onStateChange", myYT.stageChange)
			player.addEventListener("onReady", myYT.playerReady)
			youtube.movies.player[opts.videoId] = player

	# carregando api externa do youtube
	firstScriptTag = document.getElementsByTagName('script')[0]
	youtubeApi = document.createElement("script")

	youtubeApi.src = "//www.youtube.com/iframe_api"
	firstScriptTag.parentNode.insertBefore(youtubeApi, firstScriptTag)