Постачання сторінок вашого сайту тегами з кодом відстеження 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-адреси в ваші звіти в надії, що ви клацніть на ньому і побачите їх рекламу). Для запобігання другої ситуації можна використовувати фільтр.

Хоча цей розділ 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

_gaq gaq

var _gaq * gaq || [];

Цей рядок створює масив JavaScript. Якщо об’єкт _gaq вже визначено, сценарій буде продовжувати використовувати цю змінну. Якщо немає – він створює новий масив:

1
2

_gaqpush ‘setAccount’ ‘UA-XXXXX-X’
_gaqpush’trackPageview ‘

_gaq.push () [ ‘setAccount’, ‘UA-XXXXX-X’];
_gaq.push () [ ‘trackPageview’];

Під час завантаження головного файлу ga.js в масив виштовхуються (ставляться в чергу) дві команди. Перша з них встановлює ідентифікатор облікового запису, в якому будуть зберігатися ваші дані. Друга перехоплює URL-адресу призначеної для завантаження сторінки. Після закінчення завантаження ga.js він замінює масив об’єктом _gaq і виконує всі команди, поміщені в чергу. Наступні звернення до _gaq.push дозволяються цією функцією, яка виконує команди в міру їх виштовхування.

1

function

(Function () {….} ();

Це веде до вставки в документ нового елемента сценарію, призначеного для завантаження файлу так. js (в якому відбувається все відстеження та комунікація з Google Цей код викликається негайно при завантаженні сторінки. Для виключення будь-яких конфліктів простору імен, він поміщений всередину анонімної функції.

Перехід з urchin.js на ga.js

До грудня 2007 р файл, на який посилається GATC, називався urchin, js і містив код, що відрізняється від коду ga.js. Якщо ви все ще користуєтеся файлом urchin.js, слід перейти на новішу версію коду ga.js. Щоб отримати новий код відстеження, вам буде потрібно адміністративний доступ до аккаунту Google Analytics. Виконайте такі дії.

  1. Увійдіть до свого облікового запису Google Analytics.
  2. Для кожного профілю клікніть на значку Settings (Настройки).
  3. Натисніть на вкладці меню Tracking Code (Код відстеження).
  4. Дотримуйтесь інструкцій на екрані по додаванню нового коду відстеження (ga.js).
Ссылка на основную публикацию