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