Представим, что мы делаем рекламную сеть или еще что-то подобное, где нужно отдать пользователям определенный JS код, вставив который в разные места страницы, там будут отображаться разные штуки. Баннеры, например. Наиболее часто встречаемые мной варианты были такие:
- Обычная html вставка кода баннера (флешки, картинки).
- Вставка iframe, где html код генерируется по отдельному запросу в ифрейме.
- Когда на js через document.write пишется код для двух вышеуказанных способов.
Общее у этих подходов то, что баннеры загружаются по мере загрузки страницы и, если что-то будет тормозить, затормозит вся страница. Во-вторых, обновить код, который напрямую показывает баннер при выводе не странице, в массовом порядке будет проблематично. Возможно, это и не критично.
Но, помимо улучшения этих двух пунктов, давайте добавим еще два условия к нашей задаче и посмотрим, как ее хорошо решили зарубежные коллеги на buysellads.com. Нужно, чтобы баннерная зона могла показать любой код, а также в запросе за баннером отправить какую-либо информацию с другого нашего сервиса (например, id пользователя в нашем сервисе, который ведет историю действий на сайте).
Итак, генерируем правильные коды для баннерных зон и пишем для них обработчик под хабракатом.
Я расскажу кратко и схематически, но с рабочим примером, а подробно можно будет глянуть код для вдохновения здесь и поправить его для чтения здесь.
Чтобы решить четыре вышеназванные задачи, нужно сделать единый скрипт загрузчик баннеров, который можно обновлять в любое время, который, до вывода на страницу баннеров, запросит с другого сервиса нужную информацию и сможет показать любой баннер на странице. Как мне показалось, buysellads немного согрешили, разделив код, который они отдают веб-мастерам, на две части. В шапке подключается единый скрипт загрузчик баннеров, а потом на странице расставляются места, где они будут показаны.
В нашем случае можно будет делать также или вызывать загрузчик рядом с каждым баннерным местом, показывая веб-мастеру единый код баннерной зоны. Пример вставки баннера на страницу:
<script type="text/javascript" src="http://digistr.net/static/digistrnet.js"></script>
<script type="text/javascript">
var bn = {width: 200, height: 600, param: "value"}
_digistrNET.showProducts(bn);
</script>
Такие коды можно добавлять сколько угодно раз на странице. Имеем какие-то свои параметры и функцию, которая рисует баннер. В моем случае она показывает товары определенные. Демо, которое я комментирую, можно смотреть тут. Все сделано максимально просто и быстро, чтобы работало. Рефакторинги и усложнения когда-нибудь в будущем, обновляться то легко можно будет :)
Итак, если я (загрузчик) еще не загружался на страницу, то пишем все функции, которые нам нужны. Здесь сразу вызывается функция showProducts, но баннер не рисуется. Пока нам нужно только запомнить, где его нужно будет показать при загрузке страницы. Для этого при вызове создаем в текущем месте пустой и невидимый div с определенным id, чтобы потом его можно было найти на странице. Кроме этого, для простоты ведем учет вызовов этой функции и сразу генерируем код баннера, который будет показан на этом месте. Это немного неприлично, поскольку еще нет данных с другого сервиса, но пока так. Вот кстати и здесь код баннера может быть любым. Можем еще скрипты какие-либо загрузить, либо флешку вставить сразу, либо просто текст на страницу вывести.
В buysellads такие div-ы сразу ставят на страницу, где в классе указывают код баннерного места, чтобы определить потом, какой баннер показывать. Код баннера там не генерируется, за ним идет запрос еще к JS файлу, который уже выводит баннер.
Далее видим, что в загрузчике, после всех функций в конце файла, идет запрос за необходимыми для баннеров данными. У меня это _loadTracker. В ответ нам придет скрипт, вызывающий нашу функцию обратного вызова, как пишут про JSONP, которая предоставит нашему загрузчику полученные данные для личного пользования.
Далее по коду на window.onload вызываем показ наших баннеров. Таким образом они будут показаны, когда на странице уже все загрузится. Здесь стоит добавить проверку на случай, если данные со стороннего сервиса еще не пришли, тогда нужно подождать и повторить попытку чуть позже по таймеру. Но, обычно, до загрузки страницы эти данные уже приходят. Страница то загружена. Хотя интересно, ждет ли onload загрузки данных, запрошенных в скриптах или просто быстро все загрузилось в данном примере. Кто подскажет?
Когда данные получены, пробегаемся по всему списку баннеров, который составляли при вызове showProducts и выводим соответствующий код вместо оставленных ранее div-ов, калдырно заменив недостающий ранее параметр trackid.
В случае с buysellads, там используют getElementsByClassName и getElementsByTagName для поиска расставленных на странице div-ов. Что-то не просто там все как посмотреть. Но в их случае нет ожидания, пока загрузчик сам загрузится. Вставляется таким кодом асинхронно:
<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://cdn.buysellads.com/ac/pro.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->
На страницу бросаются div-ы, без вызова JS из этого загрузчика.
<div id="bsap_23" class="bsaPROrocks" data-serve="CVAE"></div>
Это чуть круче, чем в рассмотренном нами примере. Но в моем случае проще работать с параметрами, они сразу на страницу пишутся и при их большом количестве будет удобнее, без дополнительных запросов за параметрами в базу данных. Как в вашем случае делать — выбирать вам, это общая схема.
Общий код загрузчика можно вынести в шапку (до вызова первого баннера) или вместе с каждым параметром его вызывать (из кэша будет все равно), составить свой сценарий передачи параметров баннера и его любые варианты отображения на странице. Все покажется после загрузки страницы.
Ну вот и все. Баннеры на странице. Метод показался самым правильным из пересмотренных по интернету. Что думаете, кроме того, что похоже многих злят баннеры? :)
Автор: ewgenij
