Google Analytics-Daten auf meiner Website anzeigen?

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.

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.

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.

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.