Як зберігати 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-даних лише працівникам, яким вони потрібні для аналітики.