Инструкция по установке и настройке скрипта utm-forward.js для проброса UTM-меток

• Описание
• Документация

utm-forward.js — скрипт позволяет сохранять UTM-метки из URL и добавлять их к внутренним ссылкам на сайте. Это полезно для отслеживания источников трафика в аналитике.

Подключение ¶

1. Скопируйте файл utm-forward.js в корневую директорию вашего сайта или в любую другую директорию, доступную через веб-сервер.

2. Добавьте следующий код перед закрывающим тегом </body> на всех страницах, где вы хотите использовать скрипт:

<script src="/путь/к/utm-forward.js"></script>

Например, если вы скопировали скрипт в корневую директорию:

<script src="/utm-forward.js"></script>

Настройка ¶

Скрипт имеет встроенную конфигурацию, которую вы можете изменить в соответствии с вашими потребностями. Откройте файл utm-forward.js и найдите объект config:

const config = {
  // Параметры UTM, которые нужно сохранять
  utmParams: ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'],
  
  // Исключения - домены, на которые не нужно добавлять UTM
  excludeDomains: [],
  
  // Базовый домен сайта (если нужно добавлять UTM только для внутренних ссылок)
  baseDomain: window.location.hostname,
  
  // Добавлять UTM к внешним ссылкам
  addToExternalLinks: false,
  
  // Имя cookie для хранения UTM-меток
  cookieName: 'utm_data',
  
  // Срок хранения UTM-меток в днях
  cookieExpires: 30
};

Параметры конфигурации ¶

• utmParams: Массив параметров UTM, которые нужно сохранять. По умолчанию: ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].
• excludeDomains: Массив доменов, на которые не нужно добавлять UTM-метки. Например: ['facebook.com', 'twitter.com'].
• baseDomain: Базовый домен сайта. По умолчанию: window.location.hostname.
• addToExternalLinks: Добавлять UTM-метки к внешним ссылкам. По умолчанию: false.
• cookieName: Имя cookie для хранения UTM-меток. По умолчанию: 'utm_data'.
• cookieExpires: Срок хранения UTM-меток в днях. По умолчанию: 30.

Как это всё работает ¶

1. Когда пользователь заходит на сайт с UTM-метками в URL (например, https://example.com/?utm_source=google), скрипт сохраняет эти метки в cookie.
2. Когда пользователь переходит по внутренним ссылкам на сайте, скрипт автоматически добавляет сохраненные UTM-метки к этим ссылкам.
3. Таким образом, UTM-метки сохраняются на протяжении всего пути пользователя по сайту.

Примеры использования ¶

Базовое использование ¶

<script src="/utm-forward.js"></script>

Настройка для добавления UTM к внешним ссылкам ¶

<script>
  // Переопределяем конфигурацию перед загрузкой скрипта
  window.utmConfig = {
    addToExternalLinks: true
  };
</script>
<script src="/utm-forward.js"></script>

Настройка исключений для определенных доменов ¶

<script>
  // Переопределяем конфигурацию перед загрузкой скрипта
  window.utmConfig = {
    excludeDomains: ['facebook.com', 'twitter.com', 'instagram.com']
  };
</script>
<script src="/utm-forward.js"></script>

Часто задаваемые вопросы ¶

Как долго хранятся UTM-метки? ¶

UTM-метки хранятся в cookie браузера в течение 30 дней (это значение можно изменить в настройках).

Можно ли добавить UTM-метки к внешним ссылкам? ¶

Да, для этого нужно установить параметр addToExternalLinks в true.

Как исключить определенные домены из обработки? ¶

Добавьте домены в массив excludeDomains в настройках скрипта.

Работает ли скрипт с динамически добавляемыми ссылками? ¶

Да, скрипт автоматически обрабатывает все новые ссылки, добавленные на страницу после её загрузки.

Совместим ли скрипт с моей CMS? ¶

Скрипт работает с любой CMS, конструктором сайтов или системой обучения, так как использует только стандартные возможности JavaScript.

Установка на популярных платформах ¶

Google Tag Manager (GTM) ¶

1. Скачайте файл utm-forward.js и загрузите его на ваш сервер
2. В GTM создайте новый тег типа «Пользовательский HTML»
3. Вставьте следующий код:

<script>
  // Конфигурация скрипта (опционально)
  window.utmConfig = {
    addToExternalLinks: true,
    excludeDomains: ['facebook.com', 'twitter.com']
  };
</script>
<script src="https://ваш-домен.ru/path/to/utm-forward.js"></script>

4. Настройте триггер:
   • Выберите «All Pages» для запуска на всех страницах
   • Или создайте пользовательский триггер с событием «DOM Ready»
5. Опубликуйте изменения в GTM

Альтернативный способ через «Пользовательский JavaScript»:

1. Создайте новый тег типа «Пользовательский JavaScript»
2. Вставьте содержимое файла utm-forward.js
3. Добавьте конфигурацию в начало файла
4. Настройте триггер и опубликуйте

Tilda ¶

1. Скачайте файл utm-forward.js и загрузите его в раздел «Файлы» вашего сайта
2. Перейдите в настройки сайта → «Дополнительные настройки» → «HTML-код»
3. Вставьте следующий код перед закрывающим тегом </body>:

<script>
  // Конфигурация скрипта (опционально)
  window.utmConfig = {
    addToExternalLinks: true,
    excludeDomains: ['facebook.com', 'twitter.com']
  };
</script>
<script src="/uploads/utm-forward.js"></script>

4. Сохраните изменения

Альтернативный способ через «Пользовательский код»:

1. Перейдите в «Настройки» → «Пользовательский код»
2. Вставьте код в поле «JavaScript код»
3. Сохраните изменения

GetCourse ¶

1. Скачайте файл utm-forward.js и загрузите его в раздел «Файлы» вашего аккаунта
2. Перейдите в «Настройки» → «Внешний вид» → «Дополнительные настройки»
3. Вставьте следующий код в поле «JavaScript код»:

// Конфигурация скрипта (опционально)
window.utmConfig = {
  addToExternalLinks: true,
  excludeDomains: ['facebook.com', 'twitter.com']
};

// Загрузка скрипта
var script = document.createElement('script');
script.src = '/uploads/utm-forward.js';
document.body.appendChild(script);

4. Сохраните изменения

WordPress ¶

1. Скачайте файл utm-forward.js и загрузите его в папку /wp-content/themes/ваша-тема/js/
2. Откройте файл functions.php вашей темы
3. Добавьте следующий код:

function enqueue_utm_forward() {
    // Конфигурация скрипта (опционально)
    wp_add_inline_script('utm-forward', '
        window.utmConfig = {
            addToExternalLinks: true,
            excludeDomains: ["facebook.com", "twitter.com"]
        };
    ');
    
    // Подключение скрипта
    wp_enqueue_script(
        'utm-forward',
        get_template_directory_uri() . '/js/utm-forward.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_utm_forward');

4. Сохраните изменения