it-swarm.com.de

Google Analytics-Daten auf meiner Website anzeigen?

Ich versuche, einen Weg zu finden, um Daten, die von Google Analytics gesammelt wurden, auf meiner Website anzuzeigen. Ich verwende NopCommerce und möchte diese Informationen/Statistiken in einer Ansicht im Admin-Bereich anzeigen.

Es gibt viele Möglichkeiten, dies zu erreichen, und nachdem ich das Web durchsucht hatte, fand ich einige Beispiele mit JavaScript, aber ich konnte kein gutes Tutorial dafür finden.

Ich habe mich auch mit der Integration von Google Analytics in C # befasst und dieses Beispiel gefunden: http://biasecurities.com/2012/02/ using-the-google-analytics-api-with-asp-net-mvc/# comment-1310 Ein Demo-Projekt kann von GitHub hier heruntergeladen werden: https://github.com/jgeurts/Analytics-Example

Das Demoprojekt scheint jedoch nicht zu funktionieren, da die Google-URL ( https://www.google.com/analytics/feeds/accounts/default ) nicht mehr verwendet wird.

Da ich eine MVC-Anwendung verwende, ist es vorzuziehen, dies zu erreichen, indem die Google Analytics-Logik in einem Controller angewendet und in einer Ansicht angezeigt wird. Oder sowas ähnliches.

Google bietet ein Abfragetool, mit dem Sie hier experimentieren können. Es ist daher nicht schwierig, Daten aus Google Analytics zu extrahieren und auf der Website anzuzeigen: https://ga-dev-tools.appspot.com/Explorer/

Hat jemand Google Analytics-Daten erfolgreich auf ihrer Website anzeigen können?

24
koffe14

Für den Fall, dass jemand anderes das gleiche Problem hat, habe ich Folgendes getan und es beantwortet die Frage ziemlich genau.

1.

Hier ist der grundlegende Code für einen API-Client, der über Ihr Google Service-Konto auf Daten von Google Analytics zugreift. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

Damit diese Anwendung funktioniert, müssen Sie vor dem Programmieren mehrere Dinge bereithalten.

* Google Analytics-Konto - Nach der Registrierung wird ein "Tracker-Code" generiert, den Sie auf jeder Webseite platzieren können, die Sie verfolgen möchten. Möglicherweise werden keine Statistiken sofort angezeigt. Es kann bis zu 24 Stunden dauern, bis Statistiken im Google Analytics-Dashboard angezeigt werden.

Eine OAuth-Autorisierung (API-Key) mit CLIENT_ID, CLIENT SECRET und EMAIL ADRESS (Dies ist keine normale E-Mail-Adresse, sondern eine Service-Account-E-Mail, die für Sie erstellt wird, wenn Sie eine OAuth-Autorisierung durchführen.) . Console.developers.google. com /

Eine Serverschlüssel kann auch hier erstellt werden: console.developers.google.com/.Sie können auch einen Browserschlüssel erstellen, haben sich aber nicht damit beschäftigt und wissen nicht, was er tut.

Zum Schluss benötigen Sie einen Zertifikatsschlüssel. Ihre Anwendung kann nur unter Verwendung des Schlüssels und der Anmeldeinformationen auf Ihr Google Analytics-Konto zugreifen. Der Schlüssel ist eine verschlüsselte p.12-Datei. Den Schlüssel finden Sie unter https://code.google.com/apis/console/ .

Hier ist ein Leitfaden für den Schlüssel: http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)

2.

Nun, da Sie alle Schlüssel und Anmeldeinformationen haben, die Sie benötigen, ist es an der Zeit, sich den Code anzusehen, den ich in "1" verlinkt habe. Hier ist noch einmal die Basis dafür: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

Erstellen Sie eine Konsolenanwendung, und implementieren Sie den obigen Code.

Hinweis: Wenn Sie keinen "Google Plus-Service" erstellen, müssen Sie diese Teile für "AnalyticsService" ändern. Verwalten Sie Nuget und installieren Sie Pakete:

  • Google Apis Core Library
  • Google Apis Client Library
  • Google Apis Auth Client-Bibliothek
  • Google Apis Analytics.v3-Bibliothek
  • Google GData Client (Dies stellt Eigenschaften bereit, die zum Abfragen von Daten, Metriken, Einschränkungen usw. verwendet werden.)
  • Google GData Extensions Library
  • Analytics

Könnte etwas vergessen, aber hier sind die Namespaces, die ich verwende:

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

Zum Schluss noch ein Teil meines Codes. Hinweis Ich erstelle ein neues Analytics als "neue ServiceAccountCredentials" wie im Code von Google. Das ist der Hauptunterschied: Daten von Google Analytics API mit .NET abrufen, mehrere Metriken?

