В этом руководстве показано использование Google Analytics для отслеживания использования вашего расширения. Если вы разрабатываете платформенное приложение, см. раздел «Аналитика для приложений», поскольку приложения имеют другие ограничения, чем расширения.
Требования
В этом руководстве предполагается, что у вас есть некоторые ознакомительные расширения для Google Chrome. Если вам нужна информация о том, как написать расширение, прочтите руководство «Начало работы» .
Вам также потребуется настроить учетную запись Google Analytics для отслеживания вашего расширения. Обратите внимание, что при настройке учетной записи вы можете использовать любое значение в поле URL-адреса веб-сайта, поскольку ваше расширение не будет иметь собственного URL-адреса.
Установка кода отслеживания
Стандартный фрагмент кода отслеживания Google Analytics извлекает файл с именем ga.js из URL-адреса, защищенного SSL, если текущая страница была загружена по протоколу https:// . Расширения и приложения Chrome могут использовать только версию ga.js , защищенную SSL . Загрузка ga.js через небезопасный HTTP запрещена Политикой безопасности контента Chrome по умолчанию. Это, а также тот факт, что расширения Chrome размещаются по схеме chrome-extension:// , требует небольшой модификации обычного фрагмента отслеживания, чтобы получать ga.js непосредственно из https://ssl.google-analytics.com/ga.js вместо местоположения по умолчанию.
Ниже приведен модифицированный фрагмент API асинхронного отслеживания (измененная строка выделена жирным шрифтом):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Вам также необходимо убедиться, что у вашего расширения есть доступ для загрузки ресурса, ослабив политику безопасности контента по умолчанию. Определение политики в вашем manifest.json может выглядеть так:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Вот всплывающая страница ( popup.html ), которая загружает асинхронный код отслеживания через внешний файл JavaScript ( popup.js ) и отслеживает просмотр одной страницы:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Имейте в виду, что строку UA-XXXXXXXX-X следует заменить на номер вашей учетной записи Google Analytics.
Отслеживание просмотров страниц
_gaq.push(['_trackPageview']); код будет отслеживать просмотр одной страницы. Этот код можно использовать на любой странице вашего расширения. При размещении на фоновой странице просмотр будет регистрироваться один раз за сеанс браузера. При размещении во всплывающем окне он регистрирует просмотр один раз при каждом открытии всплывающего окна.
Просматривая данные о просмотрах каждой страницы вашего расширения, вы можете получить представление о том, сколько раз ваши пользователи взаимодействуют с вашим расширением за сеанс браузера:
Мониторинг запросов аналитики
Чтобы убедиться, что данные отслеживания вашего расширения отправляются в Google Analytics, вы можете проверить страницы вашего расширения в окне «Инструменты разработчика» (дополнительную информацию см. в руководстве по отладке ). Как показано на следующем рисунке, вы должны увидеть запросы на файл с именем __utm.gif , если все настроено правильно.
Отслеживание событий
Настроив отслеживание событий, вы можете определить, с какими частями вашего расширения ваши пользователи взаимодействуют больше всего. Например, если у вас есть три кнопки, пользователи могут нажать:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Напишите функцию, которая отправляет события кликов в Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
И используйте его как обработчик событий для каждого нажатия кнопки:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
Страница обзора отслеживания событий Google Analytics предоставит вам показатели того, сколько раз была нажата каждая отдельная кнопка:
Используя этот подход, вы можете увидеть, какие части вашего расширения используются недостаточно или чрезмерно. Эта информация может помочь принять решения о редизайне пользовательского интерфейса или реализации дополнительных функций.
Дополнительную информацию об использовании отслеживания событий см. в документации для разработчиков Google Analytics.
Образец кода
Пример расширения, использующего эти методы, доступен в репозитории примеров .