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

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

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

Нам нужно гарантировать загрузку внешнего JavaScript-файла "ненавязчивым" образом, при этом обеспечить запрос на сервер статистики. В случае Google Analytics все будет очень тривиально, ибо картинка уже создается через new Image(1,1).

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

document.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(). Это поможет в большинстве случаев.