Explorar el Código

Add hover and scroll events

Jessica Lawshe hace 8 años
padre
commit
b1c988e4c1

+ 39 - 5
services/web/public/coffee/directives/eventTracking.coffee

@@ -4,11 +4,23 @@
 #   event not sent to MB.
 #     for MB, add event-tracking-mb='true'
 #     by default, event sent to MB via sendMB
-#       this can be changed to use sendMBOnce via event-tracking-send-once='true' attribute
 #   event not sent to GA.
 #     for GA, add event-tracking-ga attribute, where the value is the GA category
+# Either GA or MB can use the attribute event-tracking-send-once='true' to
+# send event just once
+#   MB will use the key and GA will use the action to determine if the event
+#   has been sent
 # event-tracking-trigger attribute is required to send event
 
+isInViewport = (element) ->
+	elTop = element.offset().top
+	elBtm = elTop + element.outerHeight()
+
+	viewportTop = $(window).scrollTop()
+	viewportBtm = viewportTop + $(window).height()
+
+	elBtm > viewportTop && elTop < viewportBtm
+
 define [
 	'base'
 ], (App) ->
@@ -22,20 +34,42 @@ define [
 				sendGA = attrs.eventTrackingGa || false
 				sendMB = attrs.eventTrackingMb || false
 				sendMBFunction = if attrs.eventTrackingSendOnce then 'sendMBOnce' else 'sendMB'
+				sendGAFunction = if attrs.eventTrackingSendOnce then 'sendGAOnce' else 'send'
 				segmentation = scope.eventSegmentation || {}
-
 				segmentation.page = window.location.pathname
 
-				sendEvent = () ->
+				sendEvent = (scrollEvent) ->
+					###
+						@param {boolean}		scrollEvent		Use to unbind scroll event
+					###
 					if sendMB
 						event_tracking[sendMBFunction] scope.eventTracking, segmentation
 					if sendGA
-						event_tracking.send attrs.eventTrackingGa, attrs.eventTrackingAction || scope.eventTracking, attrs.eventTrackingLabel || ''
+						event_tracking[sendGAFunction] attrs.eventTrackingGa, attrs.eventTrackingAction || scope.eventTracking, attrs.eventTrackingLabel || ''
+					if scrollEvent
+						$(window).unbind('resize scroll')
 
 				if attrs.eventTrackingTrigger == 'load'
 					sendEvent()
 				else if attrs.eventTrackingTrigger == 'click'
 					element.on 'click', (e) ->
 						sendEvent()
+				else if attrs.eventTrackingTrigger == 'hover'
+					timer = null
+					timeoutAmt = 500
+					if attrs.eventHoverAmt
+						timeoutAmt = parseInt(attrs.eventHoverAmt, 10)
+					element.on 'mouseenter', () ->
+						timer = setTimeout((-> sendEvent()), timeoutAmt)
+						return
+					.on 'mouseleave', () ->
+						clearTimeout(timer)
+				else if attrs.eventTrackingTrigger == 'scroll'
+					if !event_tracking.eventInCache(scope.eventTracking)
+						$(window).on 'resize scroll', () ->
+							_.throttle(
+								if isInViewport(element) && !event_tracking.eventInCache(scope.eventTracking)
+									sendEvent(true)
+							, 500)
 		}
-	]
+	]

+ 8 - 1
services/web/public/coffee/main/event.coffee

@@ -50,6 +50,10 @@ define [
 			send: (category, action, label, value)->
 				ga('send', 'event', category, action, label, value)
 
+			sendGAOnce: (category, action, label, value) ->
+				if ! _eventInCache(action)
+					_addEventToCache(action)
+					@send category, action, label, value
 
 			editingSessionHeartbeat: () ->
 				return unless nextHeartbeat <= new Date()
@@ -86,6 +90,9 @@ define [
 				if ! _eventInCache(key)
 					_addEventToCache(key)
 					@sendMB key, segmentation
+
+			eventInCache: (key) ->
+				_eventInCache(key)
 		}
 
 
@@ -93,4 +100,4 @@ define [
 	$('.navbar a').on "click", (e)->
 		href = $(e.target).attr("href")
 		if href?
-			ga('send', 'event', 'navigation', 'top menu bar', href)
+			ga('send', 'event', 'navigation', 'top menu bar', href)