Stripping Tracking Parameters with Cloudflare Workers

Stripping Tracking Parameters with Cloudflare Workers

Tracking parameters like utm_, gclid, and fbclid URL parameters can be used by marketers and businesses to gather data and insights about their online campaigns and user behavior. For Core Web Vitals they can be a nightmare because they tend to break caching functionality! If you're looking to clean up these tracking parameters without breaking your analytics, Cloudflare Workers offers a lightweight and scalable solution.

In this blog post, I'll walk through a simple Cloudflare Worker script to strip tracking parameters from incoming requests while preserving the core functionality of your site.

The Caching Problem with Tracking Parameters

If caching is not configured properly URL parameters will cause cache misses. When caching systems store pages, they rely on the URL as a cache key. If a URL includes tracking parameters (like ?utm_source=google or ?ref=partner), these parameters make the URL unique, even if the content is identical. Without proper configuration, this uniqueness forces the server or edge cache to bypass the cached version of the page, resulting in a cache miss. Instead of serving the already-available content, the server regenerates or fetches it again, leading to wasted resources and slower page load times.

Why don't we just remove all the url parameters? Not all cache misses are bad—some parameters genuinely change page content, such as search queries (?q=laptops) or dynamic filters (?color=blue). These misses ensure users see accurate, personalized results.

The key is to differentiate between parameters that affect content and those that don’t. 

Cloudflare Workers

Cloudflare Workers allow you to intercept and manipulate requests at the edge. This makes it an ideal tool for cleaning up tracking parameters before requests hit your origin server. Here's how to implement it:

The Code

Below is the complete script to strip common tracking parameters:

addEventListener('fetch', event => {
  event.respondWith(fetchCleanUrl(event.request))
})

async function fetchCleanUrl(request) {
  const url = new URL(request.url)

  // Define a regex to match utm_, gclid, and fbclid query parameters
  const regex = /^(utm_|gad_|gclid|fbclid|srsltid|msclkid|dclid|referrer)/

  // Remove matching query parameters
  url.searchParams.forEach((value, key) => {
    if (regex.test(key)) {
      url.searchParams.delete(key)
    }
  })

  // Fetch the response from the modified URL
  const response = await fetch(url.toString(), request)

  return response
}

How It Works

• Intercept Requests: The addEventListener('fetch') function listens for incoming HTTP requests.
• Parse the URL: The URL API parses the request URL, making it easy to manipulate query parameters.
• Identify Tracking Parameters: A regular expression (regex) matches common tracking parameters such as utm_, gclid, fbclid, and others.
• Remove Matches: The searchParams.forEach() method iterates over all query parameters. Any parameter matching the regex is removed using url.searchParams.delete().
• Fetch Clean URL: The modified URL is used to fetch the response, which is then returned to the user. 

Deployment

1. Sign in to Cloudflare: Log in to your Cloudflare dashboard.
2. Create a Worker: Do not navigate to your site yet. Navigate to the Workers section and create a new Worker.
   
3. Name the worker and deploy.  This step may look a little counter intuitive but don't worry. Just name your empty 'hello world' worker and click deploy.
     
4. Edit your worker. On the next page click on Edit Code 
   
5. Paste the Script: Copy and paste the above script into the editor. Then click deploy
   
6. Bind the Worker to a Route: Now go back and navigate to your site in CloudFlare. Click on worker routes and then on 'Add Route'. Select the newly created worker and apply it o your site!
   

Benefits

• Improved Caching: Cleaner URLs ensure more effective use of edge and browser caches.
• Full control! While many caching solutions have their own configuration it is allways better to have full control. That way we do not strip the parameters we want to keep and ensure we do remove the ones that are interfering with the site cache

Customization

You can easily modify the regex to include or exclude specific parameters based on your needs. For example, if you want to preserve certain utm_ parameters, you can just remove them from the regex!

How to find URL which url parameters to strip

Finding our which URL parameters to strip is easy if you use the right tool. RUM Tracking tools like CoreDash monitor your site 24/7 and log all query strings and their impact on performance. In CoreDash simply navigate to Largest Contentful Paint and view the results by query string!