Подключение посадочной страницы
Подключение посадочной (лендинга) организовано безопасным способом: вы расставляете обычные ссылки на ТГ канал и размещаете специальный скрипт бота, который получаете при создании подключения.
Скрипт заменяет обычные ссылки в Телеграм на свои. Но если скрипт не загрузится в силу тех или иных причин, переход в Телеграм будет работать и рекламные кампании не пострадают.
Подключение лендинга
Этот сценарий подойдет для большинства популярных конструкторов: тильда, flexBy, tapLink, WordPress и другие.
Шаг 1 – подключите скрипт.
- Разместите код, который вы получили при создании подключения в любом месте между тегами <head></head> вашего лендинга.
- Для Я.Директ: отдельно Я.Метрику можно не подключать – скрипт бота добавит её самостоятельно.
Шаг 2 – разместите ссылки на канал.
На элементах интерфейса (кнопках) – поставьте ссылки на ваш канал согласно инструкции, полученной при создании подключения.
- https://t.me/<ссылка на канал> – для перехода в конец канала
- https://t.me/<ссылка на канал>/123 – для перехода на посадочный пост, где 123 – номер поста
Переход на посадочный пост возможен только для открытых каналов с публичной ссылкой.
Если на лендинге несколько кнопок или ссылок, которые ведут в канал, то убедитесь, что на них на всех ссылки как в инструкции по подключению.
C одного лендинга можно вести на разные посты. Достаточно изменять номер поста в конце ссылки.
Шаг 3 – опубликуйте страницу.
Если всё сделано верно, то переход в канал с лендинга должен заработать.
Шаг 4 – протестируйте разметку лендинга.
В конце url вашего лендинга допишите параметр ?tgtrack=test и обновите страницу. Если все подключено верно, то бот покажет окно с количеством найденных ссылок. Сверьте это число с тем, сколько у вас на лендинге в действительности.
Конструктор Тильда
Если ваш лендинг сделан на Тильде, проверьте, пожалуйста, настройку кнопки перехода в канал.
Шаг 1. Отключить сбор статистики в настройках кнопки
Отслеживание клика – отключить (none)
Шаг 2. В настройках кнопки TARGET поставить: New window
Конструктор Геткурс, SaleBot
Если ваш лендинг сделан на этом конструкторе, то кнопку перехода в телеграм канал нужно сделать самому на чистом HTML коде:
HTML блок с кнопкой:
<div class="btnWrapper">
<a href="https://t.me/ссылка_в_канал/номер_поста" target="_blank">
<button class="toTg">
Перейти в телеграм
</button>
</a>
</div>Code language: HTML, XML (xml)
CSS-код
.toTg {
display: block;
box-sizing: border-box;
width: 100%;
padding: 9px 20px; /* Отступы */
font-family: 'Nunito', sans-serif;
background-color: rgb(26, 83, 198); /* Основной цвет фона */
color: white; /* Цвет текста */
border-radius: 100px; /* Скругленные углы */
text-align: center; /* Центровка текста */
font-size: 14px; /* Размер шрифта */
font-weight: normal; /* Толщина шрифта */
cursor: pointer; /* Курсор при наведении */
border: none; /* Убираем границу */
position: relative; /* Положение для блика */
overflow: hidden; /* Скрываем выходящий блик */
}
.toTg::before {
content: '';
position: absolute;
top: -30%;
left: -30%;
width: 50%;
height: 50%;
background: rgba(255, 255, 255, 0.5);
transform: rotate(45deg);
pointer-events: none;
animation: shine 2s linear infinite; /* Цикличная анимация блика */
}
@keyframes shine {
0% {
left: -150%; /* Начинаем с левой стороны */
}
100% {
left: 150%; /* Заканчиваем на правой стороне */
}
}Code language: CSS (css)Конструктор LPMotor
Конструктор LPMotor имеет свою особенность: он вместо стандартных HTML ссылок использует собственные блоки с кодом обработки. Такие блоки скрипт бота не распознает как ссылки.
Если ваш лендинг сделан на этом конструкторе, то кнопки перехода в телеграм канал нужно сделать самому на чистом HTML коде:
HTML блок с кнопкой:
<div class="buttonBlock">
<a href="https://t.me/ссылка_в_канал/номер_поста">
<div class="button">
ПЕРЕЙТИ В ТЕЛЕГРАМ
</div>
</a>
</div>
Code language: HTML, XML (xml).buttonBlock {
text-align: center;
}
.buttonBlock .button {
display: inline-block;
margin: auto;
background-color: blue;
color: white;
padding: 16px 32px;
border-radius: 8px;
}
Code language: CSS (css)