Главная » 2015 » Ноябрь » 26 » Как сделать строку как у NOLIX и DAOS
00:26
Как сделать строку как у NOLIX и DAOS

Как сделать строку как у 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 информацию о клике по ссылке.

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

Категория: Все о сайтах | Просмотров: 346 |
Всего комментариев: 0
avatar