Как сохранять UTM-метки в формах Elementor

Какие UTM-метки стоит сохранять

Чаще всего в форме передают пять стандартных параметров: utm_source, utm_medium, utm_campaign, utm_content и utm_term. Вместе они позволяют понять, откуда пришел пользователь и какой именно рекламный вариант сработал.

Например, URL рекламного объявления может выглядеть так: https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_content=banner_a&utm_term=shoes. После отправки формы эти значения попадут в соответствующие поля заявки.

• utm_source — источник трафика: google, facebook, newsletter и другие.
• utm_medium — тип канала: cpc, social, email, organic.
• utm_campaign — название рекламной кампании.
• utm_content — конкретное объявление, баннер или вариант креатива.
• utm_term — ключевое слово или другой идентификатор аудитории либо запроса.

Создайте скрытые поля в форме Elementor

Откройте нужную форму Elementor и добавьте пять полей типа Hidden. Для каждого поля задайте ID, который точно соответствует названию UTM-параметра. Именно ID используется скриптом для поиска поля на странице.

Скрытые поля не отображаются посетителю, но их значения передаются вместе с остальными данными формы. Они не должны быть обязательными: если пользователь зашел без UTM-меток, форма все равно должна принимать заявку.

• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term

Проверьте ID, а не только подпись поля

Название, которое видит администратор в редакторе, и технический ID — не всегда одно и то же. В настройках каждого поля проверьте именно значение ID. Не добавляйте пробелы, заглавные буквы или префиксы вроде field_.

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

Добавьте JavaScript для подстановки значений

Скрипт считывает параметры из адреса страницы и записывает их в скрытые поля Elementor. Его можно разместить в Custom Code или HTML-виджете на странице с формой — в зависимости от доступных в проекте инструментов.

Код проверяет наличие каждого параметра. Если определенной UTM-метки нет в URL, соответствующее поле остается пустым, а форма не блокируется.

document.addEventListener('DOMContentLoaded', function () {
  const params = new URLSearchParams(window.location.search);
  const keys = ['source', 'medium', 'campaign', 'content', 'term'];

  keys.forEach(function (key) {
    const parameterName = 'utm_' + key;
    const value = params.get(parameterName);

    if (value === null) {
      return;
    }

    const fields = document.querySelectorAll(
      '[name="form_fields[' + parameterName + ']"]'
    );

    fields.forEach(function (field) {
      field.value = value;
    });
  });
});

Как работает код

URLSearchParams получает значения из query string — части URL после знака ?. Затем скрипт проходит по списку параметров и ищет поля с именами вроде form_fields[utm_source]. Это стандартный формат полей Elementor Form.

Использование querySelectorAll вместо поиска только первого элемента позволяет заполнить несколько форм на одной странице. Если в проекте используется нестандартная загрузка формы после взаимодействия пользователя, скрипт может потребоваться запускать после появления формы в DOM.

Настройте передачу полей в заявку

Одной подстановки значений в браузере недостаточно — нужно убедиться, что Elementor передает их в выбранные действия формы. Проверьте настройки отправки письма, интеграции с CRM или другого подключенного сервиса. В письме или записи заявки должны отображаться названия и значения скрытых полей.

Если форма отправляется на электронную почту, проверьте шаблон сообщения: в нем должны использоваться поля формы, а не вручную прописанные пустые значения. Для CRM проверьте, созданы ли соответствующие поля и принимает ли интеграция их значения.

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

• Добавьте UTM-поля в уведомление о новой заявке.
• Проверьте сопоставление полей при передаче данных в CRM.
• Не делайте UTM-поля обязательными.
• Заранее определите, где именно команда будет просматривать эти данные.

Как протестировать сохранение UTM-меток

Тестируйте форму не обычным открытием страницы, а по URL с тестовыми параметрами. Например:

• Откройте страницу с формой по адресу вроде example.com/?utm_source=test_source&utm_medium=test_medium&utm_campaign=test_campaign&utm_content=test_content&utm_term=test_term.
• Отправьте форму с тестовыми контактными данными.
• Проверьте письмо, запись в WordPress или карточку лида в CRM.
• Убедитесь, что каждое значение попало в свое поле.
• Повторите тест без UTM-меток и проверьте, что форма по-прежнему отправляется.

Если значения не передались

Сначала откройте инструменты разработчика браузера и проверьте, есть ли на странице нужные input-элементы. Если поля отсутствуют, имеют другой ID или не являются скрытыми полями Elementor, скрипт не сможет их найти.

Также проверьте, загружается ли код без ошибок, содержит ли тестовый URL правильные названия параметров и не меняет ли кешированная версия страницы результат после внесения изменений.

• ID поля не совпадает с названием UTM-параметра.
• В URL допущена ошибка, например utm-сampaign вместо utm_campaign.
• Скрипт добавлен не на ту страницу или не выполняется.
• В CRM не настроен прием скрытых полей.
• Кеш или оптимизатор JavaScript отдает старую версию кода.

Типичные ошибки и важные ограничения

UTM-метки сохраняются только в рамках текущего URL, если отдельно не настроить их перенос между страницами. Если пользователь пришел на посадочную страницу из рекламы, а затем перешел на другую страницу с формой, параметры могут исчезнуть из адреса.

Для многостраничных сценариев или сложных воронок значения часто сохраняют в cookie или sessionStorage, а затем подставляют в форму. Это отдельное решение, которое нужно тестировать с учетом согласия на использование cookie и требований к конфиденциальности.

Не передавайте в UTM персональные данные: имена, телефоны, адреса электронной почты или другую чувствительную информацию. UTM-параметры могут попадать в историю браузера, системы аналитики, журналы сервера и письма.

Помните, что наличие UTM-метки не доказывает фактический источник заявки. Данные могут быть потеряны из-за редиректов, блокировщиков, очистки параметров или перехода между страницами.

• Не используйте кириллические или непоследовательные названия параметров в рекламных URL.
• Соблюдайте единый регистр и правила именования кампаний.
• Проверяйте работу после обновления Elementor, темы или плагинов оптимизации.
• Ограничьте доступ к UTM-данным только сотрудникам, которым они нужны для аналитики.