Ускорение Google Analytics

Статья от 09.08.09 в категории Google, jQuery, Сервисы
Теги: analytics, Google, оптимизация

3185410319_419a368b35_t Что-то давно ничего не писал. Но на то есть свои причины – очень увлекся темой дорвеев, да и работы поднакопилось предостаточно. Итак, начнем.
Как вам наверно известно, Google Analytics – один из наиболее мощных сервисов для сбора статистики веб-сайта. Но у неё есть один огромный минус. Зачастую скрипт аналитики долго грузится и если размещать его в начале страницы (сразу после body) для более точных результатов, он не даёт грузиться элементам страницы, пока не загрузится сам. Это связано с тем, как устроен этот сервис.
Google Analytics загружает и выполняет некий Javascript-код ga.js, потом выполняет его, что и является сигналом того, что на сайт забрел очередной сервер. Так вот, загружая этот скрипт, он блокирует загрузку всего остального.
Сам Google Analytics Tracking Code выглядит так:

<!-- Google Analytics -->
<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-0000000-0");
  pageTracker._trackPageview();
  } catch(err) {}
</script>
<!-- Google Analytics -->

Для борьбы с этим изъяном и придумали небольшой jQuery-плагин под странным названием Geekga.

‘jquery.geekga.js’ jQuery-плагин

Файл jquery.geekga.js:

/*
 * jquery.geekga.js - jQuery plugin for Google Analytics
 *
 * This plugin extends jQuery with two new functions:
 *
 *   - $().geekGaTrackPage(account_id)
 *       Track a pageview.
 *
 *   - $().geekGaTrackEvent(category, action, label, value)
 *       Track an event with a category, action, label and value.
 *
 *
 * This code is in the public domain.
 *
 * Willem van Zyl
 * willem@geekology.co.za
 * http://www.geekology.co.za/blog/
 */
 
(function($) {
 
  var pageTracker;
 
  /**
   * Track a pageview, e.g.:
   *
   *   $().geekGaTrackPage('UA-0000000-0');
   */
  $.fn.geekGaTrackPage = function(account_id) {
 
    //check whether to use an unsecured or a ssl connection:
    var host = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    var src = host + 'google-analytics.com/ga.js';
 
    //load the Google Analytics javascript file:
    $.getScript(src, function() {
      if (typeof _gat != undefined) {
        //the ga.js file was loaded successfully, set the account id:
        pageTracker = _gat._getTracker(account_id);
 
        //track the pageview:
        pageTracker._trackPageview();
      }
      else {
        //the ga.js file wasn't loaded successfully:
        throw "Unable to load ga.js; _gat has not been defined.";
      }
    });
 
  };
 
  /**
   * Track an event, e.g.:
   *
   *   $('a.twitter').click(function() {
   *     $().geekGaTrackEvent('feed', 'click', 'Twitter', 'willemvzyl');
   *   });
   */
  $.fn.geekGaTrackEvent = function(category, action, label, value) {
 
    if (typeof pageTracker != undefined) {
      //the pageTracker was defined, track the event:
      pageTracker._trackEvent(category, action, label, value);
    } else {
      //the pageTracker wasn't defined:
      throw "Unable to track event; pageTracker has not been defined";
    }
 
  };
 
})(jQuery);

Использование плагина

Для начала подключим необходимые js-файлы: jQuery и сам плагин.

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Затем укажем плагину ваш ID в аналитике Google’а:

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $().geekGaTrackPage('UA-0000000-0');
    });
  </script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Где UA-0000000-0 – ваш ID.
Вот и всё. Мне в одном из проектов помогло, поможет и вам.
Cкачать плагин

889734416_06f014a237

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

LastDay
09/08/09 в 19:31

Последняя картинка с #world шедевр =P
Solo
10/08/09 в 11:00

Да, мне тоже очень нравится)
krundetz
11/08/09 в 15:25

А не в курсе зачем так его зделали? Тоесть зачем понадобилась эта задержка с загрузкой всего остального сайта?
Solo
11/08/09 в 16:29

Возможно, чтобы не создавать помех в работе скрипта.
lesha111
19/08/09 в 1:58

а почему бы его не помещать так, как рекомендует сам google “непосредственно перед тегом закрывающем body”

или все так боятся, что пользователи модемов/gprs будут останавливать эскейпом их 10 метровую страницу с громоздкой flash анимацией с HD-роликом?
Solo
19/08/09 в 10:49

а почему бы его не помещать так, как рекомендует сам google “непосредственно перед тегом закрывающем body”

или все так боятся, что пользователи модемов/gprs будут останавливать эскейпом их 10 метровую страницу с громоздкой flash анимацией с HD-роликом?

Как показала практика, гугл недосчитывает посетителей, когда код стоит в самом конце. Мало ли какая фигня зависнет на странице)
d1mmmk
19/08/09 в 15:20

хм, практического применения мало вижу. если что-то зависнет при загрузке страницы, $(document).ready не сработает. то же будет если пользователь перейдет на другую страницу не дождавшись полной загрузки. поможет только в случае если на сайте не стоят счетчики рейтингов и т.п.(они, как правило, все и тормозят).

p.s. гугл не досчитывает посетителей из-за популярных плагинов FF noscript и adblockplus, они считают гугл потенциально опасным кодом и не дают выполняться
Solo
19/08/09 в 15:38

$(document).ready работает до того как загрузятся все элементы страниц, в отличии от onload=”".
d1mmmk
19/08/09 в 16:28

я всегда думал что ready срабатывает при загрузке содержимого body… или это не так?
paxan
20/08/09 в 8:48

насколько я знаю в jQuery ready срабатывает когда загрузился исходный код страницы, но всякие картинки, flash и тому подобное
Solo
20/08/09 в 13:40

Да, всё верно, ready срабатывает при загрузке кода страницы, в отличии от onload.
HOG_Seruj
02/09/09 в 12:27

Подскажите, а сам файл плагина куда загружать, в главную дирикторию ?
Solo
02/09/09 в 17:17
в примере используется директория javascript.
Куда ложить плагин не имеет значения, главно правильно указать путь до него тут:
```
<script src="javascript/jquery.geekga.min.js" type="text/javascript">
</script>
```

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery