Как передать параметры URL через все страницы / внутренние ссылки на сайте с помощью JavaScript? - PullRequest
Новая
       2

Как передать параметры URL через все страницы / внутренние ссылки на сайте с помощью JavaScript?

5 голосов
/ 29 марта 2019

У меня есть сайт с двумя страницами, index.html и 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>

Когда пользователь попадает на index.html, нажимая на объявление Google, чтобы включить отслеживание, к концу URL добавляются следующие параметры:

?utm_source=google&utm_medium=search&utm_campaign=summer19

Проблема, которая возникает, когда пользователь переходит на другую страницу сайта, эти параметры URL теряются. Я хотел бы написать некоторый Javascript, который передает параметры URL через путь пользователя на сайте, когда они нажимают на внутренние ссылки. В случае внешних ссылок он НЕ ДОЛЖЕН включать эти параметры. Как я могу реализовать это наиболее эффективно?

Вся помощь очень ценится.

Ответы [ 2 ]

5 голосов
/ 29 марта 2019

Используйте querySelectorAll, чтобы найти все элементы с атрибутом href, и присоедините строку поиска из URL(window.location).search: 

var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
    var current = link.href;
    link.href = current + queryString;
});

РЕДАКТИРОВАТЬ

Вот как сделатьПриведенное выше применимо только к внутренним ссылкам (я классифицирую внутренние ссылки как те, которые начинаются с / или . (относительные ссылки) или начинаются с http и включают window.location.hostname (абсолютные ссылки)): 

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;
                }
            });
0 голосов
/ 29 марта 2019

Вот метод проверки внутренней или внешней ссылки: 

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

Таким образом, мы можем получить строку параметра из URL: 

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

Наконец, переберите все ссылки на странице и отфильтруйте внутренние ссылки. Затем добавьте строку параметра к каждой внутренней ссылке: 

document.querySelectorAll("[href]").forEach(li => {
    var current = li.href;
    if(isExternal(current)){
        li.href = current + params;
    }    
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...