Отображение данных Google Analytics на моем веб-сайте?
Я пытаюсь найти способ отображения данных, собранных из Google Analytics на моем веб-сайте. Я использую NopCommerce, и я хочу отобразить эту информацию/статистику в представлении в разделе администратора.
может быть много способов достичь этого, и после поиска в Интернете я нашел несколько примеров с использованием JavaScript, но я не мог найти хороший учебник для этого.
Я также изучил интеграцию Google Analytics с C#, и я нашел этот пример: http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc/#comment-1310 Демо-проект можно скачать с GitHub здесь:https://github.com/jgeurts/Analytics-Example
однако демо-проект, похоже, не работает в качестве URL-адреса google (https://www.google.com/analytics/feeds/accounts/default) больше не используется.
поскольку я использую приложение MVC, было бы предпочтительнее, чтобы это произошло применение логики Google Analytics в контроллере и отображение ее в виде. Или что-то в этом роде.
Google предоставляет инструмент запроса для экспериментов здесь, поэтому он не должен быть для жесткого извлечения данных из Google Analytics и отображения данных на веб-сайте:https://ga-dev-tools.appspot.com/explorer/
кто-нибудь смог успешно отобразить данные Google Analytics на своем веб-сайте?
5 ответов
в случае, если у кого-то еще есть такая же проблема, вот что я сделал, и это в значительной степени отвечает на вопрос.
1.
вот основной код для клиента API, который получает доступ к данным из Google Analytics через учетную запись службы Google. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
для того, чтобы сделать это приложение работать вам нужно иметь несколько вещей, готовых, прежде чем начать кодирование.
* Аккаунт Google Analytics - после регистрации "трекер" код генерируется для вас, чтобы поставить на каждой странице, которую вы хотите отслеживать. Вы можете не увидеть статистику сразу, и это может занять до 24 часов, прежде чем любая статистика отображается в панели мониторинга Google Analytics.
авторизация OAuth (API-ключ) с CLIENT_ID, секретом клиента и адресом электронной почты (это не ваша обычная электронная почта, а электронная почта учетной записи службы, которая создается для вас, когда вы делаете Протокол OAuth Авторизации). console.developers.google.com/
serverkey, также может быть создан здесь: console.developers.google.com/. Вы также можете создать ключ браузера, не беспокоились об этом, хотя и не знаете, что он делает.
наконец, вам нужен ключ сертификата. Ваше приложение сможет получить доступ к вашей учетной записи Google Analytics только с помощью ключа и учетных данных. Ключ является зашифрованным p.12 файл. Вы можете найти ключ в https://code.google.com/apis/console/.
вот руководство для ключа: http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)
2.
теперь, когда у вас есть все ключи и учетные данные, вам нужно время, чтобы начать смотреть на код, который я связал в "1". Вот основные для него снова: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
создайте консольное приложение и реализуйте приведенный выше код.
Примечание: Вы не делаете "сервис Google Plus", поэтому вам нужно изменить эти части для"AnalyticsService". Перейдите в управление nuget и установите пакеты:
- Основная Библиотека Google Apis
- Клиентская Библиотека Google Apis
- Клиент Аутентификации Google Apis Библиотека
- Google Apis Analytics.библиотека В3
- клиент Google GData (это предоставляет свойства, используемые для запроса данных, метрик, деменций и т. д.)
- Библиотека Расширений Google GData
- аналитика
может что-то забыл, но вот пространства имен, которые я использую:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Security.Cryptography.X509Certificates;
using Google.Apis.Auth.OAuth2;
using Google.Apis.Services;
using Google.Apis.Analytics.v3;
3
наконец, вот некоторые из моих код. Примечание. Я создаю новую аналитику, как предполагается, " new ServiceAccountCredentials " как в коде от Google. В этом главное отличие: получить данные из Google Analytics API с .NET, несколько метрик?
С этим я могу получить доступ и запросить данные из учетной записи Google Analytics. Лучшая часть заключается в том, что вам не нужно входить в Google для этого, так как ключ и учетные данные дают вам доступ к данным учетной записи напрямую.
Я перенесу этот код в MVC теперь я могу сделать обновление позже для того, как реализуйте этот клиент аналитики в Mvc.
Я бы рекомендовал использовать новые клиентская библиотека Google APIs для .NET (в настоящее время в бета-версии). Информация о аналитика API можно найти здесь. Обратите внимание, что клиентская библиотека для .NET (google-api-dotnet-client) заменяет библиотеку .NET для API данных Google (google-gdata).
к сожалению, в Google еще нет образца кода (см. этот вопрос), но этот вопрос на SO должны помощь.
Если вы не хотите входить в систему каждый раз, когда вы получаете доступ к данным аналитики, вы можете использовать авторизацию OAuth 2.0 с автономный доступ. Однако вы должны предоставить первоначальный доступ к своему веб-приложению. Для этого требуется один раз войти в систему, но позже вы можете использовать токен обновления.
в этом документе объясняется, как получить маркеры доступа Google и использовать их для отображения данных Google Analytics на наших веб-сайтах.
пример: живой пример доступен в
Примечание: используйте ту же учетную запись Gmail для всех следующих шагов.
Шаг 1: Настройка Google Analytics
выполните следующие действия для настройки Google Analytics на вашем сайте
- войдите в свою учетную запись Analytics.
- выберите вкладку администратор.
- выберите учетную запись в раскрывающемся меню в столбце учетная запись.
- выберите свойство в раскрывающемся меню в столбце свойство.
- в разделе свойства щелкните информация отслеживания - > Код отслеживания.
- для сбора данных, необходимо скопировать и вставить код отслеживания в исходный код на каждой веб-странице, которую вы хотите дорожка.
- как только у вас есть фрагмент кода отслеживания JavaScript для вашего свойство, скопируйте фрагмент точно без редактирования.
- вставьте фрагмент кода отслеживания (без изменений, в полном объеме) перед закрывающим тегом на каждой странице вашего сайта вы хотите дорожка.
- после успешной установки отслеживания аналитики может потребоваться до 24 часов для данных как данные по направления движения, потребитель характеристики и информация о просмотре чтобы появиться в ваших отчетах
см.:
Шаг 2: получить токены
Проект Google:
чтобы создать проект облачной платформы Google, откройте консоль разработчиков Google (https://console.developers.google.com) и нажмите Создать Проект.
включить доступ к API OAuth 2.0:
ваше приложение должно будет получить доступ к данным пользователя и связаться с другими службами Google от вашего имени. Используйте OAuth 2.0 для предоставления доступа к API приложения.
чтобы включить это, вам нужен идентификатор клиента:
- откройте страницу учетных данных консоли Google API (https://console.developers.google.com/apis/credentials).
- от project, раскрывающийся список и выберите свой проект.
- выберите создать учетные данныеs и выберите идентификатор клиента OAuth.
- в разделе Тип приложения выберите веб-приложения введите имя и
установите ограничения, введя JavaScript origins, Перенаправить URIs чтобы указать веб-сайт, на котором вы планируете отображать данные, а затем нажмите создать.
обратите внимание на OAuth 2.0 client_id и секрет клиента. Они понадобятся вам для настройки пользовательского интерфейса.
получить код авторизации:
введите в браузере:
https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id={{ client_id}}&параметр redirect_uri={{параметр redirect_uri }} & approval_prompt=force&access_type=offline
вы будете перенаправлены на
{{параметр redirect_uri }}?код=={{код}}#
Получить Токен Обновления:
отправить Запрос POST, возможно, через остальное до
https://www.googleapis.com/oauth2/v3/token?code={{authorization_code}} &client_id={{client_id}}&секрет клиента={{секрет клиента}} &параметр redirect_uri={{параметр redirect_uri }}&grant_type=authorization_code произвести
вы получите ответ JSON с
{"маркер обновления": маркер обновления}
вы можете использовать токен обновления, чтобы получить токен доступа для доступа к Google APIs.
получить маркер доступа:
отправить запрос на почту,
https://www.googleapis.com/oauth2/v3/token?client_id={{client_id}} &секрет клиента={{client_id}} &grant_type=маркер обновления&маркер обновления={{маркер обновления}}
вы получите JSON с access_token в ответе.
{маркер доступа: {{способом}}}
пример:
var access_token = '';
function getAccessToken(){
$.post('https://www.googleapis.com/oauth2/v3/token', {
client_id: {{client_id}},
client_secret: {{client_secret}},
grant_type: 'refresh_token',
refresh_token: {{refresh_token}}
}, function (data, status) {
if (status === 'success') {
access_token = data.access_token;
// Do something eith the access_token
}
else {
console.error(status);
}
});
}
проверить валидность токена:
отправить запрос на почту,
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token={{access_token}}
пример:
function checkValidity() {
$.post('https://www.googleapis.com/oauth2/v1/tokeninfo', {
access_token:{{access_token}}
}).done(function (data, status) {
if (status === 'success') {
console.debug(data.expires_in);
var check = false;
check = data.hasOwnProperty('expires_in');
if (check) {
// Token is valid
}
if (!check) {
getAccessToken();
}
}
else {
console.debug(status);
}
})
.fail(function (data) {
console.error(data);
getAccessToken();
});
}
Шаг 3: Извлечение Данных
Embed API:
API GA Embed-это библиотека JavaScript, которая позволяет вам легко создавать и внедрять панель управления GA на вашем сайте за считанные минуты.
см. https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started.
Запрос Проводника:
посетите Embed API Query Explorer и авторизуйте
выберите представление, для которого вы хотите получить данные.
выберите необходимые показатели и размеры.
пример:
получить данные по стране (я хочу знать количество пользователей, обращающихся к моему сайту из каждой страны).
чтобы получить эти данные, выберите метрики, как "пользователи" и размеры "страна".
нажать на кнопку Выполнить Запрос.
вы найдете аналитические данные для запроса отображаются в таблице.
скопировать запрос API URI. И добавить полученного access_token={{способом}} к URI.
пример:
https://www.googleapis.com/analytics/v3/data/ga?ids={{ids}}&start-date=2015-07-01&end-date=today&metrics=ga%3Ausers&dimensions=ga%3Acountry&access_token={{access_token}}
отправить запрос POST в URIs, чтобы получить данные в вашем браузер.
пример:
function gaGetCountry() {
$.get('https://www.googleapis.com/analytics/v3/data/ga?' +
'ids={{ids}}' +
'start-date=2015-07-01&' +
'end-date=today&' +
'metrics=ga%3Ausers&' +
'dimensions=ga%3Acountry&' +
'sort=ga%3Ausers&' +
'filters=ga%3Ausers%3E10&' +
'max-results=50' +
'&access_token=' + {{access_token}},
function (data, status) {
if (status === 'success') {
// Display the Data
drawRegionsMap(data.rows);
} else {
console.debug(status);
}
});
}
Шаг 4: Отображение Данных
теперь мы собрали данные. Наконец, мы должны показать их на нашем веб-сайте.
" отображение живых данных на вашем сайте " - это название диаграмм Google. И это то, что мы собираемся делать.
см.https://developers.google.com/chart/.
следующий пример нарисует GeoChart в div с id= 'countryChart'.
// Draw country chart
function drawRegionsMap(data) {
var head = data[0];
head[0] = 'Country';
head[1] = 'Users';
for (var i = 1; i < data.length; i++) {
var d = data[i];
d[1] = Number(d[1]);
}
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'My Website is viewed from,',
domain: '{{Country Code eg: IN for India}}',
tooltip: {
textStyle: {
color: 'navy'
},
showColorCode: true
},
legend: {
textStyle: {
color: 'navy',
fontSize: 12
}
},
colorAxis: {
colors: ['#00FFFF', '#0000FF']
}
};
var chart = new google.visualization.GeoChart(document.getElementById('countryChart'));
chart.draw(chartData, options);
}
см.https://newtonjoshua.com чтобы просмотреть приведенный выше пример в действии.
Я потратил пару дней на траление в интернете, чтобы получить образец ASP.NET код без везения. Я использовал метод Koffe14 для аутентификации, а также Линда Лоутон отлично ASP.NET аналитика пример.
Я разместил код на моем сайте. Это не MVC, но это может помочь другим людям, которым нужно получить данные из Google analytics в ASP.NET веб-страница с помощью V3 Google API.
проверить embeddedanalytics.com (отказ от ответственности - я работаю с ними).
Это простое, но мощное решение, предназначенное для людей, которые не хотят иметь дело с изучением API GA, а затем связывать его с визуализацией (например, диаграммы/графики).
в основном определите свои диаграммы и вставьте фрагмент кода, где вы хотите, чтобы диаграмма отображалась. Мы также поддерживаем механизмы, позволяющие легко интегрироваться в пользовательскую CMS или другую сеть портал.