Torben Lundsgaard

TLA Media

GTM Kit

<p>GTM Kit puts the Google Tag Manager container code on your website so that you don’t need to touch any code. It also pushes data from WooCommerce, Easy Digital Downloads (EDD) and Contact Form 7 to the data layer for use with for Google Analytics 4, Facebook and other GTM tags.</p>
<p>The goal of GTM Kit is to provide a flexible tool for generating the data layer for Google Tag Manager. It is easy to use and doesn’t require any coding, but it allows developers to customize the plugin as needed.</p>
<h3>eCommerce events tracked with Google Analytics 4</h3>
<p>The following GA4 events are automatically included in the dataLayer:</p>
<h3>WooCommerce</h3>
<ul>
<li>view_item_list</li>
<li>select_item</li>
<li>view_item</li>
<li>add_to_wishlist <strong>[Premium]</strong></li>
<li>add_to_cart</li>
<li>view_cart</li>
<li>remove_from_cart</li>
<li>begin_checkout</li>
<li>add_shipping_info</li>
<li>add_payment_info</li>
<li>purchase</li>
<li>refund <strong>[Premium]</strong></li>
<li>order_paid <strong>[Premium]</strong></li>
</ul>
<p>Unlock all features with <a href="https://woocommerce.com/products/gtm-kit-woo-add-on/" rel="nofollow ugc">GTM Kit Woo Add-On</a>.</p>
<h3>Easy Digital Downloads</h3>
<ul>
<li>view_item</li>
<li>add_to_cart</li>
<li>begin_checkout</li>
<li>purchase</li>
</ul>
<h3>Flexible container implementation</h3>
<p>Depending on how you use Google Tag Manager you can delay the loading of the container script until the browser is idle. This may be relevant to you be if are focusing on pagespeed.</p>
<p>You may enter a custom domain name if you are using a custom server side GTM (sGTM) container for tracking. It’s also possible to specify a custom loader. GTM Kit has full support for Stape server GTM hosting.</p>
<h3>Post data</h3>
<p>You may specify which post data elements you wish to include in the dataLayer for use in Google Tag Manager.<br />
– Post type: include the type of the current post or archive page.<br />
– Page type: include a defined page type. I.e. post, page, product, category, cart, checkout etc.<br />
– Categories: include the categories of the current post or archive page.<br />
– Tags: include the tags of the current post or archive page.<br />
– Post title: include the post title of the current post.<br />
– Post ID: include the Post ID of the current post.<br />
– Post date: include the post date.<br />
– Post author name: include the post author name.<br />
– Post author ID: include the post author ID.</p>


GTM Kit – Google Tag Manager & GA4 integration


That plugin was exactly what we've been looking for and testing a couple of paid extensions. This one is super easy to configure and gives the data we exactly needed.



EDD integration is a blast!


Simple, yet effective


We are using the GTM Kit plugin integrated with the Easy Digital Downloads plugin, and it's been working very well for us!



Recently, we faced an issue with the GA4 reports where some purchase events were missing. We immediately reached out to the support team, and they provided a quick fix.



Now it is working fine with EDD.



Thank you!!


Great Solution & Support

Google Tag Manager and GA4 integration. Including WooCommerce data for Google Analytics 4 and support for server side GTM.

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.

GTM Kit – Google Tag Manager & GA4 integration vs Tracking for Divi