Отображать данные Google Analytics на моем веб-сайте?
Я пытаюсь выяснить способ отображения данных, собранных в Google Analytics на моем веб-сайте. Я использую NopCommerce, и я хочу отобразить эту информацию/статистику в представлении в разделе администратора.
Могло бы быть много способов добиться этого, и после поиска в Интернете я нашел несколько примеров с использованием JavaScript, но я не смог найти для этого хороший учебник.
Я также изучил интеграцию Google Analytics с С#, и я нашел этот пример: 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 на своем веб-сайте?
Ответы
Ответ 1
В случае, если у кого-то есть одна и та же проблема, что я сделал, и это в значительной степени отвечает на вопрос.
1.
Вот базовый код для клиента API, который обращается к данным из Google Analytics через вашу учетную запись службы Google. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
Чтобы сделать работу этого приложения, перед началом кодирования вам нужно подготовить несколько вещей.
* Аккаунт Google Analytics. После регистрации кода "трекер" вы создаете для каждой веб-страницы, которую вы хотите отслеживать. Вы можете не видеть статистику сразу, и она может занять до 24 часов, прежде чем какая-либо статистика будет показана на панели инструментов Google Analytics.
Авторизация авторизации (API-ключ) с CLIENT_ID, CLIENT SECRET и EMAIL ADRESS (это не ваш обычный адрес электронной почты, а электронная почта учетной записи службы, созданная для вас при авторизации OAuth).
console.developers.google.com/
Здесь также можно создать серверный сервер: 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 Auth
- Библиотека Google Apis Analytics.v3.
- Клиент GData Google (предоставляет свойства, используемые для запроса данных, показателей, демонтажей и т.д.).
- Библиотека расширений Google GDatali >
- Google Analytics
Возможно, что-то забыли, но вот пространства имен, которые я использую:
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
Наконец, вот некоторые из моих кодов. Примечание. Я создаю новую Analytics как предполагаемую для "новых ServiceAccountCredentials", как в коде Google. Это главное отличие:
Получить данные из API Google Analytics с помощью .NET, несколько показателей?
С этим я могу получить доступ и запросить данные из учетной записи Google Analytics. Самое приятное то, что вам не нужно входить в Google для этого, так как ключ и учетные данные дают вам доступ к данным учетной записи напрямую.
Я переношу этот код в MVC, теперь я могу сделать обновление позже, как реализовать этот клиент Google Analytics в Mvc.
Ответ 2
Я бы рекомендовал использовать новую Клиентскую библиотеку API Google API для .NET (в настоящее время в бета-версии). Информацию о API Google Analytics можно найти здесь. Обратите внимание, что клиентская библиотека для .NET(google-api-dotnet-client) заменяет библиотеку .NET для API данных Google (google-gdata).
К сожалению, в Google еще нет образца кода (см. этот вопрос), но этот вопрос на SO должен помочь.
Если вы не хотите входить в систему при каждом обращении к данным Google Analytics, вы можете использовать авторизацию OAuth 2.0 с офлайн-доступ. Однако вы должны предоставить первоначальный доступ к своему веб-приложению. Это требует от вас входа в систему один раз, но позже вы можете использовать токен обновления.
Ответ 3
В этом документе объясняется, как получить токены Google Access и использовать их для отображения данных Google Analytics на наших веб-сайтах.
Пример: Живой пример доступен в
https://newtonjoshua.com
Примечание. Используйте ту же учетную запись Gmail для всех приведенных ниже шагов.
ШАГ 1: Настройка Google Analytics
Следуйте приведенным ниже инструкциям, чтобы настроить Google Analytics на своем веб-сайте.
- Войдите в свою учетную запись Analytics.
- Выберите вкладку "Администратор".
- Выберите учетную запись в раскрывающемся меню в столбце ACCOUNT.
- Выберите свойство из раскрывающегося меню в столбце "НЕДВИЖИМОСТЬ".
- В разделе "НЕДВИЖИМОСТЬ" выберите "Отслеживание информации" → "Код отслеживания".
- Для сбора данных необходимо скопировать и вставить код отслеживания Google Analytics
в исходный код на каждой веб-странице, которую вы хотите отслеживать.
- Как только у вас есть фрагмент кода отслеживания JavaScript для вашего
свойство, скопируйте фрагмент точно без его редактирования.
- Вставьте фрагмент кода отслеживания (без изменений, полностью) до
тег закрытия </head> на каждой веб-странице вашего сайта, которую вы хотите
трек.
- Как только вы успешно установили отслеживание Google Analytics, это может занять
до 24 часов для данных, таких как информация о направлении трафика, пользователь
характеристик и информации о просмотре, которые будут отображаться в отчетах.
Обратитесь к:
ШАГ 2: Получить токены
Проект Google:
Чтобы создать проект Google Cloud Platform, откройте Консоль разработчиков Google (https://console.developers.google.com) и нажмите "Создать проект".
Разрешить доступ к API OAuth 2.0:
Вашему приложению необходимо будет получить доступ к данным пользователя и обратиться к другим службам Google от вашего имени. Используйте OAuth 2.0, чтобы предоставить доступ к API приложения.
Чтобы включить это, вам потребуется идентификатор клиента:
- Откройте страницу учетных данных консоли API Google (https://console.developers.google.com/apis/credentials).
- В раскрывающемся меню проекта выберите проект.
- Выберите Создать учетные данные и выберите идентификатор клиента OAuth.
- В разделе "Тип приложения" выберите "Веб-приложение", введите имя и
-
установите ограничения, введя исходные коды JavaScript, Перенаправить URI, чтобы указать веб-сайт, на котором вы планируете отображать данные, и затем нажмите "Создать".
-
Обратите внимание на OAuth 2.0 client_id и client_secret. Они понадобятся для настройки пользовательского интерфейса.
Получить код авторизации:
Введите в браузере:
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 = сила & access_type = отсутствует
Вы перенаправляетесь на
{{redirect_uri}}? code == {{ authorization_code}} #
Получить токен обновления:
Отправьте запрос POST, возможно, используя консоль REST, чтобы
https://www.googleapis.com/oauth2/v3/token?code= {{authorization_code}} & Амп; client_id = {{client_id}} & client_secret = {{client_secret}} & redirect_uri = {{redirect_uri}} & grant_type = authorization_code
Вы получите ответ JSON с
{ "refresh_token": refresh_token}
Вы можете использовать токен обновления, чтобы получить токен доступа для доступа к API Google.
Получить токен доступа:
Отправьте запрос POST,
https://www.googleapis.com/oauth2/v3/token?client_id= {{client_id}} & Амп; client_secret = {{client_id}} & Амп; grant_type = refresh_token & refresh_token = {{refresh_token}}
В ответе вы получите JSON с access_token.
{access_token: {{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);
}
});
}
Проверить срок действия токена:
Отправьте запрос POST,
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: выборка данных
Вставить API:
API-интерфейс GA Embed - это библиотека JavaScript, которая позволяет вам легко создавать и встраивать панель инструментов GA на ваш сайт за считанные минуты.
Обратитесь к https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started.
Проводник запросов:
Посетите Explorer Query Explorer и авторизуйте
https://ga-dev-tools.appspot.com/query-explorer/
Выберите представление, для которого вы хотите получить данные.
Выберите требуемые показатели и размеры.
Пример:
Получить данные по стране (я хочу знать количество пользователей, получающих доступ к моему веб-сайту из каждой страны).
Чтобы получить эти данные, выберите показатели как "пользователи" и размеры как "страна".
Нажмите "Выполнить запрос".
Вы найдете аналитические данные для запроса, отображаемого в таблице.
Скопируйте URI-запрос API. И добавьте access_token = {{access_token}} в URI.
Пример:
https://www.googleapis.com/analytics/v3/data/ga?ids= {{id}} & start-date = 2015-07-01 & end-date = today & metrics = га% 3Ausers & размеры = га% 3Acountry & access_token = {{access_token}}
Отправьте запрос POST в URI, чтобы получить данные в вашем браузере.
Пример:
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, чтобы просмотреть приведенный выше пример в действии.
Ответ 4
Я потратил пару дней на тралинг в Интернете, чтобы получить образец кода ASP.NET без везения. Я использовал метод Koffe14 для аутентификации, а также Линда Лоутон превосходная аналитика ASP.NET.
Я разместил код на моем сайте. Это не MVC, но это может помочь другим людям, которые должны получать данные из Google Analytics на веб-страницу ASP.NET, используя API Google v3.
Ответ 5
Отъезд embeddedanalytics.com (отказ от ответственности - я работаю с ними).
Это простое, но мощное решение, предназначенное для людей, которые не хотят разбираться в API GA, а затем привязывать его к визуализации (например, диаграммы/графики).
В основном определите свои диаграммы и вставьте фрагмент кода, в котором вы хотите показать график. Мы также поддерживаем механизмы, так что их легко интегрировать в пользовательский CMS или другой веб-портал.