Підміна форми в залежності від UTM мітки

Добрий день.

Нещодавно до нас звернувся клієнт з проханням допомогти реалізувати функціонал, при якому користувачам, які перейшли на сайт з певною UTM міткою виводити одну форму, а всім іншим - іншу форму.

Як замінити форму на сайті в залежності від UTM мітки?

Готового рішення у нас для цього не було і ми вирішили показати, як це можна реалізувати на будь-якому сайті використовуючи JavaScript код.

Для того, щоб прочитати значення get пераметра з URL в javascrpt є спеціальний об'єкт URL(), який надає зручні методи і параметри, для роботи з URL.

Для того, щоб створити цей об'єкт, необхідно в конструктор цього класу передати поточний рядок URL. Це можна зробити ось так:

var url = new URL(document.location.href);

Для того, щоб отримати значення ютм мітки, необхідно використовувати властивість searchParams об'єкта URL. Щоб отримати значення UTM мітки utm_source, необхідно написати такий код:

var utmSource = url.searchParams.get('utm_source');

Отримавши це значення, ми тепер можемо його порівняти з заданим значенням і замінити ID форми, на будь-який інший. Як приклад, давайте замінимо форму для відвідувачів, які перейшли на сайт з UTM міткою utm_source рівною значенню "promo":

<div id="form_123456_1"></div>
<script type="text/javascript">
   (function (d, w, c) {
       var url = new URL(document.location.href);
       var utmSource = url.searchParams.get('utm_source');
      // ID формы по умолчанию
       var formId = 123456;
       // ID формы, для пользователей с UTM меткой utm_source равной promo
       if (utmSource === 'promo') {
             var formId = 654321;
       }
       (w[c] = w[c] || []).push({formId: formId, host:"formdesigner.ru", formHeight:100, el: "form_123456_1", center: 1, scroll: 0});
       var s = d.createElement("script"), g = "getElementsByTagName";
       s.type = "text/javascript"; s.charset="UTF-8"; s.async = true;
       s.src = (d.location.protocol == "https:" ? "https:" : "http:")+"//formdesigner.ru/js/iform.js?v=0.0.2";
       var h=d[g]("head")[0] || d[g]("body")[0];
       h.appendChild(s);
   })(document, window, "fdforms");
</script>

За замовчуванням, для всіх відвідувачів сайту буде показуватися форма з ID = 123456 (необхідно замінити на своє значення), а для тих користувачів, які перейшли на сайт з utm_source рівним promo, буде виводитися форма з ID = 654321 (необхідно замінити на своє значення).

Ось так просто можна зробити підміну форми в залежності від значення UTM мітки.