Как сделать строку как у NOLIX и DAOS

Разместив у себя на сайте строчку от NOLIX, я не был удовлетворен приемлемой ценой за 1000 показов, поскольку почему-то на моем сайте никто не хотел покупать строчку дорого, а отдавать посетителей по 1-3 рубля не очень хотелось, поскольку только в Яндекс Директ я плачу за один переход минимум 4 рубля. К тому же я решил, что CTR многих объявлений не высок, прежде всего, из-за того, что многие делают их мало кликабельными это раз, а во вторых зачастую рекламируют то, что заведомо вряд ли бы было интересно аудитории данного сайта.

У меня появилась цель сделать что-то подобное у себя на сайте, используя рекламную строчку по максимуму, т.е. размещать только те объявления, которые бы были кликабельны. В итоге, передо мной встали две задачи:

реализовать все примерно в том же стиле, как и у Nolix и Daos
сделать систему подсчета кликов

В этой статье мы рассмотрим только первый вопрос, а второй подробно рассмотрен в статье: как подсчитать количество кликов по ссылке »

Постараюсь подробно объяснить как сделать нечто подобное, что Вы видите сейчас на моем сайте. Итак, Вам нужно сделать следующие:

1. Установить в шапке сайта (сразу после тега <body>) следующий код:

<body>
...
<div id="rekstr">
	<script type="text/javascript" language="JavaScript" src="rttr.js"></script> 
</div>
...
</body>

Примечание
Возможно Вам придется установить этот код не сразу после тега body, поскольку зачастую после этого него идет div, который задает ширину всей страницы. Например, у меня на сайте между моей рекламной строкой и тегом body стоит ещё один тег div. Лучше поэкспериментируйте или попросите помощи на форуме, если не разбираетесь в HTML.

2. Зайдите в свой файл стилей (обычно он называется style.css или main.css) и добавьте следующие строки:

#rekstr  {
    -moz-border-radius: 2px 2px 2px 2px; //задает закругление
    background: url("rekl4.gif") repeat-x scroll 0 0 transparent;
    border: 2px solid #FFF60C;
    font-family: Tahoma;
    height: 40px;
    overflow: hidden;
    width: 100%;
}

#rekstr a {
    color: black;
    display: block;
    font-size: 24px;
    font-weight: normal;
    text-decoration: none;
	margin-left:10px;
}

#rekstr a:hover  {
    color: black;
    display: block;
    font-weight: normal;
    text-decoration: underline;
}

#rekstr {
    line-height: 40px;
    text-align: left;
}

Если Вы плохо разбираетесь в CSS, то Вам следует ознакомится со статьей: тег style (там как раз введение в CSS) или прочитать в других местах об CSS. В принципе, если Вас устраивает и такая строчка как у меня на сайте, то можете скопировать этот код и использовать его. Изображение rekl4.gif (а также ещё три хороших фона) можно скачать здесь: rekl.rar или же заменить строку

background: url("rekl4.gif") repeat-x scroll 0 0 transparent;

на строку с определенным цветом, например, желтым фоном:

background: YELLOW;

Я подготовил другие заготовки картинок, чтобы Вы могли выбрать подходящий фон. Уверен, что Вы и без меня так же сможете найти и другие неплохие варианты, которые подойдут для вашего дизайна.

3. Теперь немного о файле rttr.js, который мы подключаем в первом пункте. Обратите внимание на то, в какую директорию Вы его разместите. Я советую хранить подобные файлы в директории js. Этот файл содержит ротатор Ваших рекламных строчек. У меня этот файл содержит следующее:

function setrate(id) {
            $.ajax({
                    type: "POST",
                    url: "/sts/click.php",
                    data: "id=" + id
                });
            }

var h=(Math.random()*10);
 if (h < 2)

document.write("<a href='' onclick='javascript:setrate(1)'>Первая строка</a>");

else if (h >= 2 && h < 4)

document.write("<a href='' onclick='javascript:setrate(2)'>Вторая строка</a>");

else if (h >= 4 && h < 6)

document.write("<a href='' onclick='javascript:setrate(3)'>Третья строка</a>");

else if (h >= 6 && h < 8)

document.write("<a href='' onclick='javascript:setrate(4)'>Четвертая строка</a>");

else 

document.write("<a href='' onclick='javascript:setrate(5)'>Пятая строка</a>");

Обратить внимание на функцию ЯваСкрипта - setrate, которая нужна для подсчета количества кликов по ссылке. Если у Вас нету такой цели, то можете убрать из каждой ссылки onclick="javascript:setrate(..)", а также описание функции setrate. На самом деле есть и другие более простые способы подсчета количества кликов по ссылке. Например, через Яндекс Метрику или же воспользоваться сократителем ссылок, который показывает статистику когда и сколько было кликов. Но мне было интересно самому изобрести свои наработки.

Строка var h=(Math.random()*10); и дальнейшие проверки обеспечивают ротатор, который показывает все пять строк в одинаковом количестве на большой выборке. Здесь можно легко отредактировать условия if, чтобы, например, одна строчка показывалась чаще другой. Вообще можно реализовать все это и через PHP. Однако я решил использовать JavaScript, т.к. потом есть удобный механизм отправки через AJAX информацию о клике по ссылке.

Советую прочитать следующую статью, которая целиком и полностью посвящена подсчету количества кликов »

← Перейти в каталог html уроков и советов