HelloBar — Настройка и Установка Скрипта

июля 16 16:17 2012

Всем привет! Сегодняшний пост посвящен такой финтифлюшке как HelloBar. HelloBar — это красивая информационная панель (как она работает можно посмотреть на сайте разработчика), которая размещается в самом верху страницы и в которой можно разместить рекламное сообщение и задать кнопке любой текст. Панель эта фиксируется вверху, видна постоянно и если посетитель пожелает, то ее можно свернуть.

Увидев впервые HelloBar в действии, он мне очень понравился. Просто, красиво и изящно. Как настроить и установить данный скрипт, читайте дальше.

Также как и в случае с плагином Scrolling Social Sharebar здесь я — первый. Про HelloBar в рунете еще не писал никто (по-крайней мере Google и Yandex ничего мне не выдали в ответ на запрос «HelloBar»).  Ну да ладно. Действие скрипта вы уже оценили. Приступаем к настройке и установке.

Пройдите на официальный сайт разработчика. Далее промотайте страницу вниз до «Pricing & Plans» (Цены и Тарифы):

HelloBar выбор тарифного плана

Здесь кроется самый главный с точки зрения нас с вами, уважаемый читатель, минус: скрипт HelloBar платный. Можно купить от 100 до 7500 кликов по цене от 4,95 до 49,95 долларов в месяц + к этому прилагается дополнительный функционал: "RSS & Twitter Feeds" — фиды RSS и твиттер; "Save Your Themes" — возможность сохранять цветовые палитры для повторного использования; "Unbranded" — возможность убрать ссылку на сайт разработчика в виде буквы «Н» в левом углу панели; "SLL Support" — возможность размещать панель на защищенных страницах.

Бесплатный вариант предполагает 25 кликов, возможность тестировать несколько вариантов сообщений и цветовых схем, 4 стандартные цветовые схемы и статистику — для того, чтобы оценить скрипт этого будет достаточно. Попробуйте! Если вдруг понравится и если будут средства и если вы сочтете необходимым, то купите скрипт.

Итак, жмем «Choose plan» под «25 Free» (указано стрелкой на картинке выше) и вводим свой e-mail:

HelloBar вводим E-Mail

На E-Mail будет выслан пароль, а также ссылка для входа в админку и логин (он же ваш E-Mail):

письмо от HelloBar

Пройдите по ссылке https://www.hellobar.com/login и введите логин и пароль.

Создаем новую панель

Чтобы создать панель, необходимо кликнуть по ссылке «Create new»:

Создать новый HelloBar

Настройка скрипта HelloBar

Перейдем к настройкам, нажав на «Settings»:

Настройки HelloBar

1. Title (Название). Задайте название панели.

2. Positioning (Позиционирование):

     - Remains at the top of the page when scrolling? (Фиксировать ли панель наверху при прокрутке страницы?)

     - Pushes the page down when opening?

3. Show (Когда показывать?). Можно задать настройки таким образом, что панель будет появляться сразу же («Immediatly»), либо же через некоторое время (от 5 секунд до одной минуты).

4. Hide (Когда прятать?). Можно задать промежуток времени, через который панель будет скрываться автоматически (от 5 секунд до одной минуты). Возможен такой вариант, когда панель не сворачивается автоматически, а сворачивается посетителем, нажатием на стрелку на панели. В таком случае, в выпадающем списке выбирайте «Never».

5. Open link in (Открывать ссылку в). Если вы хотите, чтобы ссылка открывалась в новом окне, то выбирайте «A new window». Если в том же, то «Same window».

6. Show on Link Page (Показывать панель на ведомой странице). Постараюсь объяснить. Панель HelloBar будет отображаться на всех страницах вашего сайта, и в том числе на той, ссылка на которую располагается в панели. А опция «Show on Link Page» нужна как раз для того, чтобы панель не показывалась на той странице, на которую ведет ссылка. То есть человек уже находится на рекламируемой странице, и смысла показывать ссылку нет. Как-то так 🙂

