Для начала предыстория идеи со счётчиком. Как-то просматривая сайты, продающиеся на бирже сайтов, моё внимание привлек недорогой молодой сайт с хорошей посещаемостью. Я зашел на этот сайт и на странице со статьёй я увидел обратный отсчёт. Он меня заинтересовал и я подождал секунд 20 когда он окончится. Когда отсчёт закончился появился текст "Идентификатор статьи" и 2 цифры. Думаю, это сделано для накрутки посещаемости. Но мне понравилось сама идея. Такой счётчик привлекает внимание и человеку становится интересно что будет после окончания обратного отсчёта.
Я решил максимально улучшить эту идею с точки зрения интереса пользователей. Этот счетчик может на какое-то время задержать пользователя на сайте. А значит улучшить показатели ПФ (поведенческих факторов). Я решил добавить отображение сотых долей секунды, чтобы счётчик получился более динамичным и мог зацепить взгляд находясь далеко в подвале. Кроме того я добавил возможность настраивать время отсчёта и числа, с которых отсчёт начинается и заканчивается. Задумка в том, что когда человек видит такой отсчёт он воспринимает изменение цифр как отсчёт в секундах, а ведь цифры могут отсчитывать и по 2 секунды и по 3 и даже минуты. Но кода до конца отсчёта осталось 20 цифр и при этом видно как изменяются сотые доли, тогда может показаться что отсчёт идет быстрее чем на самом деле.
Я решил максимально улучшить эту идею с точки зрения интереса пользователей. Этот счетчик может на какое-то время задержать пользователя на сайте. А значит улучшить показатели ПФ (поведенческих факторов). Я решил добавить отображение сотых долей секунды, чтобы счётчик получился более динамичным и мог зацепить взгляд находясь далеко в подвале. Кроме того я добавил возможность настраивать время отсчёта и числа, с которых отсчёт начинается и заканчивается. Задумка в том, что когда человек видит такой отсчёт он воспринимает изменение цифр как отсчёт в секундах, а ведь цифры могут отсчитывать и по 2 секунды и по 3 и даже минуты. Но кода до конца отсчёта осталось 20 цифр и при этом видно как изменяются сотые доли, тогда может показаться что отсчёт идет быстрее чем на самом деле.
skript_otscheta [ 181.03 КБ | Просмотров: 9310 ]
Итак, после отсчёта я решил поставить ссылку. Это тоже должно улучшить поведенческий фактор.
Как сделать счётчик обратного отсчёта
Если Вы хотите поставить у себя такой счётчик, то вот инструкция.
1. В html код сайта в нужно месте вставить код:
- Код: Выделить всё
<span id='otschet'>2017</span>
2017 - это текст, который будет отображаться до запуска отсчёта, его будут видеть поисковики и пользователи, в браузерах которых не работает яваскрипт.
В любом месте страницы добавить код вызова скрипта:
- Код: Выделить всё
<script defer="defer" type="text/javascript" src="https://dohod-s-nulya.ru/otschet/otschet.js" charset="utf-8"></script>
Адрес сайта поменяйте на свой.
Создать файл с именем otschet.js
Текст файла:
- Код: Выделить всё
/* Скрипт обратного отсчёта. Версия 1.0.0. 29.08.2016*/
var otschet_text = document.getElementById('otschet'),/* Идентификатор элемента, в котором будет отображаться отсчёт */
start_n = 20, /* С этого числа начинается обратный отсчёт */
finisch_n = 0, /* На этом числе оканчивается отсчёт */
sumtime = 40, /* ориентировочная длительность осчёта, в секундах. Более подробно обо всех настройках и свежие версии скрипта */
/* смотрите на сайте идей бизнеса с нуля "Доход с нуля" на странице: */
step_s = sumtime*20, step_n = (start_n-finisch_n)/step_s, pusk_on = 0, text2_on = 0;
var otschet_coords = otschet_text.getBoundingClientRect(), otschet_top = otschet_coords.top, vysota_okna = document.documentElement.clientHeight;
if (otschet_top < vysota_okna) {
var timerId1 = setTimeout(pusk1, 3000)
pusk_on = 1;
}
function pusk1() {
var timeout_id = setTimeout(action, 50);
}
function action() {
start_n = (start_n-step_n).toFixed(2);
if (start_n > finisch_n) {
otschet_text.innerHTML=start_n;
timeout_id = setTimeout(action, 50);
} else {
if (text2_on != 1) {
otschet_text.innerHTML='Для Вас'; /* Первый текст после окончания отсчёта */
text2_on = text2_on+1;
timeout_id = setTimeout(action, 1000); /* Длительность показа первого текста после окончания отсчёта */
} else {
otschet_text.innerHTML='<a href="https://dohod-s-nulya.ru/viewtopic.php?f=24&t=7446" title="Идеи для Вас">Идея!</a>'; /* Второй текст после окончания отсчёта */
clearInterval(interval_id); /* остановка таймера */
}
}
}
if (pusk_on == 0) {
window.addEventListener('scroll', fotschet, false);
document.body.addEventListener('scroll', fotschet, false);
window.addEventListener('resize', fotschet);
function fotschet() {
var otschet_coords = otschet_text.getBoundingClientRect(), otschet_top = otschet_coords.top, vysota_okna = document.documentElement.clientHeight;
if (otschet_top < vysota_okna) {
if (pusk_on == 0) {
pusk_on = 1;
var timeout_id = setTimeout(action, 50);
}
}
}
}
Комментарии из него можно удалить. Файл скопировать на сервер, где находится Ваш сайт. Для этого создать там папку "otschet" с правами 0755 и скопировать туда файл скрипта. Ему задать права 0644.
Статистика, настройки и некоторые особенности скрипта
В дальнейшем возможно я добавлю функции сбора статистики по этому скрипту, а пока посмотреть статистику можно по теме, на которую ведёт ссылка в подвале данного сайта: "Идеи для Вас" или "Доход с нуля для Вас". Там же проводится опрос, о том как люди попадают в ту тему.
Между отсчётом и появлением ссылки я добавил отображение ещё одной фразы. Длительность её появления тоже можно регулировать.
В первой версии скрипта после отсчёта на полторы секунды появляется фраза "Для Вас", потом ссылка с анкором "Идея!". Вместо слова "идея" Вы можете поставить любое слово подходящее по тематике вашего сайта, например его главный ключевик. Адрес ссылки также надо поменять на адрес Вашей страницы.
Особенности:
1. При переходе пользователем на другую вкладку скрпит замедляется в 20 раз.
2. Если исходный текст отображается на странице без прокрутки до него, то есть видно сразу, то тогда счётчик запускается примерно через три секунды.
3. Скрипт автоматически запускается когда исходный текст появляется в видимой области окна пользователя. До этого времени текст не меняется.
4. В скрипте не используются сторонние библиотеки, поэтому загружается минимальный объём данных.
О настройках, которые я здесь не упомянул, можно узнать из комментариев в коде самого скрипта (см. выше).
Между отсчётом и появлением ссылки я добавил отображение ещё одной фразы. Длительность её появления тоже можно регулировать.
В первой версии скрипта после отсчёта на полторы секунды появляется фраза "Для Вас", потом ссылка с анкором "Идея!". Вместо слова "идея" Вы можете поставить любое слово подходящее по тематике вашего сайта, например его главный ключевик. Адрес ссылки также надо поменять на адрес Вашей страницы.
Особенности:
1. При переходе пользователем на другую вкладку скрпит замедляется в 20 раз.
2. Если исходный текст отображается на странице без прокрутки до него, то есть видно сразу, то тогда счётчик запускается примерно через три секунды.
3. Скрипт автоматически запускается когда исходный текст появляется в видимой области окна пользователя. До этого времени текст не меняется.
4. В скрипте не используются сторонние библиотеки, поэтому загружается минимальный объём данных.
О настройках, которые я здесь не упомянул, можно узнать из комментариев в коде самого скрипта (см. выше).
и я только в этот момент обратил на него внимание.
