Use JS in WordPress to append query params to urls without resetting on page click

Question

WordPress is very foreign to me. I have a site with clickable (tracking) links, and would like to append the query parameters that come through to the page to the end of the URL, and stay in the browser after the user clicks to next page. (In the end these params get passed back to my tracking system, I use them to optimize my page.)

Currently, the params disappear when user clicks "next". I would like the params to carry from page to page, regardless of what the user clicks.

This is the current script in the Tracking Code on WP (enabled to run on all pages, after )

<script type="text/javascript">
$(function() {
    var queryString = location.search;
    $(".add-query-params").attr("href", queryString);
});
</script>

Example link in code:

<!--nextpage-->

<h1>1. Stuff! </h1>

words!<a class="add-query-params" href="http://track.link.com/example/1">Page 1</a></span> 

<!--nextpage-->
<h1>2. Things! </h1>

words!<a class="add-query-params"  href="http://track.link.com/example/2">Page 2</a></span>

Ideally, the user would populate the URL with the parameters, and it would look something like this:

http://track.link.com/example/2?utm_source=sourceplace&utm_content=contentwords&utm_term=yougettheidea

However WP removes all the params each time the user clicks "Next", or another article on the page.

I've looked at many plugins but none looked like they solved this problem. Same issues occur with PHP (so let's stick with JavaScript please).

I considered saving the url to a variable, and appending the query params, and saving it as a new custom variable, however I didn't know how to do that/if it would work.

This is my first SO question, so please forgive me if you hate it! Suggestions for plugins are also appreciated! Thanks everyone :)!

Edit - my Theme on WP is Bimber.

score 2 · Accepted Answer · answered Apr 06 '17 at 19:59

Here's the script I ended up using - I added it to the 'Tracking Code Manager' plugin and enabled it to run on all pages. It's working!

(Also my theme, Bimber, required me to load with jQuery first and didn't accept the shorthand $(function(). I found this out by adding a debugger; and noticed none of my pages were stepping in.)

<script type="text/javascript">
jQuery(document).ready(function($) {
    //get query parameters, store them
    var queryString = location.search;
    // append query params to existing url
    $(".add-query-params").attr("href", queryString);
    // go through each anchor element
     $("a").each(function() {
         // assign the link (href) to variable to store the url.
        var myLink = $(this).attr("href");
        // "this" = anchor tag element on page. Take that href, assign it to it's existing href(link), add the query params. 
        $(this).attr('href', myLink + queryString);
    });
});

Shout-out to the one user who responded to my question :)! It was much appreciated. (And I learned I about the functions.php file!)

Use JS in WordPress to append query params to urls without resetting on page click

1 Answers1