Динамические данные в LGT (v2)
1. Введение
Определение
«Динамические данные в LGT» — функциональность Leeloo.AI, позволяющая встраивать JavaScript-скрипты в LGT через кнопку «Источник» во вкладке «Содержимое» конструктора. Доступны 3 готовых скрипта: подстановка сегодняшней даты, обратный отсчёт до вебинара и таймер с автоматическим редиректом. Используется на стадиях Привлечение (Attract) и Вовлечение (Engage) — создаёт urgency и поддерживает актуальность LGT в реальном времени.
Контекст: скрипты заменяют HTML-плейсхолдеры (<span id="today">, <span id="day_before_web">, <span id="timer">) на актуальные значения в браузере подписчика. Таймер использует cookies — стойкий к перезагрузкам страницы и открытию в соседней вкладке.
B2B оператор копирует код из этой инструкции, вставляет его в LGT через кнопку «Источник», настраивает параметры (дата вебинара / URL редиректа / шаг времени) и сохраняет LGT. Может комбинировать несколько скриптов на одном LGT.
B2C клиент видит на LGT актуальные данные в реальном времени: сегодняшнюю дату, счётчик дней до вебинара, таймер до закрытия предложения. Это повышает доверие к актуальности оффера и стимулирует более быстрое решение о подписке.
В Client's Card напрямую ничего не пишется — но повышенный CTR LGT отражается на стадии Анализ (Analyze) в дашборде через рост числа подписчиков и конверсии «показ → подписка».
После ознакомления вы поймёте:
что такое «Динамические данные в LGT» и зачем они нужны в urgency-маркетинге;
как через кнопку «Источник» во вкладке «Содержимое» вставить JavaScript-скрипт в LGT;
как настроить каждый из 3 готовых скриптов: дата, обратный отсчёт до вебинара, таймер с редиректом;
какие HTML-плейсхолдеры (span с id) используются и куда их вставлять в текст LGT;
как избежать частой ошибки потери скрипта при сохранении LGT.
Назначение
Главный механизм urgency-маркетинга на LGT — превращает статичный мини-лендинг в актуальное предложение, реагирующее на текущую дату и время посетителя.
Привлечение (Attract): сегодняшняя дата, таймер обратного отсчёта и счётчик до вебинара создают эффект «здесь и сейчас», повышая CTR LGT в холодном трафике. Задача — повышать конверсию первого касания через ощущение актуальности и ограниченности.
Вовлечение (Engage): динамические данные остаются актуальными при повторных переходах подписчика через сообщения, рассылки и touchpoints воронки. Задача — поддерживать актуальный контекст по мере движения подписчика к целевому действию.
2. Подготовка к работе со скриптами
Чтобы вставить скрипт в LGT, выполните последовательность:
Откройте конструктор LGT, перейдите на вкладку «Содержимое».
Нажмите кнопку «Источник» — редактор переключится в HTML-режим.
Вставьте код скрипта в нужное место текста LGT.
Снова нажмите кнопку «Источник» — редактор вернётся в визуальный режим.
Сохраните LGT.
Если не выйти из режима «Источник» перед сохранением LGT, скрипт может не сработать или сохраниться как обычный текст. Обязательно нажмите «Источник» повторно перед сохранением.
3. Скрипт 1 — Подстановка сегодняшней даты
Подставляет на LGT текущую дату в формате DD.MM. Удобно для анонсов типа «Сегодня в 19:00 — вебинар» — текст автоматически становится актуальным в день показа.
Плейсхолдер в тексте LGT: <span id="today">today</span> — вставьте в то место, где должна отображаться сегодняшняя дата.
Код скрипта (вставляется через кнопку «Источник»):
Веб будет сегодня - <span id="today">today</span>
<script>
var today = document.getElementById('today');
var webDate = new Date();
var month = webDate.getMonth()+1;
var day = webDate.getDate();
today.innerText = (day < 10 ?'0'+day : day)+'.'+ (month<10 ?"0"+month : month);
</script>Видео-обзор: https://youtu.be/NpOGP8ealjk
4. Скрипт 2 — Обратный отсчёт до вебинара
Выводит на LGT текст вида «через N дней / завтра / сегодня» до даты ближайшего вебинара. Склонения «день» / «дня» / «дней» обрабатываются автоматически.
Плейсхолдер: <span id="day_before_web">через 110 дней</span> — вставьте в то место, где должен отображаться счётчик.
Дата вебинара: в строке var dayBeforeWebDate = new Date('2021-01-28'); замените дату на актуальную (формат YYYY-MM-DD).
Код скрипта:
<span id="day_before_web">через 110 дней</span>
<script>
var one_day = 1000 * 60 * 60 * 24;
var presentDate = new Date(new Date().setHours(0, 0,0,0))
var dayBeforeWebDate = new Date('2021-01-28');
if(document.getElementById('web_at')){document.getElementById('web_at').innerText = dayBeforeWebDate.toLocaleDateString('ru');}
var result = (Math.round(dayBeforeWebDate.getTime() - presentDate.getTime()) / (one_day)).toFixed(0);
var finalResult = "через " + result + " дней";
if(result == 0) {
finalResult = "СЕГОДНЯ!";
} else{
if(result == 1){
finalResult = "ЗАВТРА!";
} else {
var dec = 0;
finalResult = 'через ' + result + ' ' + ((((dec = result%100) >= 11 && dec <= 19) || (dec = result%10) >= 5 || dec == 0) ? 'дней' : (dec == 1 ? 'день' : 'дня'));
}}
document.getElementById('day_before_web').innerText= finalResult;
</script>
Видео-обзор: https://youtu.be/d3OkWHDdCIw
5. Скрипт 3 — Таймер с редиректом
Таймер формата HH:MM:SS или DD:HH:MM:SS с автоматическим редиректом по истечении времени. Использует cookies — стойкий к обновлению страницы и открытию в соседней вкладке.
Плейсхолдер: <span id="timer">00:00</span> — вставьте в то место, где должен отображаться таймер.
Параметры настройки:
var counterUrl = 'https://www.google.com';— URL, на который произойдёт редирект после истечения таймера.var cookieName = 'timer-test';— уникальное имя cookie для каждого LGT (чтобы таймеры на разных страницах не конфликтовали).var shiftToEnd = { days: 2, hours: 0, minutes: 0, seconds: 0 };— через сколько времени после первого захода клиента на страницу произойдёт редирект.
Код скрипта:
<script>
var counterUrl = 'https://www.google.com';
var cookieName = 'timer-test';
var counterStartDate = new Date();
var counterIds = [
'timer',
];
var needTime = new Date();
var withDays = false;
var dateText = {};
var MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
var MILLISECONDS_IN_HOUR = 60 * 60 * 1000;
var MILLISECONDS_IN_MINUTES = 60 * 1000;
var MILLISECONDS_IN_SECONDS = 1000;
var shiftToEnd = {
days : 2,
hours : 0,
minutes: 0,
seconds: 0,
};
var dateToDisplay = {};
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = 'expires=' + d.toUTCString();
document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
}
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
}
function checkCookie() {
var counter = getCookie(cookieName);
if (counter !== '') {
counterStartDate = new Date(+counter);
} else {
setCookie(cookieName, counterStartDate.getTime(), 365);
}
}
function countShiftInMilliSeconds(shift) {
var result = 0;
result += shift.days * MILLISECONDS_IN_DAY;
result += shift.hours * MILLISECONDS_IN_HOUR;
result += shift.minutes * MILLISECONDS_IN_MINUTES;
result += shift.seconds * MILLISECONDS_IN_SECONDS;
return result;
}
function millisecondsInShift(timeInMilliseconds) {
if (withDays) {
dateToDisplay.days = Math.floor(timeInMilliseconds / MILLISECONDS_IN_DAY);
timeInMilliseconds -= dateToDisplay.days * MILLISECONDS_IN_DAY;
}
dateToDisplay.hours = Math.floor(timeInMilliseconds / MILLISECONDS_IN_HOUR);
timeInMilliseconds -= dateToDisplay.hours * MILLISECONDS_IN_HOUR;
dateToDisplay.minutes = Math.floor(timeInMilliseconds / MILLISECONDS_IN_MINUTES);
timeInMilliseconds -= dateToDisplay.minutes * MILLISECONDS_IN_MINUTES;
dateToDisplay.seconds = Math.floor(timeInMilliseconds / MILLISECONDS_IN_SECONDS);
}
function prepateTime(text) {
return ('' + text).length < 2 ? '0' + text : text;
}
function displayTime(time) {
if (time < 0) {
time = 0;
}
millisecondsInShift(time);
var dateToDisplayString = (withDays ? prepateTime(dateToDisplay.days) + ':' : '')
+ prepateTime(dateToDisplay.hours)
+ ':'
+ prepateTime(dateToDisplay.minutes)
+ ':'
+ prepateTime(dateToDisplay.seconds);
counterElements.forEach(function (counterElement) {
counterElement.innerHTML = dateToDisplayString;
});
}
var counterElements = counterIds.map(function(counterElementId){
return document.getElementById(counterElementId);
});
checkCookie();
needTime = counterStartDate.getTime();
var now = new Date();
var milisecondsShift = countShiftInMilliSeconds(shiftToEnd);
needTime = needTime + milisecondsShift - now.getTime();
if (needTime < 0) {
window.location = counterUrl;
}
displayTime(needTime);
setInterval(function () {
needTime -= MILLISECONDS_IN_SECONDS;
displayTime(needTime);
if (needTime < 0) {
window.location = counterUrl;
}
}, 1000);
</script>
Видео-обзор: https://youtu.be/0tQX-WWxVHA
Сопутствующие инструкции
Основные функции LGT — обзор инструмента лидогенерации, разделы конструктора и вкладки «Содержимое» / «Стиль» / «Traffic». | |
Редактирование внешнего вида LGT при помощи HTML, CSS, JavaScript | Редактирование внешнего вида LGT через HTML/CSS/JS — где находится кнопка «Источник», как менять стили и поведение страницы. |
Блок «Инструмент лидогенерации» — как LGT встраивается в воронку и связывается с подпиской. | |
Источники трафика и UTM — как трекать переходы на LGT с разных каналов. |
Основные термины
Динамические данные в LGT | JavaScript-скрипты, встраиваемые в LGT для динамической замены значений (дата, счётчик, таймер) на актуальные данные в браузере подписчика. |
LGT (Lead Generation Tool) | Инструмент захвата подписчика Leeloo.AI: мини-лендинг, виджет, форма, QR-код, pop-up, кнопка подписки, FB Ad или Smart Response. |
Плейсхолдер | HTML-элемент |
Источник | Кнопка в редакторе LGT во вкладке «Содержимое», переключающая редактор в HTML-режим для прямой вставки кода. |
Cookie | Браузерное хранилище, в котором таймер сохраняет момент первого захода клиента — обеспечивает стойкость к обновлению страницы. |
Редирект | Автоматический переход браузера на указанный URL после истечения таймера. |
Urgency-маркетинг | Подход к повышению конверсии через создание ощущения дефицита времени или ограниченности предложения. |
Конструктор LGT | Редактор LGT с вкладками «Общие», «Содержимое», «Traffic», «Стиль» — основной интерфейс настройки мини-лендинга. |