diff --git a/assets/js/controls.js b/assets/js/controls.js index 6755a80..c9c450c 100644 --- a/assets/js/controls.js +++ b/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). @@ -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 ) ); +}() ); diff --git a/readme.md b/readme.md index a509b0c..5a0bed3 100644 --- a/readme.md +++ b/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 + +``` + +Google Analytics 4 (gtag.js): + +```html + + +``` + +Facebook Pixel: + +```html + +``` diff --git a/src/class-cf7-extras.php b/src/class-cf7-extras.php index e14182e..6dcee40 100644 --- a/src/class-cf7-extras.php +++ b/src/class-cf7-extras.php @@ -348,12 +348,6 @@ 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. * @@ -361,6 +355,12 @@ public function wpcf7_metabox( $cf7 ) { */ $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 );