Для начала следует подключить свой сайт к Google Analytics и Google Webmaster. Как это сделать, объяснять, я думаю не стоит. По ссылкам интуитивно это можно сделать. Дальше идет гайд о том, как сосчитать конверсию сайта с помощью Google Analytics.
Если подробнее, то в гайде рассказывается, как отправить события с помощью analytics.js
Analytics.js является частью Universal Analytics. Если вы используете Classic Analytics (ga.js), посетите центр обновления, чтобы узнать, как перейти на analytics.js.
Как посчитать конверсию сайта
План статьи
Отслеживание событий открывает множество аналитических возможностей для владельцев сайтов. К примеру, вы можете узнать, сколько раз нажималась кнопка или сколько раз использовался определенный объект в приложении.
Событие состоит из 4 значений, которые могут описать любое взаимодействие пользователя с сайтом:
Значение | Тип | Обязательно | Описание |
Категория(category) | String | Да | Объект взаимодействия (например, button). |
Действие(action) | String | Да | Тип взаимодействия (к примеру, click). |
Ярлык(label) | String | Нет | Используется для категоризации событий (например, nav buttons). |
Значение(value) | Номер | Нет | Считает количество (например, 4 раза). |
Реализация подсчета конверсии сайта
Для того чтобы отправить событие, необходимо передать функции ga команду send с типом event.
ga('send', 'event', 'button', 'click', 'nav buttons', 4);
Где:
- button – это категория (category).
- Click – это действие (action).
- nav buttons – это ярлык (label).
- 4 – это значение value
Вы можете передавать события проще, используя примеры ниже, в которых были удалены дополнительные параметры, которые могут не пригодиться в процессе подсчета конверсий сайта.
ga('send', 'event', 'category', 'action'); ga('send', 'event', 'category', 'action', 'label'); ga('send', 'event', 'category', 'action', 'label', value); // value – это число.
Команда send также может принимать дополнительные параметры объекта поля для любой из команд. Объект поля – это стандартный объект JavaScript. Можно использовать конкретные имена полей и их значения, принятые analytics.js.
К примеру, вы можете установить поле для конкретного события. Пример:
ga('send', 'event', 'category', 'action', {'page': '/my-new-page'});
Возможно, перед вами будет стоять задача снимать все параметры, кроме показателя отказов. В этом случае следует использовать поле без взаимодействия. Пример:
ga('send', 'event', 'category', 'action', {'nonInteraction': 1});
Все настройки команды send имеют определенные имена. Таким образом, вы можете отправить событие в Google Analytics, передав только объект поля команде send:
ga('send', { 'hitType': 'event', // Обязательно. 'eventCategory': 'button', // Обязательно. 'eventAction': 'click', // Обязательно. ' eventLabel': 'nav buttons', 'eventValue': 4 });
Зайдите на страницу Справка о полях Analytics, вы узнаете полный список названий полей, которые могут использоваться при настройке отправки данных в Google Analytics при подсчете конверсий сайта.
Примечание: При использовании следующего синтаксиса помните, что параметры этого события аналогично могут быть переданы непосредственно функциям ga.
Примеры подсчета конверсии сайта
В основном веб-мастера необходима информация о событии, которое может произойти в любой точке браузера. Для того чтобы реализовать отправку определенного события, необходимо установить так называемый «прослушиватель», внутри которого вызывается команда event.
Предположим, что у вас есть ссылка, по которой начинает загружаться PDF-файл:
<button id="button">Скачать</button>
Кроссбраузерное отслеживание событий:
Для того чтобы производить подсчет конверсий сайта с помощью чистого JavaScript, необходимо подключить такой код к странице, которую хотите прослушивать.
var downloadLink = document.getElementById('button'); addListener(downloadLink, 'click', function() { ga('send', 'event', 'button', 'click', 'nav-buttons'); }); /** * Может использоваться во всех W3C-совместимых браузерах и Internet Explorer при добавлении обработчика * @param {Object} элемент Object, к которому можно закрепить «прослушиватель» событий. * @param {string} тип A string представляет тип события, который будет «прослушиваться» * (например, load, click, и так далее). * @param {function()} callback – функция, которая получает сообщение. */ function addListener(element, type, callback) { if (element.addEventListener) element.addEventListener(type, callback); else if (element.attachEvent) element.attachEvent('on' + type, callback); }
В этом примере, функция addEventListener добавляет прослушивателя кроссбраузерно. Добавление "прослушивателя" происходит по клику на кнопку. При нажатии данные отправляются в Google Analytics.
Используйте jQuery
jQuery – это библиотека языка JavaScript, завоевавшая огромную популярность по всему миру. Эта библиотека исправляет несоответствие браузеров и более удобна при отборе необходимых объектов. Если вы подключили библиотеку jQuery к сайту или к странице, на которой нужно отслеживать события, можно использовать следующую форму для отправки данных в Google Analytics:
// Используется библиотека jQuery Event API v1.3 $('#button').on('click', function() { ga('send', 'event', 'button', 'click', 'nav-buttons' );});
Что делать после?
Вы должны были совершить следующие действия:
- Добавление сайта в Google Webmaster и Google Analytics, их связывание между собой (через Analytics).
- Добавление на сайт кода прослушивателя, который будет передавать информацию Analytics.
Теперь перейдите в Google Analytics –> Администратор-> Цели. Нажмите “Цель”. Во втором действии выберите Событие, а дальше все по настройкам на сайте.
Спасибо за внимание, использовалась личная информация + перевод до сих пор нерусифицированного Google.