Damit kann ich auf Daten aus dem Google Analytics-Konto zugreifen und diese abfragen. Das Beste ist, dass Sie sich nicht bei Google anmelden müssen, da der Schlüssel und die Anmeldeinformationen Ihnen direkten Zugriff auf die Kontodaten bieten.

Ich werde diesen Code zu MVC migrieren. Jetzt kann ich später ein Update für die Implementierung dieses Analytics-Clients in Mvc vornehmen.

7
koffe14

In diesem Dokument wird erläutert, wie Sie Google Access-Token abrufen und diese verwenden, um Google Analytics-Daten auf unseren Websites anzuzeigen.

Beispiel: Ein Live-Beispiel ist in verfügbar

https://newtonjoshua.com

Hinweis: Verwenden Sie für alle folgenden Schritte dasselbe Google Mail-Konto.


SCHRITT 1: Richten Sie Google Analytics ein

Führen Sie die folgenden Schritte aus, um Google Analytics auf Ihrer Website einzurichten

  1. Melden Sie sich in Ihrem Analytics-Konto an.
  2. Wählen Sie die Registerkarte Admin.
  3. Wählen Sie ein Konto aus dem Dropdown-Menü in der Spalte ACCOUNT aus.
  4. Wählen Sie eine Eigenschaft aus dem Dropdown-Menü in der Spalte EIGENSCHAFT.
  5. Klicken Sie unter PROPERTY auf Tracking Info -> Tracking Code.
  6. Zum Erfassen von Daten müssen Sie den Analytics-Tracking-Code kopieren und in den Quellcode auf jeder Webseite einfügen, die Sie verfolgen möchten.
  7. Wenn Sie das JavaScript-Tracking-Code-Snippet für Ihre Immobilie haben, kopieren Sie das Snippet genau, ohne es zu bearbeiten.
  8. Fügen Sie Ihr Tracking-Code-Snippet (unverändert, vollständig) vor dem schließenden </ head> -Tag auf jeder Webseite Ihrer Website ein, die Sie verfolgen möchten.
  9. Nach erfolgreicher Installation von Analytics-Tracking kann es bis zu 24 Stunden dauern, bis Daten wie Verkehrsinformationen, Benutzereigenschaften und Browsing-Informationen in Ihren Berichten angezeigt werden

Beziehen auf:

  1. https://support.google.com/analytics/answer/1008080?hl=de
  2. https://analytics.google.com

SCHRITT 2: Token abrufen

Google Project:

Öffnen Sie zum Erstellen eines Google Cloud Platform-Projekts die Google Developers Console ( https://console.developers.google.com ) und klicken Sie auf Projekt erstellen.

OAuth 2.0 API-Zugriff aktivieren:

Ihre Anwendung muss auf Benutzerdaten zugreifen und andere Google-Dienste in Ihrem Namen kontaktieren. Verwenden Sie OAuth 2.0, um Ihrer App API Zugriff zu gewähren.

Um dies zu ermöglichen, benötigen Sie eine Client-ID:

  1. Öffnen Sie die Seite mit den Anmeldeinformationen für die Google API-Konsole ( https://console.developers.google.com/apis/credentials ).
  2. Wählen Sie aus dem Projekt Ihr Projekt aus.
  3. Wählen Sie Create credential s und wählen Sie OAuth client ID.
  4. Wählen Sie unter Anwendungstyp Webanwendung, geben Sie einen Namen und ein
  5. stellen Sie die Einschränkungen ein, indem Sie JavaScript originals, Redirect URIs eingeben, um auf die Website zu verweisen wo Sie die Daten anzeigen möchten, und klicken Sie dann auf Erstellen.

  6. Notieren Sie sich die OAuth 2.0 client_id und client_secret. Sie benötigen sie, um die Benutzeroberfläche zu konfigurieren.

Berechtigungscode abrufen:

Im Browser eingeben:

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}} & approved_Prompt = & access_type = offline erzwingen

Sie werden weitergeleitet zu

{{redirect_uri}}? code == {{ authority_code}} #

Refresh-Token abrufen:

Senden Sie eine POST Anfrage, möglicherweise über eine REST Konsole an

https://www.googleapis.com/oauth2/v3/token?code= {{authority_code}} & client_id = {{client_id}} & client_secret = {{client_secret}} & redirect_uri = {{redirect_uri}} & grant_type = authorization_code

Sie erhalten eine JSON-Antwort mit

{"refresh_token": refresh_token}

Sie können das Aktualisierungstoken verwenden, um das Zugriffstoken für den Zugriff auf Google-APIs abzurufen.

Holen Sie sich das Zugriffstoken:

Senden Sie eine POST Anfrage an,

