Подтвердить что ты не робот

Отображать данные 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 на своем веб-сайте?

4b9b3361

Ответ 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 GData​​li >
  • 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 или другой веб-портал.