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

Seresa

<p>inPIPE by Seresa allows you to generate, store, and manage UTM parameters—both plain and coded. The plugin automatically decodes coded UTM query strings when visitors land on your website, pushing the full UTM data to the dataLayer. This helps bypass ad blockers and improves tracking in Google Analytics, Facebook Ads, and other platforms.</p>
<ul>
<li>Generate & manage UTM query strings with ease  </li>
<li>Supports both <strong>plain and coded UTM parameters</strong>  </li>
<li>Decodes coded UTM links on-site and sends data to the dataLayer  </li>
<li>Reduces tracking disruptions caused by ad blockers  </li>
<li>Works with GA4, GTM, Facebook Ads & more  </li>
</ul>
<p><strong>Use WP inPIPE for more reliable UTM tracking and better data collection!</strong></p>
<h3>Features</h3>
<ul>
<li>Generate and store UTM query string URLs based on user input  </li>
<li>Encode UTM parameters to enhance tracking accuracy  </li>
<li>Decode UTM query strings on site visits and push the original UTM data to the dataLayer  </li>
<li>Potentially bypass ad blockers to ensure accurate data collection</li>
</ul>
<h3>Configuration</h3>
<ul>
<li>Navigate to <strong>Admin Dashboard > inPIPE</strong> to manage plugin settings.</li>
<li>Enable automatic UTM processing in the settings panel.</li>
<li>Use the <strong>UTM Coder</strong> to create, edit, or delete UTM query strings.</li>
</ul>
<h3>External Services</h3>
<p>This plugin connects to external services hosted by Seresa.io for the following purposes:</p>
<p><strong>Subscription Verification & Premium Package Downloads</strong><br />
   – <strong>Service:</strong> The plugin uses the API at [https://sub.seresa.app] to verify premium subscriptions and to download premium packages or updates.<br />
   – <strong>When:</strong><br />
     – Subscription verification occurs when you attempt to access premium features or validate your license.<br />
     – Package downloads occur when you install or update premium components from within the plugin.<br />
   – <strong>Data Sent:</strong><br />
     – The plugin sends your license key, site URL, and (if applicable) the requested package identifier to the API.<br />
   – <strong>Purpose:</strong><br />
     – To verify your entitlement to premium features and to deliver premium package files securely.<br />
   – <strong>Terms of Service:</strong> [https://seresa.io/terms]<br />
   – <strong>Privacy Policy:</strong> [https://seresa.io/privacy]</p>
<p><strong>Other Hosted Services</strong><br />
   – See below for additional premium features that may rely on external event processing (e.g., Transmute Engine).</p>
<ol>
<li>
<p>Subscription Verification</p>
<ul>
<li>What: The plugin connects to https://sub.seresa.app/premium-downloader/v1/verify-subscription to validate subscription codes</li>
<li>When: This occurs only when a user enters a subscription code in the admin panel to activate premium features</li>
<li>Data sent: Subscription code entered by the user, site URL, and WordPress version</li>
<li>Purpose: To verify the validity of subscription purchases and enable premium features</li>
<li>Provider: Seresa.io – <a href="https://seresa.io/terms" rel="nofollow ugc">Terms of Service</a> and <a href="https://seresa.io/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
<li>
<p>Package Installation</p>
<ul>
<li>What: The plugin connects to https://sub.seresa.app/premium-downloader/v1/download to download premium components</li>
<li>When: This occurs only after subscription verification when the user initiates the installation of premium features</li>
<li>Data sent: Verified subscription code, site URL, WordPress version, and PHP version</li>
<li>Purpose: To securely download and install authorized premium components</li>
<li>Provider: Seresa.io – <a href="https://seresa.io/terms" rel="nofollow ugc">Terms of Service</a> and <a href="https://seresa.io/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
<li>
<p>Transmute Engine (Premium Feature)</p>
<ul>
<li>What: Premium users’ event data is processed through Transmute Engine, a server-side event processing service</li>
<li>When: When events are triggered on your website (page views, clicks, form submissions, etc.)</li>
<li>Data sent: Event data, UTM parameters, and tracking information</li>
<li>Purpose: To process and route event data to your configured third-party services</li>
<li>How it works: Transmute Engine acts as a first-party server to your website, temporarily processing data without permanent storage, and forwarding it to your specified endpoints</li>
<li>Provider: Seresa.io – <a href="https://seresa.io/terms" rel="nofollow ugc">Terms of Service</a> and <a href="https://seresa.io/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
</ol>
<p>No data is shared with third parties beyond Seresa.io, and all connections use secure HTTPS encryption. Users can choose not to use premium features, in which case no external connections will be made.</p>
<h3>Third-Party Libraries</h3>
<p>This plugin uses the following third-party libraries:</p>
<ol>
<li>
<p>Vue.js</p>
<ul>
<li>What: A progressive JavaScript framework for building user interfaces</li>
<li>Website: https://vuejs.org/</li>
<li>License: MIT License – https://github.com/vuejs/vue/blob/main/LICENSE</li>
</ul>
</li>
<li>
<p>Vue Toastification</p>
<ul>
<li>What: Toast notification library for Vue.js</li>
<li>Website: https://github.com/Maronato/vue-toastification</li>
<li>License: MIT License</li>
</ul>
</li>
<li>
<p>Lucide Icons</p>
<ul>
<li>What: Beautiful & consistent icon toolkit for Vue.js</li>
<li>Website: https://lucide.dev/</li>
<li>License: ISC License – https://github.com/lucide-icons/lucide/blob/main/LICENSE</li>
</ul>
</li>
<li>
<p>Axios</p>
<ul>
<li>What: Promise-based HTTP client for JavaScript</li>
<li>Website: https://axios-http.com/</li>
<li>License: MIT License</li>
</ul>
</li>
<li>
<p>Pinia</p>
<ul>
<li>What: State management library for Vue.js</li>
<li>Website: https://pinia.vuejs.org/</li>
<li>License: MIT License</li>
</ul>
</li>
<li>
<p>Vue I18n</p>
<ul>
<li>What: Internationalization plugin for Vue.js</li>
<li>Website: https://vue-i18n.intlify.dev/</li>
<li>License: MIT License</li>
</ul>
</li>
<li>
<p>Tailwind CSS</p>
<ul>
<li>What: Utility-first CSS framework</li>
<li>Website: https://tailwindcss.com/</li>
<li>License: MIT License</li>
</ul>
</li>
<li>
<p>WordPress JavaScript Libraries</p>
<ul>
<li>What: Official WordPress JavaScript libraries (@wordpress/api-fetch, @wordpress/components, @wordpress/element, @wordpress/i18n)</li>
<li>Website: https://developer.wordpress.org/block-editor/reference-guides/packages/</li>
<li>License: GPL-2.0+ License</li>
</ul>
</li>
</ol>
<p>All third-party libraries used are compatible with the GPL-2.0+ license of this plugin.</p>
<h3>Build Tools and Source Code Access</h3>
<p>This plugin uses modern frontend tools (Vue.js, Vite, Axios) to build its admin interface. The full, human-readable source code is included directly within the plugin package under the /src directory.</p>
<p>Included source code:<br />
    •   /src/ contains all original Vue 3 components, Pinia store, and JavaScript modules<br />
    •   /dist/ contains the compiled production build<br />
    •   /src/README.md contains full build instructions and configuration references</p>
<p>Build Toolchain:<br />
    •   Vue.js 3<br />
    •   Vite<br />
    •   Tailwind CSS<br />
    •   PostCSS<br />
    •   Vitest<br />
    •   Grunt</p>
<p>To rebuild the admin interface from source:<br />
    1.  Navigate to the /src directory<br />
    2.  Run npm install<br />
    3.  Run npm run build:free or npm run build:premium to compile assets to /dist</p>
<p>This ensures full compliance with WordPress.org’s guidelines requiring human-readable source code for all minified or bundled assets.</p>
<p>For detailed developer instructions, see /src/README.md.</p>
<h3>License</h3>
<p>This plugin is licensed under the GNU General Public License v2.0 or later.<br />
For more details, visit: https://www.gnu.org/licenses/gpl-2.0.html</p>
<h3>Support</h3>
<p>For <strong>free users</strong>: Report issues on our GitHub page:<br />
🔗 <a href="https://github.com/seresa8/inPIPE-by-Seresa-issues/issues" rel="nofollow ugc">GitHub Issues</a></p>
<p>For <strong>general inquiries</strong>, contact us at <a href="mailto:support@seresa.io" rel="nofollow ugc">support@seresa.io</a>.</p>
<p>For <strong>premium users</strong>: Get priority support at 🔗 <a href="https://seresa.io/support" rel="nofollow ugc">seresa.io/support</a>.</p>


inPIPE by Seresa

Generate, store, and decode UTM parameters for enhanced tracking in Google Analytics, Facebook Ads, and other platforms with dataLayer integration.

DataLayer for GTM and Matomo vs inPIPE by Seresa