Remove Contact Form 7 form event jQuery API

assets/js/controls.js

@@ -1,74 +1,38 @@
 /* eslint camelcase: warn */
-
-( function( $ ) {
-
-	var jQueryEvent, formEventCallback;
+( function() {
+	var formEventCallback;
 
 	var formEventCallbacks = {
-		wpcf7mailsent: function( form ) {
-			var formConfig;
-
-			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-				formConfig = getFormConfig( form.contactFormId );
-				trackAnalyticsEvent( 'Contact Form', 'Sent', formConfig.title );
-			}
+		wpcf7mailsent: function( form, formConfig ) {
+			trackAnalyticsEvent( 'Contact Form', 'Sent', formConfig.title );
 		},
-		wpcf7mailfailed: function( form ) {
-			var formConfig;
-
-			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-				formConfig = getFormConfig( form.contactFormId );
-				trackAnalyticsEvent( 'Contact Form', 'Error', formConfig.title );
-			}
+		wpcf7mailfailed: function( form, formConfig ) {
+			trackAnalyticsEvent( 'Contact Form', 'Error', formConfig.title );
 		},
-		wpcf7spam: function( form ) {
-			var formConfig;
-
-			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-				formConfig = getFormConfig( form.contactFormId );
-				trackAnalyticsEvent( 'Contact Form', 'Spam', formConfig.title );
-			}
+		wpcf7spam: function( form, formConfig ) {
+			trackAnalyticsEvent( 'Contact Form', 'Spam', formConfig.title );
 		},
-		wpcf7submit: function( form ) {
-			var formConfig;
+		wpcf7submit: function( form, formConfig ) {
+			var errorStati = [ 'validation_failed', 'acceptance_missing', 'spam', 'aborted', 'mail_failed' ];
 
-			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-				formConfig = getFormConfig( form.contactFormId );
+			if ( form.status && -1 === errorStati.indexOf( form.status ) ) {
 				trackAnalyticsEvent( 'Contact Form', 'Submit', formConfig.title );
+			} else {
+				trackAnalyticsEvent( 'Contact Form', form.status, formConfig.title );
 			}
 
-			if ( form.contactFormId && 'mail_sent' === form.status && formEventEnabled( form.contactFormId, 'redirect-success' ) ) {
-				formConfig = getFormConfig( form.contactFormId );
-
-				if ( formConfig.redirect_url ) {
-					window.location = formConfig.redirect_url;
-				}
+			if ( 'mail_sent' === form.status && formEventEnabled( form.contactFormId, 'redirect-success' ) && formConfig.redirect_url ) {
+				window.location = formConfig.redirect_url;
 			}
 		}
 	};
 
-	var jQueryEvents = {
-		'wpcf7:mailsent': function( event, form ) {
-			formCallbacks.wpcf7mailsent( form );
-		},
-		'wpcf7:mailfailed': function( event, form ) {
-			formCallbacks.wpcf7mailfailed( form );
-		},
-		'wpcf7:spam': function( event, form ) {
-			formCallbacks.wpcf7spam( form );
-		},
-		'wpcf7:submit': function( event, form ) {
-			formCallbacks.wpcf7submit( form );
-		}
-	};
-
 	function trackAnalyticsEvent( eventCategory, eventAction, eventTitle ) {
 
 		// Helper method required for the event to be registered by gtag.js.
 		var dataLayerPush = function() {
-			if ( 'object' === typeof window.dataLayer && 'function' === typeof window.dataLayer.push ) {
-				window.dataLayer.push( arguments );
-			}
+			window.dataLayer = window.dataLayer || [];
+			window.dataLayer.push( arguments );
 		};
 
 		// GA via Google Tag Manager or Global Site Tag (gtag.js).
@@ -99,8 +63,8 @@
 		// Facebook Pixel contact event.
 		if ( 'function' === typeof fbq ) {
 			fbq( 'track', 'Contact', {
 				content_category: eventAction,
 				content_name: eventTitle
 			} );
 		}
 	};
@@ -137,18 +101,15 @@
 	// Register the new JS events in CF7 version 5.2 and above.
 	if ( 'function' === typeof document.addEventListener ) {
 		for ( formEventCallback in formEventCallbacks ) {
-			document.addEventListener( formEventCallback, function( event ) {
-				if ( event.type in formEventCallbacks ) {
-					formEventCallbacks[ event.type ].call( event, event.detail );
+			document.addEventListener(
+				formEventCallback,
+				function( event ) {
+					if ( event.type in formEventCallbacks && formEventEnabled( event.detail.contactFormId, 'track-ga' ) ) {
+						formEventCallbacks[ event.type ].call( event, event.detail, getFormConfig( event.detail.contactFormId ) );
+					}
 				}
-			} );
-		}
-
-	// Register the legacy jQuery events pre CF7 version 5.2.
-	} else if ( 'function' === typeof $ ) {
-		for ( jQueryEvent in jQueryEvents ) {
-			$( document ).on( jQueryEvent, jQueryEvents[ jQueryEvent ] );
+			);
 		}
 	}
 
-}( jQuery ) );
+}() );

readme.md

@@ -41,3 +41,45 @@ We use [Composer](https://getcomposer.org) for managing PHP development dependen
 ## Screenshot
 
 ![Contact Form 7 Controls](screenshot-1.png)
+
+## Sample Analytics Scripts
+
+Note: all scripts use a fake account ID `abc123`.
+
+Google Tag Manager (GTM):
+
+```html
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-abc123');</script>
+```
+
+Google Analytics 4 (gtag.js):
+
+```html
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-abc123"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-abc123');
+</script>
+```
+
+Facebook Pixel:
+
+```html
+<script>
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  fbq('init', 'abc123');
+</script>
+```

src/class-cf7-extras.php

@@ -348,19 +348,19 @@ public function wpcf7_metabox( $cf7 ) {
 			);
 		}
 
-		// Place the storage links on top.
-		$fields = array_merge(
-			array( 'extra-cf7-storage' => $storage_field ),
-			$fields
-		);
-
 		/**
 		 * Let plugins add items to the settings.
 		 *
 		 * @param array $fields List of fields to display.
 		 */
 		$fields = apply_filters( 'cf7_extras__controls_fields', $fields, $settings );
 
+		// Place the storage links on top.
+		$fields = array_merge(
+			array( 'extra-cf7-storage' => $storage_field ),
+			$fields
+		);
+
 		$rows = array();
 
 		foreach ( $fields as $field_id => $field ) {
@@ -622,7 +622,7 @@ public function track_form_events() {
 		wp_enqueue_script(
 			'cf7-extras',
 			$this->asset_url( 'assets/js/controls.js' ),
-			array( 'contact-form-7', 'jquery' ),
+			array( 'contact-form-7' ),
 			self::ASSET_VERSION,
 			true
 		);