Как за минуту увеличить глубину просмотра страниц на сайте. Я сотворил Оракула!
Думал как переманить людей с раздела блога на основные страницы сайта. Так чтоб самому захотелось переходить и вот элегантная идея! (ниже код для вставки) Факт! Магический шар предсказаний увеличил вовлеченность.
Сначала сделал такой "кибер глаз" но жена забраковала, говорит нужен магический шар!
Механика предельно простая: кликаешь - получаешь предсказание. Сколько раз кликнешь столько предсказаний получишь, а если оно заходит то жмешь на кнопку, которая переадресовывает на соответствующую страницу с услугой.
Например предсказание: "Пусть цифры вас не пугают — они скоро сложатся в идеальную формулу успеха!" - по кнопке "Узнать как" переводит на страницу "Веб аналитика",
а предсказание: "Контент, созданный вами, соберёт рекордную аудиторию!" - переводит на страницу - "Контентная стратегия".
Такой аналог "Мне повезёт" от гугл.
Разместил в футере, чтоб внизу каждой страницы был Оракул, разметил ссылки ?utm_source=oracle
Если захотите повторить: 1) Скопируйте код и вставьте в него вместо Text свои тексты и Link - свои ссылки 2) Вставьте ссылки на изображения в нужные места (в тексте они размечены) 1 изображение сам оракул, 2-ое - подложка под текст 3) Замените или уберите H2 заголовок 4) Добавьте в футер Тильды блок T123 и вставьте в него получившийся код
<style>
body {
font-family: sans-serif;
margin: 50px;
}
/* Контейнер для изображения и предсказания */
.oracle-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
text-align: center;
}
#oracle-img {
width: 90%;
cursor: pointer;
transition: transform 0.2s;
}
#oracle-img:hover {
transform: scale(1.05);
}
#prediction {
font-size: 1.5em;
color: #fff;
min-height: 40px;
display: none; /* Изначально скрываем */
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
width: 90%;
height: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
top: -5px; /* Немного прижимает блок вплотную к изображению */
}
/* Стили для кнопки/ссылки "Узнать как" */
#prediction a.learn-more {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #fff;
color: #000;
text-decoration: none;
border-radius: 4px;
font-size: 0.8em;
}
#prediction a.learn-more:hover {
background-color: #f0f0f0;
}
</style>
<h2>Оракул бизнес-предсказаний</h2>
<div class="oracle-container">
<!-- Изображение, по которому мы кликаем -->
<img
id="oracle-img"
src="https://static.tildacdn.com/tild6462-3063-4162-b832-383363656331/1.png?text=Oracle"
alt="Оракул"
/>
<!-- Блок, куда выводятся предсказания -->
<div id="prediction"></div>
</div>
<script>
const predictions = [
{
text: "Пусть цифры вас не пугают — они скоро сложатся в идеальную формулу успеха!",
link: "/web-metriki-vliyayushhie-na-dokhod?utm_source=oracle"
},
{
text: "Скоро вам откроются новые возможности на B2B-рынке!",
link: "/b2b-marketing?utm_source=oracle"
},
{
text: "Внимайте голосу клиентов — и конверсия пойдёт в рост!",
link: "/issledovaniya-i-glubinnye-intervyu?utm_source=oracle"
},
{
text: "Поступок партнёра удивит, но принесёт выгоду.",
link: "/autsorsing-marketingovyh-uslug?utm_source=oracle"
},
{
text: "Ваш KPI станет объектом зависти — готовьтесь к поздравлениям!",
link: "/kpi-metriki-i-analitika-rezultatov?utm_source=oracle"
},
{
text: "Фортуна улыбается вашему проекту: всё выгорит!",
link: "/growth-hacking?utm_source=oracle"
},
{
text: "Вирусная реклама сделает вас звездой офиса.",
link: "/videomarketing?utm_source=oracle"
},
{
text: "Сегодня не время для отчётов, сегодня время для побед!",
link: "/marketing-booster-kompanii?utm_source=oracle"
},
{
text: "Новый сотрудник принесёт свежие идеи, берегите его!",
link: "/roli-i-doljnosti?utm_source=oracle"
},
{
text: "Будьте смелее в онлайн-продвижении: риск оправдан.",
link: "/kompleksnyj-internet-marketing?utm_source=oracle"
},
{
text: "Контент, созданный вами, соберёт рекордную аудиторию!",
link: "/kontentnaya-strategiya?utm_source=oracle"
},
{
text: "Не забывайте об отдыхе: из него рождаются большие инсайты!",
link: "/kak-opredelyat-tochki-rosta-kompanii?utm_source=oracle"
},
{
text: "Следующая встреча принесёт неожиданный контракт!",
link: "/abm-marketing?utm_source=oracle"
},
{
text: "Улыбайтесь чаще — это лучший маркетинговый инструмент!",
link: "/vovlechenie?utm_source=oracle"
},
{
text: "Старый контакт возродится и откроет неожиданную сделку!",
link: "/upravleniya-onlajn-reputacziej?utm_source=oracle"
},
{
text: "Ваша настойчивость пробьёт даже самую крепкую дверь к успеху.",
link: "/principy-b2b-prodazh?utm_source=oracle"
},
{
text: "Сегодняшний эксперимент станет завтрашним конкурентным преимуществом.",
link: "/tekhniki-proverki-marketingovykh-gipotez?utm_source=oracle"
},
{
text: "Секретный инсайт из аналитики взорвёт отдел продаж.",
link: "/web-analitika?utm_source=oracle"
},
{
text: "Подружитесь с конкурентом — вместе покорите новую нишу!",
link: "/razvedka-konkurentov?utm_source=oracle"
},
{
text: "Коллега выдвинет безумную идею, которая окажется гениальной.",
link: "/sposoby-upravleniya-slozhnostyu-v-marketinge?utm_source=oracle"
},
{
text: "Похвала от клиента преобразится в вирусную рекомендацию.",
link: "/upravlenie-riskom-v-marketinge?utm_source=oracle"
},
{
text: "Звёзды говорят: пришло время отложенного большого старта!",
link: "/perfomans-marketing?utm_source=oracle"
},
{
text: "Неожиданное признание лидера поднимет дух команды.",
link: "/idealnyj-otdel-marketinga-i-kak-ego-postroit?utm_source=oracle"
}
];
const oracleImg = document.getElementById("oracle-img");
const predictionDiv = document.getElementById("prediction");
function getRandomPrediction() {
return predictions[Math.floor(Math.random() * predictions.length)];
}
oracleImg.addEventListener("click", () => {
const prediction = getRandomPrediction();
predictionDiv.innerHTML = `
<p>${prediction.text}</p>
<a href="${prediction.link}" class="learn-more">Узнать как</a>
`;
predictionDiv.style.display = "block"; // Показываем блок
predictionDiv.style.backgroundImage = "url('https://static.tildacdn.com/tild3238-3231-4935-a564-653237316334/1.png')";
});
</script>
Пишите, звоните, задавайте вопросы - с удовольствием помогу! Маркетинг до результата. Моё портфолио Whatsapp Телеграм