1 400 Аналитика Гугл предоставляет так много информации, что иногда в ней довольно трудно разобраться. Для крупных сайтов это становиться настолько сложным, что у вас уже может не хватать времени на анализ всех страниц.
А возможно, на вашем сайте много авторов, которые не имеют доступа к вашему аккаунту Google Analytics (Аналитика Гугл), и вы хотите предоставить им данные, чтобы они могли видеть, как работают их страницы.
С мы можем легко отобразить базовую аналитику сайта прямо на странице. Google предлагает много для экспорта данных, но вы можете использовать библиотеки, разработанные комьюнити, такие, как PHP библиотека , созданная Стигом Маннингом (Stig Manning), которую мы будем использовать.
В конечном счёте мы получим отличный график с данными, которые дадут нам некоторое представление о том, как работает каждая страница:
Начало работы: получение данных
Загрузите и распакуйте её в каталог своего сайта. Откройте файл шаблона страницы, найдите то место, куда вы хотите поместить аналитику и добавьте туда следующий класс (который вы только что распаковали):
|
1 |
require('gapi.class.php'); |
Чтобы соединиться с Google Analytics мы должны предоставить логин и id профиля определённого аккаунта, с которым мы хотим соединиться. Здесь же мы можем определить URL страницы, которую мы будем анализировать.
|
1 2 3 4 |
$ga_email = 'youremail@gmail.com'; $ga_password = 'yourpassword'; $ga_profile_id = '12345678'; $ga_url = $_SERVER['REQUEST_URI']; |
Этот метод позволяет пользователям получать данные, не имея доступа к вашему аккаунту.
Чтобы узнать id профиля в Google Analytics, перейдите к странице настроек своего профиля (кнопка с изображением шестерёнки в правом верхнем углу), затем щёлкните на вкладке Profile Settings (Настройки профиля) и вы увидите id профиля.
Теперь давайте используем класс GAPI, чтобы сформировать запрос и получить пять показателей: просмотры страницы, уникальные просмотры страницы, показатель выходов (exit rate), среднее время просмотра и показатель отказов (bounce rate). Все эти показатели будут получены для той страницы, которую мы рассматриваем. В объясняется, как сформировать запрос, используя функцию requestReportData():
|
1 |
requestReportData($report_id, $dimensions, $metrics, $sort_metric=null, $filter=null, $start_date=null, $end_date=null, $start_index=1, $max_results=30) |
Вот наш запрос, в котором мы сохраняем все результаты в переменной $results:
|
1 2 3 |
$ga = new gapi($ga_email,$ga_password); $ga->requestReportData($ga_profile_id, 'pagePath', array('pageviews', 'uniquePageviews', 'exitRate', 'avgTimeOnPage', 'entranceBounceRate'), null, 'pagePath == '.$ga_url); $results = $ga->getResults(); |
Если не заданы начальная и конечная даты, по умолчанию GAPI возвратит нам результаты за последние 30 дней.
Отображение данных
Прежде чем отобразить результаты, давайте создадим функцию, которая будет конвертировать секунды в минуты. Это удобно для отображения среднего времени просмотра страницы, которое по умолчанию выводится в секундах.
|
1 2 3 4 5 6 7 8 |
function secondMinute($seconds) { $minResult = floor($seconds/60); if($minResult < 10){$minResult = 0 . $minResult;} $secResult = ($seconds/60 - $minResult)*60; if($secResult < 10){$secResult = 0 . round($secResult);} else { $secResult = round($secResult); } return $minResult.":".$secResult; } |
Теперь то, как вы хотите выводить и отображать результаты — лишь вопрос синтаксиса.
|
1 2 3 4 5 6 7 8 9 10 |
echo '<div id="page-analtyics">'; foreach($results as $result) { echo '<div><span>Pageviews</span><br /><strong>'.number_format($result->getPageviews()).'</strong></div>'; echo '<div><span>Unique pageviews</span><br /><strong>'.number_format($result->getUniquepageviews()).'</strong></div>'; echo '<div><span>Avg time on page</span><br /><strong>'.secondMinute($result->getAvgtimeonpage()).'</strong></div>'; echo '<div><span>Bounce rate</span><br /><strong>'.round($result->getEntrancebouncerate(), 2).'%</strong></div>'; echo '<div><span>Exit rate</span><br /><strong>'.round($result->getExitrate(), 2).'%</strong></div>'; echo '<div style="clear: left;"></div>'; } echo '</div>'; |
GAPI предоставляет удобные функции для получения показателей, например:
|
1 |
getPageviews() and getAvgtimeonpage() |
Теперь добавим некоторые CSS стили. Вы конечно можете составить собственные таблицы стилей и подстроить их под свой сайт.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<style type="text/css"> #page-analtyics { clear: left; } #page-analtyics .metric { background: #fefefe; /* Старые браузеры */ background: -moz-linear-gradient(top, #fefefe 0%, #f2f3f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f2f3f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* IE10+ */ background: linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f2f3f2',GradientType=0 ); /* IE6-9 */ border: 1px solid #ccc; float: left; font-size: 12px; margin: -4px 0 1em -1px; padding: 10px; width: 105px; } #page-analtyics .metric:hover { background: #fff; border-bottom-color: #b1b1b1; } #page-analtyics .metric .legend { background-color: #058DC7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 0; margin-right: 5px; padding: 10px 5px 0; } #page-analtyics .metric strong { font-size: 16px; font-weight: bold; } #page-analtyics .range { color: #686868; font-size: 11px; margin-bottom: 7px; width: 100%; } </style> |
Вот так должна выглядеть наша аналитика:
Добавление диаграммы
Большинство людей, использующих Google Analytics знакомы с большими синими диаграммами, показывающими просмотры страницы или посещения. Используя Google Charts API в сочетании с Google Analytics API мы можем добавить на свою страницу похожую диаграмму, которая будет отображать количество просмотров страницы за последние 30 дней. Здесь мы не будем описывать детали работы Charts API, но если вы хотите узнать больше, Google предоставляет превосходную .
Продолжая пример выше, мы можем снова использовать переменные $ga и $ga_url, чтобы создать новый запрос GAPI. Однако, вместо того, чтобы определить общее количество результатов за промежуток времени, нам нужно получить отдельные результаты за каждый день, так, чтобы мы могли показать эти данные в диаграмме. Хитрость здесь заключается в том, чтобы настроить запрос на использование как количества, так и фильтра ‘date’. Он возвратит количество просмотров страниц за каждый из 30 последних дней.
|
1 2 |
$ga->requestReportData($ga_profile_id, array('date'),array('pageviews'), 'date', 'pagePath == '.$ga_url); $results = $ga->getResults(); |
Затем, создайте в шаблоне страницы контейнер, куда будет добавлена диаграмма, изначально это будет пустой div, который впоследствии будет изменён Google Charts API.
|
1 |
<div id="chart"></div> |
Включите Google Charts API
|
1 |
<script type="text/javascript" src="https://www.google.com/jsapi"></script> |
В данном случае мы используем JavaScript, чтобы создать новую диаграмму, заполненную данными, которые мы получили. Загрузите Google Charts API и укажите ему использовать функцию под названием drawChart(), которую мы создадим позже.
|
1 2 3 |
<script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); |
Теперь пришло время создать функцию drawChart(). Эта функция начнётся с определения столбцов данных, которые будут использованы в диаграмме. Вы можете представить столбцы как оси графика.
|
1 2 3 4 |
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Day'); data.addColumn('number', 'Pageviews'); |
Как только структура данных для диаграммы настроена, она может принять данные, полученные от GAPI. Google Charts использует функцию addRows(), которая может принимать массивы данных, разделённые запятой.
Каждый массив будет содержать один день и количество просмотров страницы в течение этого дня.
|
1 2 3 4 5 6 7 |
data.addRows([ <?php foreach($results as $result) { echo '["'.date('M j',strtotime($result->getDate())).'", '.$result->getPageviews().'],'; } ?> ]); |
Наконец, создайте диаграмму и передайте ей данные, которые мы только что получили. Как вы увидите, в этом разделе есть несколько переменных, которые могут быть подстроены под ваш шаблон, например, ширина, высота и заголовок. Используемая диаграмма — Google’s , на случай, если вы захотите узнать о дополнительных опциях.
|
1 2 3 4 5 6 7 8 9 10 11 |
var chart = new google.visualization.AreaChart(document.getElementById('chart')); chart.draw(data, {width: 630, height: 180, title: '<?php echo date('M j, Y',strtotime('-30 day')).' - '.date('M j, Y'); ?>', colors:['#058dc7','#e6f4fa'], areaOpacity: 0.1, hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#058dc7', fontSize: 10 } }, pointSize: 5, legend: 'none', chartArea:{left:0,top:30,width:"100%",height:"100%"} }); } // Конец drawChart() </script> |
Всё готово! Теперь у вас должна быть рабочая диаграмма. Попробуйте провести мышью над каждой точкой графика, вам будет показано точное число просмотров страницы за этот день.
Полный пример
Ниже вы можете видеть, как выглядит весь код. Чтобы посмотреть на нашу работу в действии, просто в приведённом коде измените email, пароль и Google id на свои собственные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<style type="text/css"> /* IN PAGE ANALYTICS */ #page-analtyics { clear: left; } #page-analtyics .metric { background: #fefefe; /* Старые браузеры */ background: -moz-linear-gradient(top, #fefefe 0%, #f2f3f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f2f3f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* IE10+ */ background: linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f2f3f2',GradientType=0 ); /* IE6-9 */ border: 1px solid #ccc; float: left; font-size: 12px; margin: -4px 0 1em -1px; padding: 10px; width: 105px; } #page-analtyics .metric:hover { background: #fff; border-bottom-color: #b1b1b1; } #page-analtyics .metric .legend { background-color: #058DC7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 0; margin-right: 5px; padding: 10px 5px 0; } #page-analtyics .metric strong { font-size: 16px; font-weight: bold; } #page-analtyics .range { color: #686868; font-size: 11px; margin-bottom: 7px; width: 100%; } </style> <?php require('gapi.class.php'); /* Определяем переменные */ $ga_email = 'youremail@gmail.com'; $ga_password = 'yourpassword'; $ga_profile_id = '12345678'; $ga_url = $_SERVER['REQUEST_URI']; /* Создаём новый запрос Google Analytics и получаем результаты */ $ga = new gapi($ga_email,$ga_password); $ga->requestReportData($ga_profile_id, array('date'),array('pageviews'), 'date', 'pagePath == '.$ga_url); $results = $ga->getResults(); ?> <!-- Создаём пустой div, который будет заполнен с использованием Google Charts API и данных полученных от Google --> <div id="chart"></div> <!-- Включаем Google Charts API --> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <!-- Создаём новую диаграмму и строим график просмотров страницы за каждый день --> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); <!-- Создаём таблицу данных --> data.addColumn('string', 'Day'); data.addColumn('number', 'Pageviews'); <!-- Заполняем диаграмму данными, полученными Analytics. Каждая строка соответствует установленному порядку столбцов: день, затем количество просмотров --> data.addRows([ <?php foreach($results as $result) { echo '["'.date('M j',strtotime($result->getDate())).'", '.$result->getPageviews().'],'; } ?> ]); var chart = new google.visualization.AreaChart(document.getElementById('chart')); chart.draw(data, {width: 630, height: 180, title: '<?php echo date('M j, Y',strtotime('-30 day')).' - '.date('M j, Y'); ?>', colors:['#058dc7','#e6f4fa'], areaOpacity: 0.1, hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#058dc7', fontSize: 10 } }, pointSize: 5, legend: 'none', chartArea:{left:0,top:30,width:"100%",height:"100%"} }); } </script> <?php $ga->requestReportData($ga_profile_id, 'pagePath', array('pageviews', 'uniquePageviews', 'exitRate', 'avgTimeOnPage', 'entranceBounceRate'), null, 'pagePath == '.$ga_url); $results = $ga->getResults(); function secondMinute($seconds) { $minResult = floor($seconds/60); if($minResult < 10){$minResult = 0 . $minResult;} $secResult = ($seconds/60 - $minResult)*60; if($secResult < 10){$secResult = 0 . round($secResult);} else { $secResult = round($secResult); } return $minResult.":".$secResult; } echo '<div id="page-analtyics">'; foreach($results as $result) { echo '<div class="metric"><span class="label">Pageviews</span><br /><strong>'.number_format($result->getPageviews()).'</strong></div>'; echo '<div class="metric"><span class="label">Unique pageviews</span><br /><strong>'.number_format($result->getUniquepageviews()).'</strong></div>'; echo '<div class="metric"><span class="label">Avg time on page</span><br /><strong>'.secondMinute($result->getAvgtimeonpage()).'</strong></div>'; echo '<div class="metric"><span class="label">Bounce rate</span><br /><strong>'.round($result->getEntrancebouncerate(), 2).'%</strong></div>'; echo '<div class="metric"><span class="label">Exit rate</span><br /><strong>'.round($result->getExitrate(), 2).'%</strong></div>'; echo '<div style="clear: left;"></div>'; } echo '</div>'; ?> |
Дополнительно
- Попробуйте использовать свою CMS, чтобы отображать эту аналитику только для определённых пользователей. В WordPress вы можете использовать
is_admin(). - Подумайте об отделении этого кода от шаблона. Вы можете поместить его в отдельный файл, например
show_analytics.php, а затем (в WordPress) использоватьget_template_part(‘show_analytics’). - Диаграмма действительно увеличивает время загрузки страницы.
решил попробовать реализовать по данному посту расширение для yii и обломался, по нескольким причинам... библиотека уже давно заброшена, она не работает и в ней апи версии 1.3, сейчас последняя от гугла 3.0
плюс в конце концов лучше юзать официальную, а это
Если руки кривые, то это не значит, что не работает...
Ну во-первых она работает, проверил. Во-вторых она тянет версию апи 2.4, которая еще совместима.
Официальная конечно лучше, но она слишком перегружена и тяжела
Отличная статья. Рекомендую о системах статистики и аналитики также почитать тут
Библиотека обновлена , все отлично работает. Я изменил метод авторизации, пример:
require 'gapi.class.php';
define ('ga_profile_id','12345678');
$ga = new gapi («xxxxxxxxx@developer.gserviceaccount.com», «key-name.p12»);
ga_profile_id — id вашего профиля в GA
xxxxxxxxx@developer.gserviceaccount.com = это имейл который создаем в Google Developers Console, инструкция
этот же имейл нужно добавить в GA в управление пользователями и дать права Читать и анализировать.
key-name.p12 = это мы скачиваем на странице Google Developers Console, название прописываем свое.