Подмена формы в зависимости от 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

Какой вид макияжа тебе подходит?

Квиз для самостоятельного подбора макияжа. Для посетителей магазинов косметики, салонов красоты, тематических блогов, соцстраниц, СМИ.
$6.00
Подробнее
Basic

Запись на автосервис

Шаблон онлайн-бронирования времени на услуги СТО Подробнее
Gold

Куда отправиться в путешествие?

Для турфирм. Пройдите короткий тест, выберите страну для идеального отдыха и получите скидку 10% на любой тур из нашего каталога!
$6.00
Подробнее
Platinum

Назовите родные континенты представленных животных

Сможете ли назвать континенты животных, которые представлены на фото? Подробнее

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас