Ronald Huereca

Marco Pereirinha

ruskinconsulting

<p>Integrate Google Tag Manager into your website.</p>
<p>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 some time to set these rules up. This implementation can either set a dataLayer variable in the dataLayer before the tag manager script is loaded or push an 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.</p>
<p>This is where the Metronet Tag Manager plugin shines. It unlocks the power of the dataLayer so you can easily set macros and firing rules on almost any element.</p>
<p>This plugin lets you:</p>
<ul>
<li>Easily add as many dataLayer variables per-post and per-page basis as needed.</li>
<li>The plugin already gives you six predefined dataLayer variables 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 an HTML event handler to any content link with the GTM TinyMCE button in the WYSIWYG.</li>
<li>Lets you add your unique ID or a class to each content link with the GTM TinyMCE button in the WYSIWYG.</li>
</ul>
<p>Please note that for this plugin to work, a slight customization is needed. WordPress doesn’t let you load scripts straight after the opening  tag, 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.</p>
<blockquote>
<p>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>.</p>
</blockquote>
<p>Please let us know if you have any feature requests or issues with this plugin.</p>
<p>Below are a couple of resources you might find valuable if you are new to Google Tag Manager</p>
<p>Official Google Tag Manager website<br />
https://developers.google.com/tag-manager/</p>
<p>Tracking Google Analytics Events with Google Tag Manager<br />
http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager</p>
<p>Make Analytics Better with Tag Management and a Data Layer<br />
http://cutroni.com/blog/2012/05/14/make-analytics-better-with-tag-management-and-a-data-layer/</p>
<h3>Filtering Variables</h3>
<p>If you choose to place variable values inside percentage signs (e.g., %replace_test%), you can filter these as necessary.</p>
<p>Here’s an example:</p>
<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>
<p>The filter name is <code>gtm_</code> with the suffix of <code>replace_test</code>, since that content is inbetween the percentage signs.</p>


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

Integrate Google Tag Manager into your website.

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

Metronet Tag Manager vs DataLayer for GTM and Matomo