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

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