Ronald Huereca

Marco Pereirinha

ruskinconsulting

Leon Hitchens

Integrate Google Tag Manager into your website.
The great thing about Google Tag Manager (GTM) is that you are able to gather most of your tracking scripts in one place. You can then fire these scripts whenever you want, specified by the rules you set up. This sounds great, right? Well it is. The only problem is that sometimes it takes a bit of implementing to set these rules up. This implementation can either be setting a dataLayer variable in the dataLayer before the tag manager script is loaded, or pushing a HTML event handler with the variable “event” to the dataLayer when a button is clicked. The problem is that this isn’t always that easy to do when you don’t have the ability/access to add the code to your site.
This is where the Metronet Tag Manager plugin shines. It really unlocks the power of the dataLayer so you can easily set macros and firing rules on almost any element.
This plugin lets you:
<ul>
<li>Easily add as many dataLayer variables on a per-post and per-page basis as you need.</li>
<li>The plugin already gives you six predefined dataLayer variables that you can change/remove or test the system with. These will be loaded on all pages and posts.</li>
<li>Set up separate dataLayer variables for pages that aren’t posts or pages (like archives etc).</li>
<li>Lets you easily add a HTML event handler to any content link with the GTM TinyMCE button in the WYSIWYG.</li>
<li>Lets you add your own unique ID or a class to each content link with the GTM TinyMCE button in the WYSIWYG.</li>
</ul>
Please note that for this plugin to work there is a slight customization that is needed. WordPress doesn’t let you load scripts straight after the opening tag which is where the GTM script needs to be placed to work correctly. To fix this you need to add <code><?php do_action( 'body_open' ); ?></code> just after the <code><body></code> tag and that’s it.
<blockquote>
Note, if you are using WordPress 5.2. and up, contact your theme developer and ask them to insert <code><?php wp_body_open(); ?></code> just after the opening body tag of their theme. Here is some code to <a href="https://gist.github.com/ronalfy/6b7f43e70e644320aba67d1876a0aeff" rel="nofollow ugc">show the theme developer to make it compatible with Metronet Tag Manager</a>.
</blockquote>
Please let us know if you have any feature requests or if you have any issues with this plugin.
Below are a couple of resources you might find valuable if you are new to Google Tag Manager
Official Google Tag Manager website 
https://developers.google.com/tag-manager/
Tracking Google Analytics Events with Google Tag Manager 
http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
Make Analytics Better with Tag Management and a Data Layer 
http://cutroni.com/blog/2012/05/14/make-analytics-better-with-tag-management-and-a-data-layer/
<h3>Filtering Variables</h3>
If you choose to place variable values inside percentage signs (e.g., %replace_test%), you can filter these as necessary.
Here’s an example:
<pre><code>add_filter( 'gtm_replace_test', 'gtm_replace_test', 10, 3 );
function gtm_replace_test( $total_match, $match, $post_id ) {
 return "replaced with content";
}
</code></pre>
The filter name is <code>gtm_</code> with the suffix of <code>replace_test</code>, since that content is inbetween the percentage signs.

Metronet Tag Manager

Simple, unobtrusive - great plugin. 

And whenver i see the name i always think
"If young metro don't trust you?"

This plugin is awesome

The plugin is helpful with installing Google Tag Manager. Works on WordPress multisite websites. The plugin is simple, straightforward, and more secure than a simple "insert headers or footers" plugin. 

Easily Add GTM to any Website

Integrate Google Tag Manager into  your website.

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.

Metronet Tag Manager vs Tracking for Divi