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.

Openmost

<p>Elevate your website analytics with the DataLayer plugin!<br />
This robust plugin creates a fully populated and standardized dataLayer object, ensuring seamless integration with both Google Tag Manager and Matomo Tag Manager.</p>
<ul>
<li>Instant Setup: Automatically generates and populates a dataLayer object with essential website and user interaction data.</li>
<li>Universal Compatibility: Works flawlessly with Google Tag Manager and Matomo Tag Manager, making it easier to manage your tagging needs.</li>
<li>Customizable Data: Easily add or modify data points to fit your specific tracking requirements.</li>
<li>Performance Optimized: Lightweight and optimized for speed to ensure your site remains fast and responsive.</li>
</ul>
<p>Get a quick look at all the generated structures!</p>
<h4>Archive page `dataLayer` structure</h4>
<p>Easy access to your archive data with a standard event name and subject.</p>
<pre><code>{
    "event": "view_archive_date", //_date may be replaces with _tax value
    "page": {
        "type": "archive",
        "title": "january 2025 - Example",
        "url": "https://example.com/2025/01",
        "path": "2025/01",
        "locale": "en_US",
        "archive_type": "date",
        "taxonomy": false,
        "post_type": false,
        "date": {
            "year": 2025,
            "month": 1,
            "day": null
        }
    }
}
</code></pre>
<h4>Author page `dataLayer` structure</h4>
<p>Easy access to all author details on his archive page.</p>
<pre><code>{
    "event": "view_author",
    "page": {
        "id": 1,
        "nickname": "openmost",
        "display_name": "openmost",
        "first_name": "Ronan",
        "last_name": "HELLO",
        "description": "The creator of this super plugin",
        "type": "author",
        "url": "https://example.com/author/openmost",
        "path": "author/openmost",
        "title": "Author: openmost"
    }
}
</code></pre>
<h4>Error page `dataLayer` structure</h4>
<p>This <code>dataLayer</code> structure allows you to easily track the 404 error and detect the referring page that led to this error.<br />
What a great trick yeah?</p>
<pre><code>{
    "event": "view_error_404",
    "page": {
        "type": "error",
        "title": "Page not found - Website",
        "url": "https://example.com/url-that-encountered-a-404-error",
        "path": "/url-that-encountered-a-404-error",
        "locale": "en_US",
        "error_type": "404",
        "http_status_code": 404
    }
}
</code></pre>
<h4>Search results page `dataLayer` structure</h4>
<p>The search key in this object allows you to get the search term and total results to detect invalid searches.<br />
Very useful for Matomo Tag Manager, and nice hack for Google Tag Manager.</p>
<pre><code>{
    "event": "view_search_results",
    "page": {
        "type": "search",
        "url": "https://example.com",
        "path": "",
        "title": "You searched for Demo - Example",
        "locale": "en_US"
    },
    "search": {
        "search": "Demo",
        "search_cat": "",
        "search_count": 3,
        "query": "Demo",
        "found_posts": 3,
        "post_count": 3
    }
}
</code></pre>
<h4>Home, Post Type `dataLayer` structure (blog posts, custom post type single page)</h4>
<p>The following structure is generated for a single post page, but it automatically adapts to your custom post type, page, etc.</p>
<pre><code>{
    "event": "view_single_post",
    "page": {
        "type": "post",
        "id": 1,
        "url": "https://example.com/blog/super-article-path",
        "path": "/blog/super-article-path",
        "title": "Super article title | Example",
        "locale": "en_US",
        "is_home": false,
        "is_front_page": false,
        "post_name": "super-article-path",
        "post_title": "Super article title",
        "post_excerpt": "",
        "post_status": "publish",
        "post_date": "2024-08-17 13:30:00",
        "post_date_gmt": "2024-08-17 13:30:00",
        "post_modified": "2024-08-17 13:30:00",
        "post_modified_gmt": "2024-08-17 13:30:00",
        "post_type_name": "post",
        "post_type_label": "Posts",
        "post_type": {
            "name": "post",
            "label": "Posts",
            "label_singular": "Post",
            "label_plural": "Posts",
            "description": "The super post type description"
        },
        "guid": "https://example.com/?p=1",
        "post_mime_type": false,
        "comment_status": "open",
        "comment_count": "0",
        "author": {
            "id": 1,
            "nickname": "openmost",
            "display_name": "openmost",
            "first_name": "Ronan",
            "last_name": "HELLO",
            "description": "The creator of this super plugin"
        },
        "taxonomies": {
            "category": {
                "name": "category",
                "label": "Categories",
                "description": "",
                "object_type": [
                    "post"
                ],
                "terms": {
                    "Uncategorized": {
                        "term_id": 1,
                        "slug": "uncategorized",
                        "name": "Uncategorized",
                        "term_group": 0,
                        "term_taxonomy_id": 1,
                        "taxonomy": "category",
                        "description": "",
                        "parent": 0,
                        "count": 1,
                        "filter": "raw"
                    }
                },
                "primary_term": [] //Filled only with YoastSEO plugin
            }
        },
        "category": [
            "Uncategorized"
        ],
        "page_template": ""
    }
}
</code></pre>
<h4>Term and taxonomy page `dataLayer` structure</h4>
<pre><code>{
    "event": "view_archive_category", // this event name changed for every taxonomy
    "page": {
        "type": "archive",
        "title": "Uncategorized archives - Example",
        "url": "https://example.com/blog/category/uncategorized",
        "path": "blog/category/uncategorized",
        "locale": "en_US",
        "archive_type": "taxonomy",
        "taxonomy": "category",
        "post_type": "category",
        "date": {
            "year": null,
            "month": null,
            "day": null
        }
    }
}
</code></pre>
<h4>Pagination `dataLayer` structure</h4>
<p>The <code>pagination</code> object structure is automatically added to all pages that have pagination.</p>
<p>Easy access to your pagination data, detect if users are using your pagination as much as you want.</p>
<pre><code>{
    pagination: {
        "posts_per_page": 10,
        "post_count": 1,
        "paged": true,
        "page_number": 2,
        "max_num_pages": 5
    }
}
</code></pre>
<h4>Authenticated user `dataLayer` structure</h4>
<p>The <code>user</code> object is automatically added to all page when user is logged in.</p>
<p>User hashed data with SHA256 is very useful for GDPR consent with Google Ads services and user provided data.</p>
<pre><code>{
    user: {
        "id": 1,
        "user_login": "openmost",
        "user_nicename": "Openmost",
        "user_email": "no-reply@openmost.io",
        "user_registered": "2024-01-01 12:00:00",
        "display_name": "openmost",
        "roles": [
            "administrator"
        ],
        "sha256_id": "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b",
        "sha256_user_login": "b2754b994c2fb636d1943ac0170f4ea192a891fb0f09cfdd100a9ffa983f053d",
        "sha256_user_email": "679d031c25e557ee84ca86ecaf333ccd8d3d1a3900ee728da83d79a819daf535"
    }
}
</code></pre>
<h4>Plugin : Contact Form 7 `dataLayer` structure</h4>
<p>This plugin automatically detects the use of WP Contact Form 7.<br />
No configuration needed.</p>
<p>Form submitted</p>
<pre><code>{
    "event": "wpcf7_submit",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Form with invalid fields</p>
<pre><code>{
    "event": "wpcf7_invalid",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Form spamming detected</p>
<pre><code>{
    "event": "wpcf7_spam",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Email sent successfully</p>
<pre><code>{
    "event": "wpcf7_mail_sent",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>Failed to send mail</p>
<pre><code>{
    "event": "wpcf7_mail_failed",
    "wpcf7_form_id": 145,
    "wpcf7_form_detail": {} // See wpcf7_form_details below
}
</code></pre>
<p>As each event handles <code>wpcf7_form_details</code>, here is an example of the object values when the form is submitted with invalid fields.</p>
<pre><code>"wpcf7_form_detail": {
        "contactFormId": 145,
        "pluginVersion": "6.0.3",
        "contactFormLocale": "en_US",
        "unitTag": "wpcf7-xxxxxx",
        "containerPostId": 0,
        "status": "validation_failed",
        "inputs": [
            {
                "name": "your-message",
                "value": ""
            },
            {
                "name": "your-name",
                "value": ""
            },
            // All other inputs
        ],
        "formData": {},
        "apiResponse": {
            "contact_form_id": 145,
            "status": "validation_failed",
            "message": "One or more fields contain an error. Please check and try again.",
            "invalid_fields": [
                {
                    "field": "your-name",
                    "message": "Please complete this field..",
                    "idref": "last_name",
                    "error_id": "wpcf7-f145-o1-ve-your-name"
                },
                {
                    "field": "your-first-name",
                    "message": "Please complete this field.",
                    "idref": "first_name",
                    "error_id": "wpcf7-f145-o1-ve-your-first-name"
                },
                // All other invalid fields
            ],
            "posted_data_hash": "",
            "into": "#wpcf7-f145-o1"
        }
    }
</code></pre>
<h4>Plugin : WP Forms `dataLayer` structure</h4>
<pre><code>{
    event: 'wp_forms_submit',
    wp_forms_form_detail: {} // the HTML tag found in DOM
}
</code></pre>


DataLayer for GTM and Matomo

Add contextual information to dataLayer for GTM and MTM

Tracking for Divi vs DataLayer for GTM and Matomo