Підміна форми в залежності від 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 мітки.

Теги:
Коментарі
Готові шаблони веб-форм
Gold

Доставка квітів

За допомогою цієї форми Ви зможете продавати букети квітів та супутні товари до них, наприклад м'які іграшки, листівки, топпери Докладніше
Platinum

Розрахунок ОСЦПВ

Ви можете отримати розрахунок ОСЦПВ за допомогою онлайн калькулятора, ввівши дані транспортного засобу Докладніше
Free

Форма реєстрації на курс

Шаблон форми реєстрації на курс навчання з вибором дисципліни Докладніше
Platinum

Замовте продуктовий набір

Замовте продуктовий набір за допомогою цього шаблону Докладніше