Как можно быстро добавить UTM-метки ко всем тегам «a» на сайте? 

Я разработал скрипт, который помогает сохранять UTM-метки между страницами для отслеживания источников трафика. Могли бы вы проверить, правильно ли он работает? Вот код: <br/> <pre><code class="javascript">// Функция для получения UTM-параметров из URL
function getUTMParams() {
    const urlParams = new URLSearchParams(window.location.search);
    return {
        utm_source: urlParams.get('utm_source'),
        utm_medium: urlParams.get('utm_medium'),
        utm_campaign: urlParams.get('utm_campaign')
    };
}

// Функция для добавления UTM-параметров к внутренним ссылкам
function addUTMToInternalLinks() {
    const utmParams = getUTMParams();
    const links = document.querySelectorAll('a');

    links.forEach(link =&gt; {
        const href = link.getAttribute('href');
        // Проверяем, является ли ссылка внутренней
        const isInternalLink = href &amp;&amp; (href.startsWith('/') || href.includes(window.location.hostname));

        // Проверка, содержит ли ссылка UTM-параметры
        const hasUTMParams = /[?&amp;]utm_/.test(href);

        // Если ссылка внутренняя и не содержит UTM-параметров, добавляем их
        if (isInternalLink &amp;&amp; !hasUTMParams) {
            const newUrl = new URL(href, window.location.origin);
            if (utmParams.utm_source) newUrl.searchParams.set('utm_source', utmParams.utm_source);
            if (utmParams.utm_medium) newUrl.searchParams.set('utm_medium', utmParams.utm_medium);
            if (utmParams.utm_campaign) newUrl.searchParams.set('utm_campaign', utmParams.utm_campaign);
            
            link.setAttribute('href', newUrl.toString());
        }
    });
}

// Запуск функции после загрузки страницы
document.addEventListener("DOMContentLoaded", addUTMToInternalLi
  • 25 февраля 2025 г. 9:24
Ответы на вопрос 1 
Ваш скрипт для добавления UTM-меток к внутренним ссылкам на веб-странице выглядит довольно неплохо, однако в нем есть несколько мелких ошибок, из-за которых он может не работать корректно. Я перечислю их ниже вместе с исправлениями.

1. **Ошибка с HTML-символами:** 
   В вашем коде некоторые HTML-символы (например, `&gt;`, `&amp;`) вместо обычных символов сравнения (`>` и `&`) могут привести к ошибкам. JavaScript не распознает эти символы, если они не находятся в строках, заключенных в кавычки.

    Измените:
    ```javascript
    links.forEach(link =&gt; {
    ```
    на:
    ```javascript
    links.forEach(link => {
    ```

    Аналогично измените все `&amp;` на `&`.

2. **Проверка на внутренние ссылки:**
   Ваша проверка на внутренние ссылки выглядит хорошо, но имейте в виду, что если у вас есть ссылки, которые начинаются с `//`, это тоже могут быть внутренние ссылки. Возможно, стоит добавить дополнительную проверку.

3. **Обработка пустых значений:** 
   Параметры UTM не всегда могут быть заполнены, поэтому можно добавить проверку, что `utmParams` не равен `null`.

4. **Обновление атрибута `href`:**
   Когда вы создаете новый URL для `href`, убедитесь, что вы правильно осуществляете изменение URL, даже если ссылка относительна.

Исправленный скрипт будет выглядеть следующим образом:

```javascript
// Функция для получения UTM-параметров из URL
function getUTMParams() {
    const urlParams = new URLSearchParams(window.location.search);
    return {
        utm_source: urlParams.get('utm_source'),
        utm_medium: urlParams.get('utm_medium'),
        utm_campaign: urlParams.get('utm_campaign')
    };
}

// Функция для добавления UTM-параметров к внутренним ссылкам
function addUTMToInternalLinks() {
    const utmParams = getUTMParams();
    const links = document.querySelectorAll('a');

    links.forEach(link => {
        const href = link.getAttribute('href');

        // Проверяем, является ли ссылка внутренней
        const isInternalLink = href && (href.startsWith('/') || href.includes(window.location.hostname) || href.startsWith('//'));

        // Проверка, содержит ли ссылка UTM-параметры
        const hasUTMParams = /[?&]utm_/.test(href);

        // Если ссылка внутренняя и не содержит UTM-параметров, добавляем их
        if (isInternalLink && !hasUTMParams) {
            const newUrl = new URL(href, window.location.origin);
            if (utmParams.utm_source) newUrl.searchParams.set('utm_source', utmParams.utm_source);
            if (utmParams.utm_medium) newUrl.searchParams.set('utm_medium', utmParams.utm_medium);
            if (utmParams.utm_campaign) newUrl.searchParams.set('utm_campaign', utmParams.utm_campaign);
            
            link.setAttribute('href', newUrl.toString());
        }
    });
}

// Запуск функции после загрузки страницы
document.addEventListener("DOMContentLoaded", addUTMToInternalLinks);
```

Теперь код должен работать корректно, добавляя UTM-метки ко всем внутренним ссылкам на странице. Если у вас есть дополнительные вопросы или требуется помощь, не стесняйтесь спрашивать!
Похожие вопросы
    Показать ещё