Как отлеживать источник заявок с помощью UTM-меток на сайте Webflow

Маркетинг всегда требует анализа эффективности рекламных кампаний и одним из способов является фиксирование источника заявок. Решением этой задачи является использование UTM-меток, которые представляют из себя динамические переменные и могут менять свое значение, например, показывать название рекламной кампании или содержать номер рекламного баннера.

UTM расшифровывается как Urchin Tracking Module (отслеживающий модуль компании Urchin) и создан в Urchin Software, которую в 2005 году купил Google

Как создать ссылку?

Метки зашиваются в ссылку конкретных рекламных объявлений и начинаются с вопросительного знака и разделяется амперсандом:

https://google.com/?utm_sourse=google&utm_medium=context&utm_campaign=campaign

Какие переменные бывают?

utm_source

Название рекламной площадки источника: google/yandex/vk

utm_medium

Тип кампании или рекламы: organic/cpc/email/social/banner

utm_campaign

Название кампании, которое позволит вам отличить одну рекламную кампанию от другой в статистике: mebel_dlya_doma

Названия типов переменных могут быть любыми. Например, utm_device для отражения мобильного или десктопного трафика или utm_keyword для ключевого слова в рекламном оффере

Какие есть требования для переменных?

Использовать латиницу
Использовать прописные буквы
Разделять слова подчеркиваниями или дефисами

Как передавать UTM-метки в форму заявок?

Первым делом стоит добавить скрипт в <body> всего сайта, который будет находить метки в ссылки и сохранять их в консоль

<script>
  var queryString = window.location.search;
  console.log(queryString);
  var URLSearchParams_wb = new URLSearchParams(queryString);

  const utmParameters = [
    "utm_source", 
    "utm_medium", 
    "utm_campaign"
  ];

  for (const utm_element of utmParameters) {
    $( "form" ).each(function( index ) {
      if(URLSearchParams_wb.has(utm_element)){
        console.log(utm_element + "is exist");
        var value = URLSearchParams_wb.get(utm_element)
        $( this ).find("."+utm_element).val(value);
      }
    })
  }
</script>

Затем добавить невидымые поля внутри формы заявки, которые будут подтягивать в себя переменные значения из консоли

<input type="hidden" class="utm_source" placeholder="utm_source" name="utm_source">
<input type="hidden" class="utm_medium" placeholder="utm_medium" name="utm_medium">
<input type="hidden" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">

Когда стоит использовать UTM-метки?

UTM-метки будут полезны при создание рекламной кампании в Google, Яндексе или при использовании других способов привлечения клиентов, например, баннерной офлайн рекламы

Также хороший кейс использования при email-рассылке по листу ваших подписчиков и отслеживания эффективности рассылок