Remove Query

Remove the URL query parameters from the URL after the page loads

Overview

The Remove Query attribute automatically removes all query parameters from the URL after the page loads. This is useful for cleaning up URLs after capturing tracking parameters or form data, providing users with cleaner, more shareable URLs.

Attribute Syntax

This attribute has no specific elements or settings. Simply add the script tag with the attribute to your page.

Usage Examples

Basic Usage

<!-- Add to page settings or before </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-removequery@latest" fs-attributes="removequery"></script>

<!-- URL before: /page?utm_source=email&utm_campaign=summer -->
<!-- URL after page load: /page -->

Common Use Cases

UTM Parameter Cleanup

Capture marketing campaign parameters in hidden form fields, then remove them from the URL for a cleaner user experience:

URL with params: /landing?utm_source=facebook&utm_medium=cpc&utm_campaign=spring
URL after load: /landing

Referral Tracking

Track referral sources while keeping URLs clean and shareable:

URL with params: /signup?ref=friend123
URL after load: /signup

Search Parameters

Remove search or filter parameters after capturing them:

URL with params: /products?category=electronics&sort=price
URL after load: /products

Form Pre-fill Data

Pre-fill forms with URL parameters, then clean the URL:

URL with params: /contact?name=John&email=[e-mail]
URL after load: /contact

Share-Friendly URLs

Provide users with clean URLs for sharing after they arrive via parametrized links:

URL with params: /article?source=newsletter&date=2024-01-15
URL after load: /article

How It Works

1. The attribute waits for the page to fully load
2. It waits for other attributes (like Query Param) to finish processing
3. It removes all query parameters from the URL
4. The URL is updated using window.history.replaceState()
5. The page does not reload - only the URL changes

Remove Query uses history.replaceState() to update the URL without reloading the page. This means:

• The page doesn’t refresh
• Browser history is preserved
• Users can still use the back button
• No additional page views are tracked

Loading Order

The attribute automatically waits for these attributes to load first (if present):

• Query Param attribute
• CMS Filter attribute

This ensures that other attributes can capture query parameter values before they’re removed.

Integration with Query Param

Remove Query works seamlessly with the Query Param attribute:

<!-- 1. Query Param captures the values -->
<input type="hidden" name="source" fs-queryparam-name="source">
<input type="hidden" name="campaign" fs-queryparam-name="campaign">

<!-- 2. Remove Query cleans the URL -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-queryparam@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-removequery@latest" fs-attributes="removequery"></script>

Result:

• Form fields are populated with query parameter values
• URL is cleaned for better user experience
• Data is still available for form submission

SEO Considerations

Benefits

• Cleaner URLs: More shareable and user-friendly
• Duplicate content: Prevents search engines from indexing parameter variations
• Social sharing: Cleaned URLs look better when shared

Best Practices

1. Use canonical tags to specify the preferred URL version
2. Configure Google Analytics to exclude marketing parameters from reports
3. Ensure tracking pixels/scripts fire before parameters are removed
4. Consider using rel="canonical" to point to the clean URL

<link rel="canonical" href="https://example.com/page">

If you’re using query parameters for any functionality that needs to persist (like filters or search), do not use Remove Query on those pages. The attribute removes ALL query parameters.

If you need to preserve some query parameters while removing others, consider using the Query Param attribute with fs-queryparam-removequery="true" on individual elements for more granular control.

Browser Compatibility

Remove Query uses window.history.replaceState(), which is supported by:

• Chrome 5+
• Firefox 4+
• Safari 5+
• Edge (all versions)
• IE 10+

This covers 99%+ of modern browsers.