Ever wanted to track the built-in contact form from Divi? If you tried using Google Tag Manager's built-in form submit events to do it you probably noticed an inflated number of events flowing.<\/p>\n\n
This is because the form submission event is triggered even if there are form validation errors or the server returns another error.<\/p>\n\n
Since Divi doesn't provide any JavaScript events to hook into there is no straightforward way to find out if a message has actually been sent.<\/p>\n\n
To get around this, this plugin listens to the network communication that is happening underneath. It's based on the same mechanism Divi itself uses.<\/p>\n\n
There are three options now:<\/p>\n\n
You can use either one of them or event all of them together.<\/p>\n\n
You'll be able to customize the dataLayer variable if you're not using the standard naming<\/a>, and the event names, separately for dataLayer and gtag.<\/p>\n\n The structure of the object pushed to the dataLayer is the following, with the default naming:<\/p>\n\n It's up to you to use or discard the form data.<\/p>\n\n The Google Analytics event is sent with flattened parameters:<\/p>\n\n Form data (name, email, message) is included by default. When \"Include all form data\" is enabled, all form fields are flattened into the event parameters.<\/p>\n\n This will only work if you have a Google Tag<\/a> already deployed on the website i.e. the Tracking for Divi: gtag event failed, gtag is not defined<\/p>\n<\/blockquote>\n\n The Google Ads conversion is sent like so:<\/p>\n\n There is no default for This will only work if you have a Google Tag<\/a> already deployed on the website i.e. the Tracking for Divi: Google Ads conversion event failed, gtag is not defined<\/p>\n<\/blockquote>\n\n\n\n Note:<\/strong> This plugin hasn't been thoroughly tested with Divi forms that redirect to a success page. The tracking works just as well, however the redirect could interrupt the tracking flow e.g. if Google Tag Manager has a lot of logic and doesn't trigger the tags in time. The tags themselves these days use the beacon API<\/a> (see MDN<\/a> for reference) so the requests shouldn't be interrupted as long as they are fired before website unload.<\/p>\n\n\n All you need is to install it by uploading the zip file or using the plugin directory from within your WordPress website when the plugin is approved.<\/p>\n\n There is no configuration necessary if you only plan to use the dataLayer. Activate and you're ready to go. However, it will only work if your current theme is Divi<\/em> or its child theme.<\/p>\n\n\n You can use Google Tag Manager to set up a trigger on the Alternatively, if you have gtag.js deployed on your website you can opt for direct reporting on the Settings page.<\/p><\/dd>\n Yes, by default this plugin uses a variable named Yes, by default this plugin uses a Data layer reporting<\/h4>\n\n
{\n event: \"contact_form_submit\",\n formId: string,\n postId: number,\n formData: {\n name: string,\n email: string,\n message: string,\n },\n allFormData?: Record<string, unknown>, \/\/ when \"Include all form data\" is enabled\n}\n<\/code><\/pre>\n\nGoogle Analytics 4 reporting<\/h4>\n\n
gtag(\n \"event\",\n \"contact_form_submit\",\n {\n form_id: \"divi\/contact-form-0\",\n name: \"John\",\n email: \"john@example.com\",\n message: \"Hello\",\n \/\/ additional fields when \"Include all form data\" is enabled\n }\n);\n<\/code><\/pre>\n\ngtag()<\/code> function is available.<\/em> Otherwise, you will see a warning in your console like this:<\/p>\n\n\n
Google Ads conversion reporting<\/h4>\n\n
gtag(\n \"event\",\n \"conversion\",\n {\n send_to: \"<conversion_id>\/<conversion_label>\",\n }\n);\n<\/code><\/pre>\n\nconversion_id<\/code> and conversion_label<\/code> as they are always created individually in Google Ads.<\/p>\n\ngtag()<\/code> function is available.<\/em> Otherwise, you will see a warning in your console like this:<\/p>\n\n\n
\n
How do I track form submissions with Google Analytics?<\/h3><\/dt>\n
contact_form_submit<\/code> event (default name) and set up a Google Analytics event tag that will be sent on the trigger.<\/p>\n\nCan I use a renamed dataLayer variable?<\/h3><\/dt>\n
dataLayer<\/code>, however you can change that on the Settings page.<\/p><\/dd>\nCan I use a different event name?<\/h3><\/dt>\n
contact_form_submit<\/code> event, however you can change that on the Settings page.<\/p><\/dd>\n\n<\/dl>","raw_excerpt":"Track successful Divi contact form submissions with dataLayer events, Google Analytics, and Google Ads conversions.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/284539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=284539"}],"author":[{"embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kubawtf"}],"wp:attachment":[{"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=284539"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=284539"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=284539"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=284539"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=284539"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=284539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}