Снабжение страниц вашего сайта тегами с кодом отслеживания Google Analytics
Наиболее важная часть процесс подписки — заключительный экран установки, определяющий уникальныи тег, который должен помещаться на все ваши страницы. Этот тег называют кодом отслеживания Google Analytics (Google Analytics Tracking Code — GATC). Именно использование этого единственного тега — одного и того же для всех страниц — для сбора данных о посетителях делает установку Google Analytics настолько простой.
Пояснение кода отслеживания Google Analytics
GATC — это фрагмент кода JavaScript, вставляемый в страницы. Этот код скрыт и действует в качестве маяка для сбора информации о посетителях и пересылки ее серверам сбора данных Google Analytics. Пример приведен на рис. 6.3. Если ваш аккаунт Google Analytics уже установлен, доступ к настройкам, показанным на рис. 6.3, можно получить из области Profile Settings (Настройки профиля).
Здесь мы рассмотрим код GATC несколько подробнее. В основном, он состоит из трех частей.
- (А) Ваш уникальный идентификатор аккаунта в форме UA-XXXX-XX. Этот идентификатор уникален для каждого аккаунта Google Analytics и должен применяться именно так, как приведен, или же данные будут отправлены другому аккаунту. Это может происходить случайно (в результате опечатки при реализации) или намеренно (в результате вставки кем-либо его URL-адреса в ваши отчеты в надежде, что вы кликнете на нем и увидите их рекламу). Для предотвращения второй ситуации можно использовать фильтр.
- (В) Вызов JayaScript-процедуры _trackPageview. Это — «рабочая лошадка» Google Analytics. По существу, строка trackPageview собирает URL-адреса просмотров страниц, которые посетители сайта корпоративное такси загружают в свои браузеры, включая такие связанные с ними параметры, как тип браузера, настройка языка, источник перехода и временная метка. Затем вьполняется считывание и установка файлов cookie, и эта информация возвращается серверам сбора данных Google.
- (С) Вызов главного JayaScript-файла с серверов Google. Главный файл, ga.js, содержит код, необходимый для проведения сбора данных. Этот файл имеет размер около 18 Кбайт и, будучи однажды вызванным, он кешируется браузером посетителя и доступен для всех последующих просмотров страниц. Этот же файл используется для всех аккаунтов Google Analytics. Поэтому, если ваш посетитель недавно посетил другой веб-сайт, в котором Google Analytics также установлена (что весьма вероятно), файл ga.js может вообще не запрашиваться, поскольку он уже присутствует в кеше посетителя.
Хотя этот раздел GATC кажется громоздким, он просто определяет, нужно ли загружать файл ga.js посредством стандартного HTTP-протокола веб-запроса или посредством HTTPS-протокола (с шифрованием). Автоматическое определение означает, что ничего не нужно менять на тот случай, если посетителям требуется посещать защищенные области веб-сайта, например, для ввода сведений кредитной карточки. Из кода JavaScript, приведенного на рис. 6.3, видно, что GATC представляет собой асинхронный код. Это значит, что он загружается параллельно со страницей. При использовании этого метода скорость загрузки файла ga.js повышается, а любая задержка уменьшается.
Рис. 6.3. Типичный GATC, добавляемый к страницам
Хотя GATC можно загружать, используя также стандартное (традиционное) соглашение JavaScript, т.е. последовательно со страницей, асинхронный метод повышает точность отслеживания. Это обусловлено тем, что GATC можно безопасно помещать в раздел <head> HTML-разметки, не оказывая влияния на загрузку остальных частей страницы. Например, в случае задержки при обмене данными с серверами Google асинхронный код просто дожидается готовности. Если же используется стандартный (несинхронный) GATC, любая задержка, вызванная серверами Google, приводит к задержке загрузки остальной части страницы. Эту проблему можно обойти, размещая стандартный код GATC в нижней части страницы, но это порождает другую проблему — те пользователи, которые быстро переходят на другую страницу, не будут отслеживаться, если GATC не успеет загрузиться.
Использование асинхронного GATC полностью устраняет эти проблемы. Использование асинхронного синтаксиса возможно благодаря объекту _gaq. Он действует в качестве очереди, представляющей собой структуру данных типа «первый вошел — первый вышел», которая собирает обращения API до тех пор, пока ga.js не будет готов их выполнить. Для добавления чего-либо в очередь используется метод _gaq.push.
На рис. 6.3 видно, что в зависимости от конкретных требований можно применять альтернативы коду GATC. В верхнем меню вкладок они представлены вкладками Standard (Стандартное), Advanced (Расширенное) и Custom (Настраиваемое). В основном, при наличии единственного доменного имени, которое нуждается в отслеживании (например, www.mysite.com), опция Standard GATC — то, что нужно. Остальные варианты предназначены для ситуаций, в которых посетители сайта могут выполнять переход между поддоменами (например, из www.mysite.com в helpdesk.mysite.com) или доменами сторонних организаций (например, из www.mysite.com в www. payment-gateway.com).
Структура GATC
Понимание нюансов кода JavaScript в GATC не требуется и не нужно, — достаточно знать как осуществлять обмен данными с ним. Однако для тех разработчиков, которых интересуют подобные вещи, я привожу подробное описание. Если для вас оно не представляет особого интереса, можете пропустить эту запись. Как показано на рис. 6.3, код имеет следующую структуру:
1 | var _gaq * gaq || [ ]; |
Эта строка создает массив JavaScript. Если объект _gaq уже определен, сценарий будет продолжать использовать эту переменную. Если нет — он создает новый массив:
1 2 | _gaq.push() ['setAccount', 'UA-XXXXX-X']; _gaq.push()['trackPageview']; |
Во время загрузки главного файла ga.js в массив выталкиваются (ставятся в очередь) две команды. Первая из них устанавливает идентификатор аккаунта, в котором будут храниться ваши данные. Вторая перехватывает URL-адрес предназначенной для загрузки страницы. По окончании загрузки ga.js он заменяет массив объектом _gaq и выполняет все команды, помещенные в очередь. Последующие обращения к _gaq.push разрешаются этой функцией, которая выполняет команды по мере их выталкивания.
1 | (function () { ....} (); |
Это ведет к вставке в документ нового элемента сценария, предназначенного для загрузки файла да. js (в котором происходит все отслеживание и коммуникация с Google Этот код вызывается немедленно при загрузке страницы. Для исключения любых конфликтов пространства имен, он помещен внутрь анонимной функции.
Переход с urchin.js на ga.js
До декабря 2007 г. файл, на который ссылается GATC, назывался urchin, js и содержал код, отличающийся от кода ga.js. Если вы все еще пользуетесь файлом urchin.js, следует перейти на более новую версию кода ga.js. Чтобы получить новый код отслеживания, вам потребуется административный доступ к аккаунту Google Analytics. Выполните перечисленные ниже действия.
- Войдите в свой аккаунт Google Analytics.
- Для каждого профиля кликните на значке Settings (Настройки).
- Кликните на вкладке меню Tracking Code (Код отслеживания).
- Следуйте экранным инструкциям по добавлению нового кода отслеживания (ga.js).