Elementor GCLID & UTM Tracking

A production-grade, highly-optimized WordPress plugin that adds native Google Click ID (GCLID), FBCLID, MSCLKID, and UTM tracking support directly into Elementor Pro Forms.

🚀 Why This Plugin?

When running Google Ads, Facebook Ads, or general marketing campaigns, accurately tracking where your leads come from is critical.

While there are many tracking plugins out there, most of them:

1. Break when aggressive caching (like NitroPack or WP Rocket) is used.
2. Load heavy JavaScript on every single page of your website.
3. Require messy, manual HTML hidden fields to be added to every form.
4. Don't work with Elementor AJAX popups or dynamic templates.

This plugin solves all of those problems. It registers a native "Tracking Param" field inside Elementor Pro, stores the marketing parameters using robust client-side localStorage, and auto-fills the hidden fields—even if the form is inside a popup or heavily cached.

✨ Features

• Native Elementor Integration: Adds a seamless Tracking Param (GCLID, UTM, etc.) field type into the Elementor form builder.
• Cache Immune: Powered by Vanilla JavaScript running on the client's browser. Fully compatible with NitroPack, WP Rocket, Cloudflare, and Elementor's internal caching.
• 90-Day Persistence: Automatically captures supported parameters from the URL and stores them in the browser's localStorage for 90 days. If a user clicks an ad today but converts next week, you still get the attribution!
• Dynamic Popup & AJAX Support: Uses a highly efficient MutationObserver to ensure tracking fields are populated even if the form is loaded dynamically via an Elementor Popup or after an AJAX re-render.
• Zero Global Bloat: The tiny (< 2KB) tracking script is only enqueued conditionally. It has zero dependencies (no jQuery required).

📦 Supported Parameters

The plugin automatically listens for and stores the following tracking parameters from the URL:

• gclid (Google Ads - default)
• fbclid (Facebook Ads)
• msclkid (Microsoft/Bing Ads)
• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term

🛠️ Installation

1. Download the elementor-gclid-tracking folder.
2. Upload it to your WordPress /wp-content/plugins/ directory (or zip it and upload via the WordPress Plugins dashboard).
3. Activate the plugin through the 'Plugins' menu in WordPress.
4. Requirement: Elementor Pro must be installed and active.

📖 How to Use

Basic Setup (GCLID)

By default, the tracking field is configured to capture Google Ads (gclid).

1. Open any page or popup in the Elementor Editor.
2. Add or edit an existing Form widget.
3. Click Add Item under the Form Fields section.
4. Set the Type to Tracking Param (GCLID, UTM, etc.).
5. You're done! Elementor will now automatically include the GCLID in your form submissions and email notifications.

Tracking UTMs and Other IDs

If you want to track a different parameter (e.g., utm_source or fbclid), you simply map the field using Elementor's native ID system.

1. Add a new Tracking Param (GCLID, UTM, etc.) field to your form.
2. Open the Advanced tab of that specific field item.
3. Change the ID (Custom ID) to the exact name of the parameter you want to track (e.g., type utm_source).
4. The JavaScript will automatically detect this ID and inject the corresponding UTM value into the field!
5. Tip: You can add multiple tracking fields to the same form to capture the source, medium, and campaign all at once! Just set their IDs to utm_source, utm_medium, etc.

🧪 How to Test

Because the plugin relies on real URL parameters, testing it requires simulating an ad click:

1. Clear your website's cache (NitroPack, WP Rocket, etc.) to ensure the new plugin script is loaded.
2. Open a new tab and visit your form page, but append a fake tracking parameter to the URL: https://yourwebsite.com/contact-us/?gclid=test_gclid_12345
3. Press Enter. The script has now silently saved test_gclid_12345 to your browser's local storage.
4. Fill out the form normally and submit it.
5. Check your Elementor Submissions (or your email). You will see the hidden field populated with test_gclid_12345!

🧑‍💻 Developer Notes

This plugin was built with a clean, extensible OOP architecture.

• Frontend Tracking (frontend-tracking.js): Vanilla JS. Listens for URL parameters, strictly validates gclsrc (if present), manages localStorage expirations, and uses DOM observation to populate fields.
• Elementor Integration: Hooked properly into wp_enqueue_scripts and elementor_pro/forms/fields/register to ensure flawless rendering within the Elementor builder. The custom field completely nukes its own wrapper using inline CSS (.elementor-field-type-gclid { display: none !important; }) to prevent any styling artifacts or blank spaces in your forms.

📄 License

GPLv2 or later. Feel free to fork, modify, and use it in your client projects!