https://www.googleapis.com/oauth2/v3/token?client_id= {{client_id}} & client_secret = {{client_id}} & grant_type = refresh_token & refresh_token = {{refresh_token}}

In der Antwort erhalten Sie eine JSON mit access_token.

{access_token: {{access_token}}}

Beispiel:

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);
            }
        });
}

Token-Gültigkeit prüfen:

Senden Sie eine POST Anfrage an,

https://www.googleapis.com/oauth2/v1/tokeninfo?access_token= {{access_token}}

Beispiel:

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();
        });
}

Schritt 3: Daten abrufen

API einbetten:

Die GA Embed API ist eine JavaScript-Bibliothek, mit der Sie auf einfache Weise Ihr GA= Dashboard in wenigen Minuten auf Ihrer Website erstellen und einbetten können.

Siehe https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started .

Abfrage-Explorer:

Besuchen Sie den Embed API Query Explorer und autorisieren Sie

https://ga-dev-tools.appspot.com/query-Explorer/

Wählen Sie die Ansicht aus, für die Sie die Daten abrufen möchten.

Wählen Sie die erforderlichen Metriken und Dimensionen aus.

Beispiel:

Länderdaten abrufen (Ich möchte die Anzahl der Benutzer wissen, die von jedem Land aus auf meine Website zugreifen).

Um diese Daten zu erhalten, wählen Sie die Metriken als "Benutzer" und die Dimensionen als "Land".

Klicken Sie auf Abfrage ausführen.

Sie finden die Analysedaten für die Abfrage in einer Tabelle.

Kopieren Sie den API-Abfrage-URI. Und füge access_token = {{access_token}} zur URI hinzu.

Beispiel:

https://www.googleapis.com/analytics/v3/data/ga?ids= {{ids}} & start-date = 2015-07-01 & end-date = today & metrics = ga% 3Ausers & dimensions = ga% 3A Land & access_token = {{access_token}}

Senden Sie eine POST Anfrage an die URIs, um die Daten in Ihrem Browser abzurufen.

Beispiel:

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);
            }

        });
}

Schritt 4: Daten anzeigen

Jetzt haben wir die Daten gesammelt. Schließlich müssen wir sie auf unserer Website anzeigen.

" Live-Daten auf Ihrer Website anzeigen" ist der Titel von Google Charts. Und das werden wir tun.

Siehe https://developers.google.com/chart/ .

Das folgende Beispiel zeichnet ein GeoChart im div mit 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);
}

Lesen Sie https://newtonjoshua.com , um das obige Beispiel in Aktion zu sehen.

4
Newton Joshua

Ich würde empfehlen, die neue Google APIs Client Library für .NET (derzeit in der Beta) zu verwenden. Informationen zur Analytics API finden Sie hier. Beachten Sie, dass die Client Library für .NET (Google-API-Dotnet-Client) die .NET-Bibliothek für die Google Data API (Google-Gdata) ersetzt.

Leider ist von Google noch kein Beispielcode verfügbar (siehe dieses Problem ), aber Diese Frage zu SO sollte helfen.

Wenn Sie sich nicht bei jedem Zugriff auf Analytics-Daten anmelden möchten, können Sie die OAuth 2.0-Autorisierung mit Offlinezugriff verwenden. Sie müssen jedoch den ersten Zugriff auf Ihre Webanwendung gewähren. Dazu müssen Sie sich einmalig anmelden, Sie können jedoch später ein Aktualisierungstoken verwenden.

4
nwellnhof

Ich habe ein paar Tage damit verbracht, das Internet zu durchsuchen, um ASP.NET-Beispielcode ohne Erfolg zu erhalten. Ich habe die Methode von Koffe14 für die Authentifizierung verwendet, und auch Linda Lawtons ausgezeichnete ASP.NET-Analyse Beispiel. 

Ich habe den Code auf meiner Website veröffentlicht . Es ist kein MVC, aber es kann anderen helfen, die Daten von Google Analytics mithilfe der v3 Google API in eine ASP.NET-Webseite laden müssen.

1
Myke Black

Check out embeddedanalytics.com (disclaimer - ich arbeite mit ihnen).

Dies ist eine einfache, aber leistungsstarke Lösung, die sich an Menschen richtet, die sich nicht mit dem Erlernen der GA - API auseinandersetzen möchten und diese dann mit Visualisierung (z. B. Diagrammen) verknüpfen müssen.

Definieren Sie grundsätzlich Ihre Diagramme und binden Sie ein Codefragment dort ein, wo das Diagramm angezeigt werden soll. Wir unterstützen auch Mechanismen, die eine einfache Integration in ein benutzerdefiniertes CMS oder ein anderes Webportal ermöglichen.

0
M Schenkel