7. Closeable (Сворачиваемость). Данная опция задает возможность посетителя скрыть панель.

8. Wiggle Effect — Пардоньте, для чего это нужно, я так и не въехал... 🙁 

9. Link display (Отображение ссылки). Ссылку можно отобразить кнопкой, тогда выбирается «Display as a button» (кнопка смотрится лучше). Или в виде гиперссылки, тогда выбирайте «Display as a hyperlink».

За изменением настроек можно следить с помощью предварительного просмотра «Preview», который доступен сразу же после настроек. Ниже идут следующие поля:

Message (Сообщение). Это небольшая рекламная строчка, рекомендованная длина которой должна находиться в пределах 85 символов.

Link Text (Текст ссылки). Анкор ссылки.

Link URL (Ссылка). Сама ссылка.

Пример:

HelloBar пример готовой панели

Вы наверняка заметили блок «Appearance». Этот блок настроек отвечает за внешнее оформление панели HelloBar. Во вкладке «Themes» можно задать шрифт («Font Style») и одну из 4-х стандартных цветовых схем («Default Themes»).

Вкладка «Custom» предоставляет пользователю более гибкие возможности по настройке внешнего вида панели. Так, пользователь может самостоятельно задать цвет фона панели с помощью «Bar Color», цвет текста сообщения с помощью «Text Color», цвет ссылки с помощью «Link Color», текстуру фона с помощью «Texture», наличие нижней границы панели с помощью «Border» и ее цвет через «Border Color»:

HelloBar настройка внешнего вида

После того как панель будет полностью готова, жмите «Save». Вам предложат скопировать код, который затем нужно будет вставить в тег <body> (для этого откройте файл шаблона header.php):

Скопировать код панели HelloBar

Теперь обновите файл на сервере и пройдите на свой сайт/блог. Скрипт HelloBar должен работать.

Управление и Статистика

Чтобы изменить настройки, необходимо перейти во вкладку «Manage», а для того, чтобы посмотреть статистику — во вкладку «Stats»:

HelloBar - управление и статистика

Во вкладке «Manage» отображаются все созданные панели, которые можно включать/выключать, получить код, удалять:

Управление HelloBar

Опция A/B Testing позволяет сравнить эффективность нескольких вариантов сообщений и цветовых схем. Например, что эффективнее использовать: ссылку в виде кнопки или в виде гиперссылки. И все в этом духе. Весьма и весьма полезная опция.

Если нажать по названию панели (в нашем случае это «Новый HelloBar»), то вы попадете опять же в настройки (о чем говорилось выше).

Во вкладке «Stats», как уже было сказано, можно посмотреть статистику, а именно посмотреть количество показов («Visits»), количество кликов («Clicks») и CTR («Clockthrough Rate»):
Статистика HelloBar
Причем статистику можно посмотреть за любой день — для этого жмем по черной стрелке рядом с «1 day» и выбираем «others», а затем точную дату. «7 days» — статистика за последние 7 дней. «30 days» — статистика за последние 30 дней. «Date range» — статистика за определенный период времени, например, с 1 по 15 июля.

Процент использованных кликов можно также посмотреть в верхнем правом углу:

На этом все. Вроде бы написал обо всем. Если есть какие-нибудь вопросы, задавайте их в комментариях. Разберемся вместе.

Счастливо 🙂

write a comment

5 комментариев

  1. Евгений Комиссаров
    июля 16, 22:40 #1 Евгений Комиссаров

    ну не знаю, как по мне то такую штуку запросто на html и css3 сделать можно...

    Reply to this comment
  2. Константин
    июля 17, 00:06 #2 Константин

    Вопрос не в том, как это сделать, а в том нужно ли? 😀

    Всё это конечно красиво, но это лишние секунды загрузки страницы. А на блогах (если говорить о них) и без того столько навешано...

    Reply to this comment
  3. Марина
    декабря 09, 15:06 #3 Марина

    Здравствуйте! Настроила hellobar так, чтобы адреса подписчиков оставались на сервисе, но не могу найти, где они лежат

    Reply to this comment

Add a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.