Kuba Serafinowski

<p>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>
<p>This is because the form submission event is triggered even if there are form validation errors or the server returns another error.</p>
<p>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>
<p>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>
<p>There are three options now:</p>
<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>
<p>You can use either one of them or event all of them together.</p>
<p>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.</p>
<h4>Data layer reporting</h4>
<p>The structure of the object pushed to the dataLayer is the following, with the default naming:</p>
<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>
<p>It’s up to you to use or discard the form data.</p>
<h4>Google Analytics 4 reporting</h4>
<p>The Google Analytics event is sent with flattened parameters:</p>
<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>
<p>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>
<p><em>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.</em> Otherwise, you will see a warning in your console like this:</p>
<blockquote>
<p>Tracking for Divi: gtag event failed, gtag is not defined</p>
</blockquote>
<h4>Google Ads conversion reporting</h4>
<p>The Google Ads conversion is sent like so:</p>
<pre><code>gtag(
  "event",
  "conversion",
  {
    send_to: "<conversion_id>/<conversion_label>",
  }
);
</code></pre>
<p>There is no default for <code>conversion_id</code> and <code>conversion_label</code> as they are always created individually in Google Ads.</p>
<p><em>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.</em> Otherwise, you will see a warning in your console like this:</p>
<blockquote>
<p>Tracking for Divi: Google Ads conversion event failed, gtag is not defined</p>
</blockquote>
<p><strong>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 <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.</p>


Tracking for Divi

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

Scripts + Pixels Studio

<p>Scripts + Pixels DataLayer Manager automatically creates and manages a dataLayer object for your WordPress site. This object contains structured data about your pages, posts, products, and user interactions that can be used by analytics tools like Google Tag Manager (GTM) and Google Analytics 4 (GA4).</p>
<p><strong>No coding required!</strong> The plugin automatically detects WordPress and WooCommerce data and injects it into the dataLayer on every page.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Automatic Detection</strong> – Automatically detects page type, post data, categories, tags, and more</li>
<li><strong>WooCommerce Support</strong> – Detects product data, pricing, cart information, and checkout details</li>
<li><strong>Zero Configuration</strong> – Works out of the box with no setup required</li>
<li><strong>Clean Code</strong> – Follows WordPress coding standards and best practices</li>
<li><strong>Developer Friendly</strong> – Well-documented code and extensible hooks</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Visit any page on your website</li>
<li>Open browser Developer Tools (F12)</li>
<li>Type <code>dataLayer</code> in the console</li>
<li>See all automatically detected variables!</li>
</ol>
<h4>WordPress Variables</h4>
<p>The plugin automatically detects and injects variables like:</p>
<ul>
<li><code>pageType</code> – Type of page (post, page, category, tag, archive, search, 404, etc.)</li>
<li><code>postId</code> – Post/Page ID</li>
<li><code>postTitle</code> – Post/Page title</li>
<li><code>postAuthor</code> – Author name</li>
<li><code>postCategory</code> – Post categories</li>
<li><code>postTags</code> – Post tags</li>
<li><code>isLoggedIn</code> – Whether user is logged in</li>
<li><code>siteName</code> – Site name</li>
<li><code>siteUrl</code> – Site URL</li>
<li>And more…</li>
</ul>
<h4>WooCommerce Variables</h4>
<p>When WooCommerce is active, additional variables are automatically detected:</p>
<ul>
<li><code>productId</code> – Product ID</li>
<li><code>productName</code> – Product name</li>
<li><code>productPrice</code> – Product price</li>
<li><code>productQuantity</code> – Product quantity</li>
<li><code>cartTotal</code> – Cart total</li>
<li><code>checkoutStep</code> – Checkout step</li>
<li>And more…</li>
</ul>
<h4>Free vs Premium</h4>
<p><strong>Free Version Includes:</strong><br />
* Automatic detection of WordPress and WooCommerce variables<br />
* Works on all page types (posts, pages, products, archives, etc.)<br />
* Zero configuration required</p>
<p><strong>Premium Version Adds:</strong><br />
* Custom variables per page/post/product<br />
* Visual editor in WordPress admin<br />
* Preview auto-detected variables before publishing<br />
* Priority support and updates</p>


Scripts + Pixels DataLayer Manager

Automatically detects WordPress context and injects dataLayer variables for analytics tools (GA4/GTM). No coding required.

Tracking for Divi vs Scripts + Pixels DataLayer Manager