Аналитика в GetCourse. Настройка сохранения UTM-меток в доп. поля GetCourse

В добавленном поле заполните заголовок: utm_source

Это будет поле источника.

Всего вам нужно создать пять дополнительных полей — для каждой метки.

1. utm_source — название источника трафика. Например: yandex, vk, telegram и т. п.
2. utm_medium — тип трафика. Чтобы определять тип кампании или рекламы. Например, реклама у блогера — bloger, реклама с оплатой за клики — cpc, медийная реклама — banner и т. д.
3. utm_campaign — название рекламной кампании, чтобы отличать разные запуски одного продукта. Например: webinar-05-06-2025.
4. utm_content — название конкретного объявления или единицы контента. Например: post-03-06-2025 или story-06-06-2025. Также это может быть название или идентификатор объявления в ВК / Яндекс.Директ.
5. utm_term — обычно используется для поисковой рекламы и записывает ключевое слово, по которому пользователю была показана реклама.

Помимо этих меток, вы также можете добавлять любые другие. Например, можно сохранять номер визита Roistat или идентификатор Salebot, если у вас есть интеграция с этим конструктором. Просто создайте новое поле с типом строка и напишите нужный заголовок.

В результате у вас должно получиться так:

Нажмите кнопку «Создать», чтобы сохранить дополнительные поля. Дополнительные поля готовы!

Теперь добавим их в форму на странице. Если вы используете сторонний сайт и виджеты GetCourse, принцип добавления будет одинаковым. Отличаться будет место добавления скрипта для сохранения меток, но об этом дальше. Пока работаем с формой.

Перейдите к нужной странице с формой (или к виджету), откройте настройки формы и добавьте дополнительные поля заказа:

В выпадающем списке выберите дополнительное поле заказа:

И точно так же добавьте ещё четыре доп. поля: utm_medium, utm_campaign, utm_content и utm_term.

Сохраните изменения, поля появятся в вашей форме. После того, как мы протестируем работу скрипта и убедимся, что метки подставляются в поля, мы их скроем, чтобы пользователи их не видели.

Форма готова. Переходим к настройке скриптов.

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

Если форма на странице GetCourse, добавьте в низ страницы блок JavaScript (Все блоки — Вставка — JavaScript-код). Оборачивать код в html-теги не нужно.

Если вы используете виджет для стороннего сайта, добавьте в форму элемент HTML и добавьте скрипт в него, обернув тегами <script> ... </script>

function getGet(name) {
   var s = window.location.search;
   s = s.match(new RegExp(name + '=([^&=]+)'));
   return s ? decodeURIComponent(s[1]) : false;
}

$(function(){
   $('[id="field-input-00000000"]').val(getGet("utm_source")); 
   $('[id="field-input-00000000"]').val(getGet("utm_medium")); 
   $('[id="field-input-00000000"]').val(getGet("utm_campaign")); 
   $('[id="field-input-00000000"]').val(getGet("utm_content")); 
   $('[id="field-input-00000000"]').val(getGet("utm_term"));  
});

Теперь нужно в скрипте заменить field-input-00000000 на идентификаторы созданных нами доп. полей.

Чтобы найти эти идентификаторы, воспользуемся инструментами разработчика. Они есть в каждом браузере.

Нажмите правой кнопкой мыши на первое доп. поле — utm_source и в появившемся контекстном меню выберите «Проверить элемент»

* в разных браузерах этот пункт может называться по-разному. Например, «Проверить элемент» или как-то иначе

В открывшемся окне инспектора нужно найти идентификатор поля. Выглядит он вот так:

Вам нужно скопировать этот идентификатор и вставить в скрипт. И так проделать с каждым дополнительным полем. Так скрипт будет знать, какое значение метки (или другого параметра в ссылке), в какое поле подставлять.

После этого скрипт у вас будет выглядеть так:

function getGet(name) {
   var s = window.location.search;
   s = s.match(new RegExp(name + '=([^&=]+)'));
   return s ? decodeURIComponent(s[1]) : false;
}

$(function(){
   $('[id="field-input-10952723"]').val(getGet("utm_source")); 
   $('[id="field-input-10952724"]').val(getGet("utm_medium")); 
   $('[id="field-input-10952725"]').val(getGet("utm_campaign")); 
   $('[id="field-input-10952726"]').val(getGet("utm_content")); 
   $('[id="field-input-10952727"]').val(getGet("utm_term"));  
});

Теперь можно протестировать работу скрипта.

Сохраните все изменения на странице и опубликуйте её. Откройте в новом окне и добавьте в адресную строку все utm-метки, чтобы убедиться, что все поля заполняются скриптом корректно.

Можете скопировать вот этот «хвост» и добавить к своему адресу страницы:

?utm_source=source-test&utm_medium=medium-test&utm_campaign=campaign-test&utm_content=content-test&utm_term=term-test

Если вы всё сделали правильно, метки должны подставиться в вашу форму:

Если вы используете формы в виде виджетов на сторонних сайтах, например, на Tilda, WordPress и т. п., то форма выводится на странице во фрейме.

Политики безопасности браузеров устроены таким образом, что код в iframe никак не может взаимодействовать с «родительской» страницей. То есть скрипт, который вы добавили в виджет для подстановки меток в дополнительные поля, не видит, что в ссылке есть метки, поэтому ничего не подставит в форму.

Поэтому нам нужен дополнительный скрипт, который «пробросит» метки из URL в iframe. А уже во фрейме скрипт «подхватит» метки и добавит в форму.

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

Скрипт:

<script>
$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  const $iframe = $('iframe');
  
  if ($iframe.length) {
    let iframeSrc = $iframe.attr('src');
    
    if (urlParams.toString()) {
      const iframeUrl = new URL(iframeSrc);
      const existingParams = new URLSearchParams(iframeUrl.search);
      
      urlParams.forEach((value, key) => {
        if (!existingParams.has(key)) {
          existingParams.set(key, value);
        }
      });
      
      iframeUrl.search = existingParams.toString();
      $iframe.attr('src', iframeUrl.toString());
    }
  }
});
</script>

Если всё сделано правильно, метки будут подставляться в форму виджета.

Осталось совсем чуть-чуть — скрыть дополнительные поля от глаз пользователей.

Откройте настройки вашей формы. Поочерёдно раскрывайте дополнительные поля и добавляйте им класс hidden.

После того, как добавите класс hidden ко всем доп. полям, сохраните форму и опубликуйте изменения (для страниц, виджеты обновляются автоматически).

Готово! Вы великолепны!

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

Это всё можно посмотреть и в разделе заказов, и собрать информативный дашборд, на котором можно будет отслеживать эффективность вашей рекламы в реальном времени. Но это уже другая история :)