More tracking stuff

Author: chrisblakley

Nebula-Child/style.css

@@ -1,2 +1,2 @@
 
-/* Processed on Saturday, April 15, 2017 at 11:38am */
+/* Processed on Monday, April 17, 2017 at 9:24pm */

assets/css/admin.css

@@ -58,8 +58,6 @@ jQuery(function(){
 		initEventTracking();
 	}
 
-	//@todo "Nebula" 0: double check we can send data to nv() using query strings like ?nv_first_name=Chris and even encode it like
-
 	//Remove Sass render trigger query
 	if ( get('sass') && !get('persistent') && window.history.replaceState ){
 		window.history.replaceState({}, document.title, removeQueryParameter('sass', window.location.href));
@@ -1596,7 +1594,13 @@ function cf7Functions(){
 		return false;
 	}
 
-	//@todo "Nebula" 0: Include an event when a CF7 form is scrolled into view.
+	//Track CF7 forms when they scroll into view (Autotrack). Currently not possible to change category/action/label for just these impressions.
+	jQuery('form.wpcf7-form').each(function(){
+		ga('impressionTracker:observeElements', [{
+			'id': jQuery(this).closest('.wpcf7').attr('id'),
+			'threshold': 0.25
+		}]);
+	});
 
 	formStarted = [];
 	jQuery('.wpcf7-form input, .wpcf7-form textarea').on('focus', function(){
@@ -1628,7 +1632,10 @@ function cf7Functions(){
 	});
 
 	//CF7 Invalid (CF7 AJAX response after invalid form)
-	nebula.dom.document.on('wpcf7:invalid', function(e){
+	nebula.dom.document.on('wpcf7invalid', function(e){
+		console.log('old invalid');
+		console.debug(e.target.id);
+		console.debug(e);
 		var formTime = nebulaTimer(e.target.id, 'lap', 'wpcf7-submit-spam');
 		ga('set', gaCustomDimensions['contactMethod'], 'CF7 Form (Invalid)');
 		ga('set', gaCustomDimensions['formTiming'], millisecondsToString(formTime) + 'ms (' + nebulaTimings[e.target.id].laps + ' inputs)');
@@ -1638,8 +1645,15 @@ function cf7Functions(){
 		nv('append', {'form_submission_error': 'Validation (' + e.target.id + ')'});
 	});
 
+	//General HTML5 validation errors
+	jQuery('.wpcf7-form input').on('invalid', function(){ //Would it be more useful to capture all inputs (rather than just CF7)? How would we categorize this in GA?
+		debounce(function(){
+			ga('send', 'event', 'CF7 Form', 'Submit (Invalid)', 'General HTML5 validation error');
+		}, 50, 'invalid form');
+	});
+
 	//CF7 Spam (CF7 AJAX response after spam detection)
-	nebula.dom.document.on('wpcf7:spam', function(e){
+	nebula.dom.document.on('wpcf7spam', function(e){
 		var formTime = nebulaTimer(e.target.id, 'end');
 		ga('set', gaCustomDimensions['contactMethod'], 'CF7 Form (Spam)');
 		ga('set', gaCustomDimensions['formTiming'], millisecondsToString(formTime) + 'ms (' + nebulaTimings[e.target.id].laps + ' inputs)');
@@ -1649,7 +1663,7 @@ function cf7Functions(){
 	});
 
 	//CF7 Mail Send Failure (CF7 AJAX response after mail failure)
-	nebula.dom.document.on('wpcf7:mailfailed', function(e){
+	nebula.dom.document.on('wpcf7mailfailed', function(e){
 		var formTime = nebulaTimer(e.target.id, 'end');
 		ga('set', gaCustomDimensions['contactMethod'], 'CF7 Form (Failed)');
 		ga('set', gaCustomDimensions['formTiming'], millisecondsToString(formTime) + 'ms (' + nebulaTimings[e.target.id].laps + ' inputs)');
@@ -1659,7 +1673,7 @@ function cf7Functions(){
 	});
 
 	//CF7 Mail Sent Success (CF7 AJAX response after submit success)
-	nebula.dom.document.on('wpcf7:mailsent', function(e){
+	nebula.dom.document.on('wpcf7mailsent', function(e){
 		var formTime = nebulaTimer(e.target.id, 'end');
 		if ( !jQuery('#' + e.target.id).hasClass('.ignore-form') && !jQuery('#' + e.target.id).find('.ignore-form').length ){
 			ga('set', gaCustomMetrics['formSubmissions'], 1);
@@ -1681,7 +1695,7 @@ function cf7Functions(){
 	});
 
 	//CF7 Submit (CF7 AJAX response after any submit attempt). This triggers after the other submit triggers.
-	nebula.dom.document.on('wpcf7:submit', function(e){
+	nebula.dom.document.on('wpcf7submit', function(e){
 		var formTime = nebulaTimer(e.target.id, 'lap', 'wpcf7-submit-attempt');
 		nvForm(); //nvForm() here because it triggers after all others. No nv() here so it doesn't overwrite the other (more valuable) data.
 		ga('set', gaCustomDimensions['contactMethod'], 'CF7 Form (Attempt)');
@@ -3155,18 +3169,18 @@ function nebulaHTML5VideoTracking(){
 			oThis.on('ended', function(){
 				ga('set', gaCustomMetrics['videoCompletions'], 1);
 				ga('set', gaCustomMetrics['videoPlaytime'], Math.round(videoData[id].watched));
-				ga('set', gaCustomDimensions['videoWatcher'], 'Finished');
+				ga('set', gaCustomDimensions['videoWatcher'], 'Ended');
 				ga('set', gaCustomDimensions['timestamp'], localTimestamp());
 
-				finishedAction = 'Finished';
+				endedAction = 'Ended';
 				if ( !isInView(jQuery('#' + id)) ){
-					finishedAction = 'Finished (Not In View)';
+					endedAction = 'Ended (Not In View)';
 				}
-				ga('send', 'event', 'Videos', finishedAction, videoTitle, Math.round(videoData[id].watched), {'nonInteraction': true});
+				ga('send', 'event', 'Videos', endedAction, videoTitle, Math.round(videoData[id].watched), {'nonInteraction': true});
 
-				ga('send', 'timing', 'Videos', 'Finished', Math.round(videoData[id].watched*1000), videoTitle); //Roughly amount of time watched (Can not be over 100% for Vimeo)
-				nv('append', {'video_finished': videoTitle});
-				nebula.dom.document.trigger('nebula_finished_video', id);
+				ga('send', 'timing', 'Videos', 'Ended', Math.round(videoData[id].watched*1000), videoTitle); //Roughly amount of time watched (Can not be over 100% for Vimeo)
+				nv('append', {'video_ended': videoTitle});
+				nebula.dom.document.trigger('nebula_ended_video', id);
 			});
 		});
 	}
@@ -3279,18 +3293,18 @@ function onPlayerStateChange(e){
         clearTimeout(youtubePlayProgress);
         ga('set', gaCustomMetrics['videoCompletions'], 1);
         ga('set', gaCustomMetrics['videoPlaytime'], Math.round(videoData[id].watched/1000));
-        ga('set', gaCustomDimensions['videoWatcher'], 'Finished');
+        ga('set', gaCustomDimensions['videoWatcher'], 'Ended');
         ga('set', gaCustomDimensions['timestamp'], localTimestamp());
 
-        finishedAction = 'Finished';
+        endedAction = 'Ended';
 		if ( !isInView(jQuery(videoData[id].iframe)) ){
-			finishedAction = 'Finished (Not In View)';
+			endedAction = 'Ended (Not In View)';
 		}
-        ga('send', 'event', 'Videos', finishedAction, videoInfo.title, Math.round(videoData[id].watched/1000), {'nonInteraction': true});
+        ga('send', 'event', 'Videos', endedAction, videoInfo.title, Math.round(videoData[id].watched/1000), {'nonInteraction': true});
 
-        ga('send', 'timing', 'Videos', 'Finished', videoData[id].watched*1000, videoInfo.title); //Amount of time watched (can exceed video duration).
-        nv('append', {'video_finished': videoInfo.title});
-        nebula.dom.document.trigger('nebula_finished_video', videoInfo);
+        ga('send', 'timing', 'Videos', 'Ended', videoData[id].watched*1000, videoInfo.title); //Amount of time watched (can exceed video duration).
+        nv('append', {'video_ended': videoInfo.title});
+        nebula.dom.document.trigger('nebula_ended_video', videoInfo);
     } else if ( e.data === YT.PlayerState.PAUSED && pauseFlag ){
         clearTimeout(youtubePlayProgress);
         ga('set', gaCustomMetrics['videoPlaytime'], Math.round(videoData[id].watched));
@@ -3434,18 +3448,18 @@ function nebulaVimeoTracking(){
 		var videoTitle = id.replace(/-/g, ' ');
 		ga('set', gaCustomMetrics['videoCompletions'], 1);
 		ga('set', gaCustomMetrics['videoPlaytime'], Math.round(videoData[id].watched));
-		ga('set', gaCustomDimensions['videoWatcher'], 'Finished');
+		ga('set', gaCustomDimensions['videoWatcher'], 'Ended');
 		ga('set', gaCustomDimensions['timestamp'], localTimestamp());
 
-		finishedAction = 'Finished';
+		endedAction = 'Ended';
 		if ( !isInView(jQuery(players.vimeo[id])) ){
-			finishedAction = 'Finished (Not In View)';
+			endedAction = 'Ended (Not In View)';
 		}
-		ga('send', 'event', 'Videos', finishedAction, videoTitle, Math.round(videoData[id].watched), {'nonInteraction': true});
+		ga('send', 'event', 'Videos', endedAction, videoTitle, Math.round(videoData[id].watched), {'nonInteraction': true});
 
-		ga('send', 'timing', 'Videos', 'Finished', Math.round(videoData[id].watched*1000), videoTitle); //Roughly amount of time watched (Can not be over 100% for Vimeo)
-		nv('append', {'video_finished': videoTitle});
-		nebula.dom.document.trigger('nebula_finished_video', id);
+		ga('send', 'timing', 'Videos', 'Ended', Math.round(videoData[id].watched*1000), videoTitle); //Roughly amount of time watched (Can not be over 100% for Vimeo)
+		nv('append', {'video_ended': videoTitle});
+		nebula.dom.document.trigger('nebula_ended_video', id);
 	}
 }
 

assets/css/dev.css

@@ -4,7 +4,7 @@
 	Description: Nebula is a springboard WordPress theme framework for developers. Like other WordPress startup themes, it has custom functionality built-in (like shortcodes, styles, and JS/PHP functions), but unlike other themes Nebula is not meant for the end-user.
 	Author: Pinckney Hugo Group
 	Author URI: http://www.pinckneyhugo.com
-	Version: 4.11.14
+	Version: 4.11.16
 	License: GNU General Public License v2.0 or later
 	License URI: http://www.gnu.org/licenses/gpl-2.0.html
 	Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, threaded-comments, theme-options, sticky-post, post-formats, microformats, full-width-template, front-page-post-form, flexible-header, featured-images, featured-image-header, editor-style, custom-menu, custom-colors, accessibility-ready
@@ -437,8 +437,10 @@ iframe[name='google_conversion_frame'] {height: 0 !important; width: 0 !importan
 	}
 }
 
-.nebula-color-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #5B22E8, #FF2362); animation: nebulahero 60s infinite linear; opacity: 0.7; z-index: 0; pointer-events: none;
-	#footer-section &:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1; pointer-events: none;}
+.nebula-color-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #5B22E8, #FF2362); animation: nebulahero 60s infinite linear; opacity: 0.75; z-index: 0; pointer-events: none;
+	#footer-section & {opacity: 0.85;
+		&:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; pointer-events: none;}
+	}
 }
 @keyframes nebulahero {
 	0% {@include prefix((filter: hue-rotate(0deg)));}

assets/css/login.css

@@ -371,6 +371,9 @@
 			});
 		}
 
+		//Autotrack Impressions (Scroll into view)
+		ga('require', 'impressionTracker'); //Elements are detected in main.js (or child.js)
+
 		//Autotrack Max Scroll
 		ga('require', 'maxScrollTracker', {
 			maxScrollMetricIndex: parseInt(gaCustomMetrics['maxScroll'].replace('metric', '')),
@@ -388,8 +391,7 @@
 
 		<?php do_action('nebula_ga_before_send_pageview'); //Hook into for adding more custom definitions before the pageview hit is sent. Can override any above definitions too. ?>
 
-		//Send pageview with all custom dimensions and metrics
-		ga('send', 'pageview');
+		ga('send', 'pageview'); //Send pageview with all custom dimensions and metrics
 
 		<?php do_action('nebula_ga_after_send_pageview'); ?>
 
@@ -438,8 +440,19 @@ function localTimestamp(){return false;}
 		t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
 		document,'script','//connect.facebook.net/en_US/fbevents.js');
 
-		fbq('init', '<?php echo nebula()->option('facebook_custom_audience_pixel_id'); ?>');
+		<?php if ( nebula()->option('visitors_db') ): ?>
+			fbq('init', '<?php echo nebula()->option('facebook_custom_audience_pixel_id'); ?>', {
+				em: '<?php echo nebula()->get_visitor_datapoint('email_address'); ?>',
+				fn: '<?php echo nebula()->get_visitor_datapoint('first_name'); ?>',
+				ln: '<?php echo nebula()->get_visitor_datapoint('last_name'); ?>',
+			});
+		<?php else: ?>
+			fbq('init', '<?php echo nebula()->option('facebook_custom_audience_pixel_id'); ?>');
+		<?php endif; ?>
+
 		fbq('track', 'PageView');
+
+		<?php do_action('nebula_fbq_after_track_pageview'); //Hook into for adding more Facebook custom audience tracking. ?>
 	</script>
 	<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<?php echo nebula()->option('facebook_custom_audience_pixel_id'); ?>&ev=PageView&noscript=1"/></noscript>
 <?php endif; ?>