Скрипт подмены телефонов, заголовков и др. в зависимости от UTM-параметров в ссылках
Часто при проектировании сайта встает задача формирования заголовков, текстов, изменения каких-либо данных в зависимости от того, какие параметры задаются в url сайта. Например, на сайте нужно выводить разные номера телефонов для разных городов или в зависимости от параметров в ссылках. Для этого в объявление добавляется параметр с каким-либо названием, и, если пользователь переходит на сайт с этого объявления, то ему показывается на сайте новый телефон.
Алгоритм, по которому можно решить данную задачу, выглядит примерно так:
- В объявление добавляется параметр, например, с названием “utm_campaign” и определенным набором возможных значений (tumen, kirov, ivanovo), тогда ссылка на сайт будет иметь вид: http://www.site.com/?&utm_campaign=tumen
- Скрипт анализирует содержимое адресной строки и, если она содержит параметр с именем “utm_campaign” и его значение входит в список возможных, то он сохраняет в браузере куку с уникальным именем для этого сайта и значением, переданным в адресной строке, например, получится кука “utm_campaign_change=tumen”.
- Затем скрипт выполняет проверку условий: содержит ли ссылка заданный нами параметр с возможным значением и хранится ли в браузере кука “utm_campaign_change” с одним из возможных значений. Если хотя бы одно из этих условий выполнено, то скрипт заменяет телефон на сайте.
Пример реализации этой задачи приведен в плагине, доступном по ссылке.
Для использования данного скрипта нужно подключить библиотеку jquery.js перед закрывающим тегом , после этого подключить приведенный выше скрипт. Ниже приведен пример страницы, на которой подключены необходимые скрипты и есть блок, в котором будет меняться номер телефона, с уникальным идентификатором:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Скрипт подмены номеров</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="phone__outer">
<p>Номер телефона:</p>
<div class="phone__in" id="phone">+7 (8332) 22-22-22</div>
</div>
<script src="juery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
В блоке с идентификатором "phone" будет меняться номер телефона. В строках <script src='...' type="text/javascript"> подключаются необходимые скрипты.
Код скрипта main.js приведен ниже:
(function( $ ) {
$.fn.changeData = function(options) {
var settings = {
urlParam: null,
nameCookie: null,
paramList: null,
newData: null
};
return this.each(function() {
if (options) {
$.extend(settings, options);
}
function getCookie(name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset);
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
return(setStr);
}
function setCookie(name, valCookie) {
document.cookie = name+"=; expires=; path=/";
expires = new Date();
expires.setTime(expires.getTime() + 622229959999);
document.cookie = name+"=" + valCookie + "; expires=" + expires.toGMTString() + "; path=/"
}
function parseGetParams(peremennya) {
var getURl = window.location.search.substring(1);
var peremennii = getURl.split("&");
for (var i=0; i<peremennii.length; i++) {
var pair = peremennii[i].split("=");
if (pair[0] == peremennya) {
return pair[1];
}
}
return(false);
}
var param = parseGetParams(settings.urlParam);
if (settings.paramList.indexOf(param)!=-1) {
setCookie(settings.nameCookie, param);
}
var param_cookie = getCookie(settings.nameCookie);
for(var i=0; i<settings.paramList.length; i++){
if ((param_cookie == settings.paramList[i]) || (param == settings.paramList[i])) {
$(this).text(settings.newData[i]);
}
}
})
};
})(jQuery);
$(function() {
$('#phone').changeData({
urlParam: 'utm_campaign',
nameCookie: 'utm_campaign_change',
paramList: [
'tumen',
'ivanovo'
],
newData: [
'+7 (982) 977-30-36',
'+7 (930) 347-69-65'
]
});
});
В скрипте для блока, в котором будем менять данные, вызывается функция, в которую передаем следующие параметры: имя параметра, указываемого в объявлении, имя куки, в которой будем сохранять значение параметра, массив значений параметра (в нашем случае список городов) и массив значений для замены (в нашем случае номеров телефонов).
Функция changeData() содержит следующие методы:
• функция getCookie(name) возвращает значение куки, имя которой передаем как параметр;
• функция setCookie(name, valCookie) записывает куку с именем name и значением valCookie;
• функция parseGetParams(peremennya) определяет значение параметра peremennya в адресной строке.
В функции changeData() после задания параметров и определения функций выполняется запись куки, если адресная строка содержит указанный нами параметр со значением из списка возможных. Затем выполняется проверка, содержит ли адресная строка параметр или кука со значением из списка. Если хотя бы одно условие выполняется, то происходит замена номера телефона в указанном нами блоке.
После того, как пользователь перешел по объявлению с нашим параметром, он может заходить на сайт и по прямой ссылке (без параметров) и тогда ему тоже будет показываться измененный номер телефона, так как в браузере в куках сохранена информация о переходе с объявления.
P.S. Если вам необходимо реализовать подмену телефонов, заголовков, баннеров в зависимости от рекламных каналов и не хочется разбираться в этом самостоятельно, то мы можем сделать это за вас. Пожалуйста, обращайтесь.
Автор: Буякова Екатерина - Web-технолог интернет-агентства Brandmaker.
Как сохранить спокойствие предпринимателю
Как сохранить и приумножить деньги в кризис
Бизнес в условиях коронавируса: подборка исследований за прошедшую неделю
Бизнес в условиях коронавируса: подборка аналитических отчетов за прошедшую неделю
Бизнес в условиях коронавируса: подборка аналитических отчетов за неделю
Будущее автоматизации цепочек поставок после COVID-19
