Описание ротатора баннеров для сайта

Сервис по формированию блоков объявлений для описываемого здесь ротатора баннеров.

Последние годы поисковики при ранжировании сайтов придают всё большее значение скорости загрузки страниц. По этой причине среди веб-разработчиков существенно возрос интерес к генераторам статических сайтов. Ротатор баннеров с предварительным кэшированием баннерных блоков для высокой скорости и малой нагрузки на сервер использует ту же технологию, что и генераторы статических сайтов, - подгружает готовые блоки объявлений из заранее сформированных файлов (каждый блок из своего отдельного файла) в зависимости от определённых событий, например от текущего времени. Таким образом ротатор состоит из двух частей - набора файлов, содержащих блоки объявлений, и программного кода на странице для подгрузки информации с этих файлов.

Блоки формируются из объявлений с учётом заданной вероятности показа для каждого объявления. Если объявлений в блоке несколько, Соблюдается "справедливость" показа объявлений на определённых позициях в блоке, т.е. в разных файлах одни и те же объявления находятся на разных позициях. Эти задачи данный сервис при формировании файлов выполняет автоматически. Нужно лишь загрузить список объявлений с указанной для каждого объявления вероятностью появления на странице. В результате программа выдаёт итоговые файлы, помещённые в архив. По умолчанию файлы блоков объявлений имеют расширение .html, которое при необходимости можно поменять в поле "Задать расширение файлов блоков объявлений".

Объявления представляют собой любой текст в кодировке utf-8. Это может быть html-код, ссылки на картинки, сами картинки, встроенные в текст при помощи Base64-кодирования, скрипты, и т.д.

Технические характеристики текущей версии генератора блоков объявлений

Количество файлов с блоками объявлений - 100

Вероятность появления объявления на странице можно указывать от 1% до 100% с шагом 1%

Максимальное количество объявлений в блоке - 100

Формат файла - списка объявлений

Список объявлений, из которых формируются блоки, следует поместить в текстовый файл. Каждое объявление записывается один раз с указанием вероятности его появления на странице. Также в этот файл со списком объявлений можно добавить две записи - заголовок блока, который выводится в начале каждого блока и подвал, выводящийся в конце блока. В заголовке можно, например, задать стили объявлений, открыть тег <div>, обрамляющий весь блок объявлений. В подвале можно, например, закрыть тег </div>, если он открыт в заголовке.

{header}
  Заголовок всего блока объявлений
{/header}

{ad}
  {content}
    Содержимое объявления
  {/content}
  {chance}
    Шанс (вероятность) показа объявления
  {/chance}
{/ad}
   ...
{footer}
  Подвал всего блока объявлений
{/footer}

Разметка списка объявлений производится с помощью тегов, подобно html-разметке. Но вместо угловых скобок используются фигурные, чтобы они не мешали применению в тексте объявлений обычных html-тегов.

Каждое объявление помещается между тегами {ad}{/ad}. Содержимое объявления помещается между тегами {content}{/content}, а вероятность (шанс) показа этого объявления записывается между тегами{chance}{/chance} - просто натуральное число, без знака процента %.

Вне тегов можно помещать любой текст - будет считаться комментариями.

Пример файла - списка объявлений

{header}
<style>
  .ad_block {
    padding: 0 .4rem;
    border: 1px solid #ccc;
    border-radius: .22rem;
  }
  .ad {
    padding: .4rem 0;
  }
  .ad p {
    line-height: 1.2;
    font-family: Arial, sans-serif;
  }
</style>
<div class="ad_block">
{/header}

{ad}
  {content}
    <div class="ad">
      <p>Первое объявление</p>
    </div>
  {/content}
  {chance}
    70
  {/chance}
{/ad}

{ad}
  {content}
    <div class="ad">
      <p>Второе объявление</p>
    </div>
  {/content}
  {chance}
    50
  {/chance}
{/ad}

{ad}
  {content}
    <div class="ad">
      <p>Третье объявление</p>
    </div>
  {/content}
  {chance}
    30
  {/chance}
{/ad}

{footer}
</div>
{/footer}

Примеры сформированных файлов

<style>
  .ad_block {
    padding: 0 .4rem;
    border: 1px solid #ccc;
    border-radius: .22rem;
  }
  .ad {
    padding: .4rem 0;
  }
  .ad p {
    line-height: 1.2;
    font-family: Arial, sans-serif;
  }
</style>
<div class="ad_block">

    <div class="ad">
      <p>Первое объявление</p>
    </div>

    <div class="ad">
      <p>Третье объявление</p>
    </div>

</div>

Файл 0.html

<style>
  .ad_block {
    padding: 0 .4rem;
    border: 1px solid #ccc;
    border-radius: .22rem;
  }
  .ad {
    padding: .4rem 0;
  }
  .ad p {
    line-height: 1.2;
    font-family: Arial, sans-serif;
  }
</style>
<div class="ad_block">

    <div class="ad">
      <p>Второе объявление</p>
    </div>

    <div class="ad">
      <p>Первое объявление</p>
    </div>

</div>

Файл 1.html

Пример js-кода на странице для одноразовой подгрузки блока объявлений при загрузке страницы

<script>
  var adsFilesPath = "ad_file_path/";
  var elementId = "ad_block";
  var fileId = (new Date().getTime()) % 100;
	var adAddr = adsFilesPath + fileId + ".html";
	function showAsyncRequest(){
		var req = new XMLHttpRequest();
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if (req.status == 200) {
					document.getElementById(elementId).innerHTML = req.responseText;
				}
			}
		}
		req.open("POST", adAddr, true);
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		req.send(null);
	}
	window.onload = showAsyncRequest();
</script>

Этот скрипт следует поместить в самый конец html-страницы перед закрывающим тегом </body>

Вместо ad_file_path/ в коде скрипта следует вписать путь к директории, в которой находятся файлы блоков объявлений 0.html, 1.html ... 99.html. Директория с файлами блоков объявлений может быть на том же сервере, что и сам сайт, на котором будут показываться объявления. При желании путь может вести и на другой домен при использовании веб-протокола, но в этом случае на том стороннем веб-сервере должно быть настроено разрешение на отдачу информации по ajax-технологии.

В то место, где должен располагаться блок объявлений, следует поместить пустой блок <div id="ad_block"></div>. Имя идентификатора "ad_block" можно заменить на другое, но при этом следует на такое же заменить и значение переменной elementId в скрипте.

Пример js-кода на странице для периодической подгрузки блоков объявлений на страницу

<script>
	var period = 15000;
	var totalFiles = 100;
	var fileId = 0;
	var adsFilesPath = "ad_file_path/";
	var adAddr = "";
	var elementId = "ad_block";
	var req = new XMLHttpRequest();

	function showAsyncRequest(){
		adAddr = adsFilesPath + fileId + ".html";
		req.onreadystatechange = function () {
			if (req.readyState == 4) {
				if (req.status == 200) {
					document.getElementById(elementId).innerHTML = req.responseText;
				}
			}
		}
		req.open("POST", adAddr, true);
		req.send(null);
		if(fileId < (totalFiles - 1)){
			fileId++;
		} else {
			fileId = 0;
		}
	}
	window.onload = function() {
		showAsyncRequest();
		setInterval("showAsyncRequest()", period);
	}
</script>

Этот скрипт следует поместить в самый конец html-страницы перед закрывающим тегом </body>

В переменную period следует поместить период смены набора объявлений, выраженный в миллисекундах. В данном примере period = 15000 мс, т.е. 15 секунд.