Web-разработка: Отслеживание исходящих ссылок с помощью Google Analytics
Google Analytics предоставляет широкие возможности по сбору и анализу статистики сайта, но, способ отслеживания исходящих ссылок, предлагаемый в справочном центре…
…мягко говоря, не очень удобен.
Поскольку сама возможность очень интересная, я решил все-таки использовать ее и при этом обойтись без прикрепления onclick к каждой внешней ссылке.
План Можно, конечно, пройти по всем ссылкам на странице с помощью JavaScript и прикрепить к каждой соответствующий обработчик onclick, но это некрасиво, не оптимально и не работает, если посетитель кликнет не на саму ссылку на вложенную в нее картинку. К этому случаю очень подходит техника делегации событий, достаточно будет одного обработчика onclick прикрепленного к элементу document.
Скрипт Для упрощения скрипта использовалась библиотека JQuery, но поклонники других фреймворков смогут без труда его адаптировать. //функция определяющая является ли ссылка внешней function isLinkExternal(link) { var r = new RegExp('^https?://(?:www.)?' + location.host.replace(/^www./, '')); return !r.test(link); } $(document).ready(function () { $(document).bind('click', function(e) { //получаем элемент с которым произошло событие var target = (window.event) ? e.srcElement : e.target; //клик мог быть и на вложенном в ссылку элементе //нужно подняться до самой ссылки while (target) { if (target.href) break; target = target.parentNode; } if (!target || !isLinkExternal(target.href)) return true; //отслеживаем ссылки в виде /outgoing/http/habrahabr.ru var link = target.href; link = '/outgoing/' + link.replace(/:\/\//, '/'); urchinTracker(link); }); //в качестве бонуса отслеживаем клики на ссылках RSS //хотя полной статистики по подписавшимся нам это не даст $('#feed-link').bind('click', function() { urchinTracker('/feed/'); }); $('#fullfeed-link').bind('click', function() { urchinTracker('/fullfeed/'); }); $('#commentsfeed-link').bind('click', function() { urchinTracker('/commentsfeed/'); }); });
Скрипт разработан совместными усилиями на форуме htmlbook.ru
Другие приемы использования Google Analytics, можно найти на сайте Design For Masters в статье Продвинутое использование Google Analytics
- Web-разработка: Практический JS: ускоряем обработку событий Примечание: ниже перевод статьи "Event delegation without a JavaScript library", посвященной обзору методов по назначению обработчиков событий в JavaScript и их возможной оптимизации, она дополнена моими комментариями и практической частью.Большинство статей и примеров, которые я видел в последнее время по переопределению событий, основывались на какой-либо распространенной библиотеке. Например, в своей хорошо известной статье Chris Heilmann применяет YUI-библиотеку, а в прошлом месяце Dan Webb
- Web-разработка: jQuery для JavaScript-программистов Примечание: ниже расположен перевод статьи "jQuery for JavaScript programmers", в которой автор высказывает свое мнение об этой библиотеке, ориентируясь, в первую очередь, на продвинутых программистов, и приводит несколько десятков примеров ее использования.Когда jQuery увидела свет в январе 2006, я подумал: «очередная красивая игрушка». Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей (подробнее о ней в моей заметке getElementsBySelector), но использование цепочек преобразов
- Крепкий орешек 4: в главной роли камера D-Link Когда-то "гаджеты" - видеофоны и Интернет-камеры - казались далеким, фантастическим будущим, и их можно было увидеть только в голливудских фильмах про Джеймса Бонда или сумасшедших ученых. В наши дни те самые высокотехнологичные устройства, которые раньше были лишь демонстрацией технологий будущего, создаваемых в основном при помощи спецэффектов, стали обыденными вещами - они доступны для покупки в обычных магазинах и стали неотъемлемой частью жизни современного человека. Сегодня технологии и о
- Web-разработка: Яндекс-like поиск своими руками. Редкий веб-программист не сталкивался с задачей написания поиска для своего сайта. независимо от того – делалось ли это для собственной CMS или для первого сайта, сделанного фирме двоюродного дяди топориком на коленке в 10 классе.Зачастую, задача поиска по сайту решается использованием простого SQL-запроса вида where `content` like ‘%семенович%’, при котором искомая фраза разбивается на слова и каждое ищется средствами SQL среди строк в БД. Несмотря на простоту этого решения, качество результат
- Уроки французского: Практический CSS/JS: уменьшаем загрузку страницы Примечание: ниже находится перевод двух близких статей ("Delay loading your print CSS" и "JS includes — the saga continues…") по оптимизации загрузки страницы при наличии нескольких файлов стилей или скриптов.У вас есть два вызова CSS-файлов на странице, например:где первый используется для отображения страницы на экране монитора, а второй — для предварительного просмотра и печати. Замечательно.Проблема в том, что когда дело касается производительности, то браузер не отображает любу