Kuba Serafinowski

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.
This is because the form submission event is triggered even if there are form validation errors or the server returns another error.
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.
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.
There are three options now:
<ol>
<li>a <a href="https://developers.google.com/tag-platform/tag-manager/datalayer" rel="nofollow ugc">dataLayer</a> event</li>
<li>a <a href="https://support.google.com/analytics/answer/12229021" rel="nofollow ugc">Google Analytics 4 event</a> (using gtag.js)</li>
<li>a <a href="https://support.google.com/google-ads/answer/1722022" rel="nofollow ugc">Google Ads conversion</a> (also using gtag.js)</li>
</ol>
You can use either one of them or event all of them together.
You’ll be able to customize the dataLayer variable if you’re <a href="https://developers.google.com/tag-platform/tag-manager/datalayer#rename_the_data_layer" rel="nofollow ugc">not using the standard naming</a>, and the event names, separately for dataLayer and gtag.
<h4>Data layer reporting</h4>
The structure of the object pushed to the dataLayer is the following, with the default naming:
<pre><code>{
 event: "contact_form_submit",
 formId: string,
 postId: number,
 formData: {
 name: string,
 email: string,
 message: string,
 },
 allFormData?: Record<string, unknown>, // when "Include all form data" is enabled
}
</code></pre>
It’s up to you to use or discard the form data.
<h4>Google Analytics 4 reporting</h4>
The Google Analytics event is sent with flattened parameters:
<pre><code>gtag(
 "event",
 "contact_form_submit",
 {
 form_id: "divi/contact-form-0",
 name: "John",
 email: "john@example.com",
 message: "Hello",
 // additional fields when "Include all form data" is enabled
 }
);
</code></pre>
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.
This will only work if you have a <a href="https://support.google.com/google-ads/answer/11994839" rel="nofollow ugc">Google Tag</a> already deployed on the website i.e. the <code>gtag()</code> function is available. Otherwise, you will see a warning in your console like this:
<blockquote>
Tracking for Divi: gtag event failed, gtag is not defined
</blockquote>
<h4>Google Ads conversion reporting</h4>
The Google Ads conversion is sent like so:
<pre><code>gtag(
 "event",
 "conversion",
 {
 send_to: "<conversion_id>/<conversion_label>",
 }
);
</code></pre>
There is no default for <code>conversion_id</code> and <code>conversion_label</code> as they are always created individually in Google Ads.
This will only work if you have a <a href="https://support.google.com/google-ads/answer/11994839" rel="nofollow ugc">Google Tag</a> already deployed on the website i.e. the <code>gtag()</code> function is available. Otherwise, you will see a warning in your console like this:
<blockquote>
Tracking for Divi: Google Ads conversion event failed, gtag is not defined
</blockquote>
Note: 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 <a href="https://support.google.com/analytics/answer/9964640#event-batching" rel="nofollow ugc">use the beacon API</a> (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API" rel="nofollow ugc">MDN</a> for reference) so the requests shouldn’t be interrupted as long as they are fired before website unload.

Tracking for Divi

Track successful Divi contact form submissions with dataLayer events, Google Analytics, and Google Ads conversions.

antoniolite

Integrates Google Tag Manager into WordPress and generates an advanced dataLayer, optimized for blogs, newspapers, magazines, and other digital media.
GTM4Publishers is a specialized plugin for digital publishers who need advanced and detailed content tracking. The plugin smartly integrates Google Tag Manager and automatically generates a rich dataLayer with specific information for each post.
Main Features:
<ul>
<li>Full Google Tag Manager management: Automatically inserts GTM code in the correct positions (head and body)</li>
<li>Advanced dataLayer: Automatically generates a detailed dataLayer with post-specific information</li>
<li>Pre-configured GTM container: Includes a ready-to-import JSON file with complete configuration</li>
<li>Dual event system: Distinguishes between “view” (page load) and “read” (real engagement)</li>
<li>Flexible configuration: Choose between inserting the full GTM code or just generating the dataLayer</li>
<li>Intuitive custom fields: Set access type and evergreen content directly from the post editor</li>
<li>Configurable CSS selectors: Adapt the plugin to any theme using customizable CSS selectors</li>
<li>Optimized for publishers: Includes specific metrics like reading time, multimedia, hierarchical categories, etc.</li>
<li>Internationalization: English (default), Spanish, and Russian translations included</li>
<li>Security: All user input is sanitized and escaped following WordPress best practices</li>
</ul>
<h3>External Services</h3>
This plugin may connect to Google Tag Manager (GTM) services when the user chooses to insert GTM code on their website.
Google Tag Manager (Optional Integration):
<ul>
<li>What it is and what it’s used for: Google Tag Manager is a tag management system that allows you to quickly and easily update measurement codes and related code fragments (collectively called “tags”) on your website or mobile app. This plugin can optionally insert GTM code to enable advanced analytics and tracking capabilities.</li>
<li>What data is sent and when: When GTM integration is enabled, the plugin sends page view data and user interaction information to Google Tag Manager. This includes post metadata (categories, tags, author, publication date), content analysis (word count, reading time, multimedia content), and user behavior data (referrer, origin, engagement metrics). Data is sent when users visit individual post pages and when they interact with content (reading events).</li>
<li>When it’s used: GTM integration is completely optional and is only activated if the user explicitly enables the “Insert GTM Code” option in the plugin settings. By default, the plugin only generates a dataLayer without connecting to any external services.</li>
<li>Service provider: Google Tag Manager is provided by Google LLC.</li>
<li>Terms of Service: https://marketingplatform.google.com/about/analytics/terms/</li>
<li>Privacy Policy: https://policies.google.com/privacy</li>
</ul>
Important Note: The plugin is designed to work without any external services. The GTM integration is an optional feature that users can choose to enable or disable. When disabled, the plugin only generates a local dataLayer without sending any data to external services.
<h3>Credits</h3>
Developed by Antonio Lite — <a href="https://www.antoniolite.com" rel="nofollow ugc">https://www.antoniolite.com</a> 
Telegram support group — <a href="https://t.me/GTM4Publishers" rel="nofollow ugc">https://t.me/GTM4Publishers</a>
<h3>Donate link</h3>
<a href="https://coff.ee/antoniolite" rel="nofollow ugc">https://coff.ee/antoniolite</a>

GTM4Publishers – Smart content tracking for blogs, news sites and magazines

Integrate Google Tag Manager into WordPress and generate an advanced, customizable dataLayer for publishers, blogs, and digital media.

Tracking for Divi vs GTM4Publishers – Smart content tracking for blogs, news sites and magazines