Menu
I have a site with two pages, index.html and page2.html:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
<style type="text/css">
#holder {margin: 20px auto; max-width: 900px;}
</style>
</head>
<body>
<div id="holder">
<h1>Home</h1>
<ul id="menu">
<li><a href="/page2.html">Internal Link</a></li>
<li><a href="https://www.apple.com/" target="_blank">App Store</a>
</li>
</ul>
<h2 id="useApp">Is the user using our app?</h2>
</div>
</body>
</html>
page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 2</title>
<style type="text/css">
#holder {margin: 20px auto; max-width: 900px;}
</style>
</head>
<body>
<div id="holder">
<h1>Internal Page</h1>
<ul id="menu">
<li><a href="/index.html">Homepage</a></li>
<li><a href="https://www.apple.com/" target="_blank">App Store</a>
</li>
</ul>
<h2 id="useApp">Is the user using our app?</h2>
</div>
</body>
</html>
When the user lands on index.html by clicking a Google ad, in order to enable tracking the ad appends the following parameters to the end of the URL:
?utm_source=google&utm_medium=search&utm_campaign=summer19
A problem that arises is when a user navigates to another page within the site, these URL parameters are lost. I would like to write some Javascript that passes the URL parameters across the user's journey on the site when they click on internal links. In the case of external links, it MUST NOT include these parameters. How can I implement this most effectively?
All help is greatly appreciated.
417
Any word after the question mark (?) in a URL is considered to be a parameter which can hold values. The value for the corresponding parameter is given after the symbol "equals" (=). Multiple parameters can be passed through the URL by separating them with multiple "&".
A primary way to pass a parameter to a website is known as "Query String Parameter". The notion is that a variable can be sent into a webpage through a url. So the QueryString is a variable x with the value of 'value'. At this point a variable of x can be available to JavaScript.
The short answer is yes Javascript can parse URL parameter values. You can do this by leveraging URL Parameters to: Pass values from one page to another using the Javascript Get Method. Pass custom values to Google Analytics using the Google Tag Manager URL Variable which works the same as using a Javascript function.
URL parameters are made of a key and a value, separated by an equal sign (=). Multiple parameters are each then separated by an ampersand (&).
How to get URL Parameters using JavaScript ? Method 1: Using the URLSearchParams Object: The URLSearchParams is an interface used to provide methods that can be used to work with an URL. The URL string is first separated to get only the parameters portion of the URL. The split () method is used on the given URL with the “?” separator.
This can be used to get all the parameters in the URL which can be used as required. Example: This example illustrates the use of the URLSearchParams Object to get the URL parameter.
Solution Step 1: Create an Iframe element, with an id <iframe id="myIframe" frameborder="0" marginwidth="0" marginheight="0"... Step 2: Write JavaScript code to pass URL parameters in the iframe src.
You might have already heard of GET variables, appending a ?KEY=VALUE query string behind the URL. Yep, Javascript is fully capable of getting the query string, and we can use that to pass data. You might have also heard of the cookie, a small token to keep some data…
Use querySelectorAll to find all elements with a href attribute, and attach the search string from URL(window.location).search:
var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
var current = link.href;
link.href = current + queryString;
});
Here is how to make the above apply only to internal links (I classify internal links as those that either start with a / or . (relative links), or start with http and include window.location.hostname (absolute links):
var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
if (link.href.startsWith("/") || link.href.startsWith(".") || (link.href.startsWith("http") && link.href.include(window.location.hostname)) {
var current = link.href;
link.href = current + queryString;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
