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="/" 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="/" 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.

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./" 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./" 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

All help is greatly appreciated.

Share Improve this question edited Mar 29, 2019 at 9:30 Jack Bashford 44.1k11 gold badges55 silver badges82 bronze badges asked Mar 29, 2019 at 9:20 Eric R. 1463 silver badges10 bronze badges

1 The problem here is what is an internal link? If you're 100% certain that internal links will always be in relative form (i.e. /index.html instead of http://www.example./index.html), then you could check for the starting characters. But you need to make that assumption. – ChatterOne Commented Mar 29, 2019 at 9:39
Maybe instead of attaching the params to every link you may store it within the sessionStorage and access it when you need it. – Nico O Commented Mar 29, 2019 at 9:44

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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;
});

EDIT

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;
                }
            });

Here is the method to check internal or external link:

var isExternal = function(url) {
    return !(location.href.replace("http://", "").replace("https://", "").split("/")[0] === url.replace("http://", "").replace("https://", "").split("/")[0]);   
}

This way we can get the parameter string from the URL:

var params = new URL(window.location).search;

Finally loop through all the page links and filter the internal links. Then append the parameter string to each internal links:

document.querySelectorAll("[href]").forEach(li => {
    var current = li.href;
    if(isExternal(current)){
        li.href = current + params;
    }    
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to pass URL parameters across all pagesinternal links in a site with javascript? - Stack Overflow

2 Answers 2

EDIT

与本文相关的文章

评论列表(0)