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.

ashish963

<p>WP Saint is for everyone, for developers to marketers, anyone can use WP Saint and put they analytics implementation is good Shape.<br />
Do you wish to deploy a data layer on your website? WP Saint will deploy data layer on all pages of your website.<br />
Do you wish to start tracking your website using Google Analytics? WP Saint will implement Google Analytics on your website like a pro.<br />
Do you wish to add Google Tag Manager to your website? WP Saint will deploy Google Tag Manager like a pro on all your web pages in seconds.<br />
Do you wish add Facebook Pixel to your website? WP Saint will add FB Pixel to your website like a pro.<br />
WP Saint will deploy analytics on your behalf so that you can start tracking website usage, user behavior, content consumption, eCommerce transactions etc. appropriately. WP Saint is developed by PRO digital marketers and will be your one-point solution for all implementation requirements.<br />
WP Saint is an easy to use plugin that let you deploy Analytics to your website. This lets you capture business critical information without any errors and no coding knowledge is required. You will be able to customize your analytics implementation exactly the way you?d like.<br />
First, activate and set up the plugin, which makes your site have a data layer ready to offer you all useful information that you will require. Then, each of the setting options will let you add Google Analytics or Google Tag Manager, Facebook Pixel, Web Master Verification Codes, one by one.</p>
<h4>Taking care of your dataLayer</h4>
<p>You can deploy dataLayer literally in seconds.<br />
* Most advanced data layer functionality<br />
* Capture visitor information<br />
* Capture WordPress user information<br />
* Start tracking visit time information<br />
* Captures internal searches<br />
* Captures page / post information<br />
* Captures external campaign details<br />
* Captures internal promotions<br />
* Captures e-commerce and shop details<br />
* Compatible with all tag managers</p>
<h3>From within WordPress</h3>
<ol>
<li>Visit \’Plugins > Add New\’</li>
<li>Search for \’WP Saint\’</li>
<li>Activate WP Saint from your Plugins page.</li>
<li>Go to \”WP Saint\” from menu in left hand side</li>
</ol>
<h3>Manually</h3>
<ol>
<li>Upload the <code>wp-saint</code> folder to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the ?WP Saint? plugin through the \’Plugins\’ menu in WordPress</li>
<li>Go to \”WP Saint\” from menu in left hand side</li>
</ol>
<h3>After activation</h3>
<ol>
<li>Visit WP Saint options through menu in left hand side rail</li>
<li>Start configuring plugin one by one using links within WP Saint</li>
<li>You\’re done!</li>
</ol>


WP Saint

Implements web analytics like a pro. We took care of all your headache. Deploys data layer, Google Analytics, FB pixel & Tag Manager in minutes.

Tracking for Divi vs WP Saint