Квартиры, дома, земельные участки Краснодарского края без посредников. Объявления собственников недвижимости.
Реклама здесь
Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Загрузка счетчиков после загрузки документа

Давайте рассмотрим что собой представляет код JavaScript-счетчика. Обычно он "вытаскивает" из клиентского окружения набор параметров: URL текущей страницы; URL страницы, с который перешли на текущую, браузер, версию ОС и т.д. Затем они передаются на сервер статистики. Все дополнительные возможности счетчиков связаны с обеспечением максимальной точности передаваемой информации (кроссбраузерность, фактически). Как собранные на клиенте данные попадают на сервер статистики? Все очень просто: в документе создается уникальный элемент, в URL которого прописываются все необходимые значения в качестве GET-параметров. URL этот ведет, как можно догадаться, на сервер статистики, где данные кладутся в базу и потом показываются в суммированном виде. Как же создается этот самый "уникальный" элемент? Так сложилось, что наиболее простым транспортным средством для данных стала картинка. Обычный однопиксельный GIF-файл отдается сервером в ответ на URL с параметрами от клиента.

Нам нужно гарантировать загрузку внешнего JavaScript-файла "ненавязчивым" образом, при этом обеспечить запрос на сервер статистики. В случае Google Analytics все будет очень тривиально, ибо картинка уже создается через new Image(1,1). Однако большинство счетчиков (Рунета и не только) оперируют document.write, и если такая конструкция отработает после создания основного документа, то браузер просто создаст новый, в который запишет требуемый результат. Для пользователя это выльется в совершенно пустую страницу в браузере. Основная сложность в переносе скриптов статистики в стадию пост-загрузки по событию window.onload заключается как раз в изменении вызова картинки, обеспечивающей сбор статистики, на DOM-методы (это может быть не только new Image, но и appendChild). В качестве примера рассмотрим преобразование скрипта статистики для LiveInternet:

t.write("<img src='http://counter.yadro.ru/hit;tutu_elec?r"+
 
escape(document.referrer) +
 ((
typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*" +
 (
screen.colorDepth?screen.colorDepth:screen.pixelDepth)) +
 
";u"+escape(document.URL)+";"+Math.random()+
 
"' width=1 height=1 alt=''>")
Скопировать в буфер

Как мы видим, его нельзя просто так перенести в область динамической загрузки. Для этого данный код нужно преобразовать примерно следующим образом:

new Image(1,1).src='http://counter.yadro.ru/hit;tutu_elec?r" +
escape(document.referrer)+((typeof(screen)=="undefined")?"":";s" +
screen.width+"*"+screen.height+"*" +
(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) +
";u"+escape(document.URL)+";"+Math.random()
Скопировать в буфер

Таким образом (все приведенные участки кода - это одна строка, разбитая для удобства чтения), мы просто заменили вызов document.write на new Image(). Это поможет в большинстве случаев.

© Copyright 2008-2012 by KDG