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

+
+## 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
);