Ditch the Plugin: How to Persist UTM Parameters on WordPress Without Slowing Down Your Site

If you’re a marketer or a developer working on a WordPress site, you’ve likely encountered the need to track UTM parameters across pages. UTM parameters—those little tags like utm_source or utm_campaign you see at the end of URLs—are crucial for monitoring the performance of marketing campaigns.

However, there’s a common problem: once a user clicks to a different page, these UTM parameters often disappear from the URL. To address this, many developers and marketers turn to plugins like UTM Grabber to ensure UTM parameters persist as users navigate the website.

While plugins can be a quick fix, they often come with a hidden cost: site speed, security risks, and maintenance hassles. In this blog, I’ll show you how to achieve the same functionality with a simple piece of JavaScript—no plugin required.

The Plugin Dilemma: Why Fewer Plugins = Better WordPress Performance

WordPress plugins are convenient, but they’re not always the best solution. Here’s why:

1. Performance Issues: Every plugin you add to WordPress introduces additional scripts and styles, which can slow down your site.

2. Security Risks: Plugins are a common attack vector for hackers, especially if they’re not regularly updated.

3. Maintenance Overhead: The more plugins you have, the more work you need to do to keep them updated and compatible with your theme and WordPress version.

For something as simple as persisting UTM parameters across pages, relying on a plugin is overkill. Instead, you can use a lightweight JavaScript snippet to achieve the same result.

The DIY Solution: Persisting UTM Parameters with JavaScript

The idea is simple:

1. Capture the UTM parameters from the URL when a user first lands on your website.

2. Store the UTM parameters in the browser’s session storage.

3. Append the UTM parameters to all internal links as the user navigates your site.

Simply copy the following code snippet and past it in the functions.php file of your child theme.

<script>
// JavaScript to capture UTM parameters
function getUTMParameters() {
    const urlParams = new URLSearchParams(window.location.search);
    const utmParams = {};
// below list defines utm paramters to track and persist. You can add or delete paramters from this list. 
    ['utm_source', 'utm_medium', 'utm_campaign', 'utm_adgroup', 'utm_term', 'utm_creative', 'utm_device', 'utm_devicemodel', 'utm_placement', 'utm_matchtype', 'utm_location', 'utm_network', 'utm_content'].forEach(param => {
        if (urlParams.has(param)) {
            utmParams[param] = urlParams.get(param); // Capture parameters
        }
    });
    return utmParams;
}

// Store UTM parameters in session storage
const utmParams = getUTMParameters();
if (Object.keys(utmParams).length > 0) {
    sessionStorage.setItem('utmParams', JSON.stringify(utmParams));
}
</script>
<script>
// JavaScript to append UTM parameters to all links
document.addEventListener('DOMContentLoaded', () => {
    const utmParams = JSON.parse(sessionStorage.getItem('utmParams'));
    if (utmParams) {
        const links = document.querySelectorAll('a'); // Select all anchor tags
        links.forEach(link => {
            const url = new URL(link.href);
            Object.keys(utmParams).forEach(param => {
                // Only add UTM parameters if they are not already present
                if (!url.searchParams.has(param)) {
                    const decodedValue = decodeURIComponent(utmParams[param]); // Decode parameter
                    url.searchParams.set(param, decodedValue); // Let URL API encode it
                }
            });
            // Fix %20 issue: Replace '+' with '%20' in the final URL
            link.href = url.toString().replace(/\+/g, '%20');
        });
    }
});
<

Why This Approach Works?

• Lightweight: This approach eliminates the need for plugins, reducing your site’s load time.

• Customizable: You can easily tweak the code to capture additional parameters or modify link behavior.

• Secure: Unlike plugins, this code doesn’t introduce third-party dependencies.

When to Use This Code (and When Not To)

This code is perfect for small to medium-sized websites with simple UTM tracking needs. However, if your tracking requirements are highly complex or involves passing parameters to short-codes, etc then UTM Grabber is a nice plugin. Or drop me a message on LinkedIn, If there is enough demand, I'll further customize the code to start saving UTM parameters to short-code based on sessions.

Final Thoughts: Simplify Your Stack

UTM tracking doesn’t need to be complicated, and it certainly doesn’t require adding unnecessary plugins to your WordPress site. By leveraging a simple JavaScript solution, you can ensure UTM parameters persist across pages without compromising your site’s speed or security.

So, before you reach for that plugin, ask yourself: Can I solve this with a few lines of code? Chances are, the answer is yes.

If you found this guide helpful, share it with a fellow developer or marketer who’s tired of bloated WordPress plugins. Happy coding! 🎉