Цель: улучшить поведенческие факторы (среднее время на сайте, показатель отказов, глубина просмотра).
Как подключить библиотеку jQuery
Есть несколько способов подключить библиотеку jQuery: скачать файл в папку или подключить напрямую.
Рассмотрим второй вариант.
Для подключения рекомендую использоваться подключение от Google Developers. Наша задача скопировать строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
и вставить эту строчку перед закрывающимся тегом </head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
</body>
</body>
</html>
Добавляем скрипт, который проверяет пользователя на первое посещение
Теперь мы должны добавить проверку на первое посещение и добавить cookie, чтобы наш счётчик сохранял значение скидки при переходе по страницам сайта.
Добавляем скрипт перед тегом </body>
if(getCookie('disc')){ //Проверяем есть ли cookie (Первое ли посещение сайта?)
var disc = parseFloat(getCookie('disc'));
var timer = setInterval(function () { // Функция, которая увеличивает значение скидки через определённое количество времени
if(disc < 4.9999){ //Устанавливаем максимальную скидку, тут 5%
disc +=0.01; //Увеличиваем значение на 0.01
setCookie('disc', disc.toFixed(2), {secure: true, 'max-age': 86400}); //Устанавливаем cookie, secure - соединение https, max-age - как долго будут жить cookie, тут 24 часа
jQuery('#disc-wid').text(disc.toFixed(2)); // Выводим значение скидки
console.log(disc); //Выводим значение скидки в консоли для проверки
}else{
jQuery('#disc-wid').text(5); //Устанавливаем значение максимальной скидки
console.log('Максимальная скидка'); //Выводим в консоли соответствующее сообщение
clearInterval(timer); //Останаливаем функцию, которая увеличивает значение скидки
return false;
}
}, 2000);
}else{
setCookie('disc', 0, {secure: true, 'max-age': 86400}); //Если первое посещение - устанавливаем cookie
disc = 0;
var timer = setInterval(function () {
disc +=0.01;
if(disc < 4.9999){
setCookie('disc', disc.toFixed(2), {secure: true, 'max-age': 86400});
jQuery('#disc-wid').text(disc.toFixed(2));
console.log(disc);
}else{
console.log('Максимальная скидка');
clearInterval(timer);
jQuery('#disc-wid').text(5);
return false;
}
}, 2000);
}
function setCookie(name, value, options = {}) { //Функция, которая устанавливает cookie
options = {
path: '/',
};
//if (options.expires.toUTCString) {
// options.expires = options.expires.toUTCString();
//}
let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (let optionKey in options) {
updatedCookie += "; " + optionKey;
let optionValue = options[optionKey];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;
}
function getCookie(name) { // Функция, которая забирает значение cookie
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
Добавляем HTML код нашего виджета
Добавляем код после тега <body>
<div class="discount-widjet" title="Нажмите для получения скидки">
<p>Ваша скидка</p>
<p class="input-disc">
<span id="disc-wid"></span>%
</p>
</div>
Стилизуем наш виджет с помощью CSS
Добавляем css код или в подключаемом файле, или в теге <style> перед тегом </head>
.discount-widjet {
cursor: pointer;
position: fixed;
left: 0px;
bottom: 15%;
background: #fff;
padding: 20px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 3px 3px 10px #bebebe;
display: flex;
flex-direction: column;
align-items: center;
transition: .4s;
}
.discount-widjet p {
margin: 0;
font-size: 20px;
}
Ваша скидка
%
Для лучшей отработки виджета можно добавить действие на клик по виджету, при котором открывалась бы форма заказа, чтобы пользователь сразу смог воспользоваться полученной скидкой:)
Итог нашей работы Вы можете увидеть в нижней левой части данной страницы.
Виджет работает только на данной странице и носит исключительно показательный характер.
С результатом работы виджета Вы сможете ознакомится в кейсе по установке виджета с нарастающей скидкой
