How to Retain Query Parameters Across Pages in WordPress

Query parameters (like ?utm_source=google&utm_campaign=spring_sale) are crucial for tracking campaigns, user behavior, or passing dynamic values in URLs. Losing these parameters as users navigate a WordPress site can break analytics or disrupt user flows. Here's how you can ensure that query parameters persist across your WordPress website.

Why Retain Query Parameters?

Query parameters are often used for:

  1. Tracking marketing campaigns (e.g., UTM parameters).
  2. Passing dynamic data like referral codes or session information.
  3. Enhancing user-specific navigation or personalization.

If query parameters disappear as users navigate the site, critical data may be lost, leading to incomplete analytics or broken flows.

Approaches to Retain Query Parameters in WordPress

1. Using JavaScript to Dynamically Update Links

A simple client-side solution is to append query parameters to all internal links on your site dynamically.

Steps:

  1. Add the following code to your theme's functions.php:
    ?
    1
    2
    3
    4
    function enqueue_dynamic_query_script() {
        wp_enqueue_script('dynamic-query-params', get_template_directory_uri() . '/js/dynamic-query-params.js', array('jquery'), null, true);
    }
    add_action('wp_enqueue_scripts', 'enqueue_dynamic_query_script');
  2. Create a file named dynamic-query-params.js in your theme’s js folder and add:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    document.addEventListener('DOMContentLoaded', function () {
        const queryParams = window.location.search;
     
        if (queryParams) {
            document.querySelectorAll('a').forEach(link => {
                if (link.href.includes(window.location.hostname)) {
                    if (link.href.includes('?')) {
                        link.href += '&' + queryParams.substring(1);
                    } else {
                        link.href += queryParams;
                    }
                }
            });
        }
    });
  3. Test your site to ensure query parameters persist in all links.

2. Store Query Parameters in Session Storage

If users navigate directly (e.g., typing a URL), you can store the parameters in sessionStorage and append them dynamically.

Steps:

  1. Enqueue the following JavaScript:
    ?
    1
    2
    3
    4
    function enqueue_session_params_script() {
        wp_enqueue_script('session-params', get_template_directory_uri() . '/js/session-params.js', array('jquery'), null, true);
    }
    add_action('wp_enqueue_scripts', 'enqueue_session_params_script');
  2. Add this code to session-params.js:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    document.addEventListener('DOMContentLoaded', function () {
        const currentParams = window.location.search;
     
        if (currentParams) {
            sessionStorage.setItem('queryParams', currentParams);
        }
     
        const savedParams = sessionStorage.getItem('queryParams');
        if (savedParams) {
            document.querySelectorAll('a').forEach(link => {
                if (link.href.includes(window.location.hostname)) {
                    if (!link.href.includes(savedParams)) {
                        if (link.href.includes('?')) {
                            link.href += '&' + savedParams.substring(1);
                        } else {
                            link.href += savedParams;
                        }
                    }
                }
            });
        }
    });

3. Server-Side Solution

For a more robust approach, you can use PHP to modify links on the server.

Example Code for functions.php:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function append_query_parameters($url) {
    $queryParams = $_SERVER['QUERY_STRING'];
 
    if ($queryParams && strpos($url, '?') === false) {
        $url = $url . '?' . $queryParams;
    } elseif ($queryParams) {
        $url = $url . '&' . $queryParams;
    }
 
    return $url;
}
 
add_filter('the_content', function ($content) {
    global $wp;
    $queryParams = $_SERVER['QUERY_STRING'];
    if ($queryParams) {
        $content = str_replace(
            home_url(),
            home_url() . '?' . $queryParams,
            $content
        );
    }
    return $content;
});
 
add_filter('wp_nav_menu_items', function ($menu) {
    $queryParams = $_SERVER['QUERY_STRING'];
    if ($queryParams) {
        $menu = str_replace(
            home_url(),
            home_url() . '?' . $queryParams,
            $menu
        );
    }
    return $menu;
});

Conclusion

Preserving query parameters is essential for analytics, campaign tracking, and enhancing user experience. Depending on your needs, you can use JavaScript, session storage, or server-side techniques to achieve this.

Have any questions or need help with implementation? Drop a comment below, and I’ll be happy to assist!

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)