web-dev-qa-db-ja.com

WebサイトにGoogle Analyticsデータを表示しますか？

私は、Googleアナリティクスから収集したデータをWebサイトに表示する方法を見つけようとしています。 NopCommerceを使用していますが、管理セクションのビューにこの情報/統計を表示したいと思います。

これを実現するには多くの方法があり、Webを検索した後、JavaScriptを使用したいくつかの例を見つけましたが、このための優れたチュートリアルは見つかりませんでした。

GoogleアナリティクスとC＃の統合も検討しましたが、次の例を見つけました： http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc /＃comment-131 GitHubからデモプロジェクトをダウンロードできます： https://github.com/jgeurts/Analytics-Example

ただし、GoogleのURL（ https://www.google.com/analytics/feeds/accounts/default ）は使用されていないため、デモプロジェクトは機能していないようです。

MVCアプリケーションを使用しているので、コントローラー内でGoogleアナリティクスロジックを適用し、ビューに表示することでこれを実現することが望ましいでしょう。またはそのようなもの。

Googleはここで実験するためのクエリツールを提供しているので、Googleアナリティクスからデータを抽出してウェブサイトにデータを表示することはできません： https://ga-dev-tools.appspot.com/Explorer /

誰かが自分のウェブサイトにGoogle Analyticsデータを正常に表示できましたか？

javascriptasp.net-mvcgoogle-analyticsgoogle-analytics-apinopcommerce
24
WhoAmI

他の誰かが同じ問題を抱えている場合、私がやったことはここにあり、それはほとんど質問に答えます。

1。

以下は、Googleサービスアカウントを介してGoogleアナリティクスのデータにアクセスするAPIクライアントの基本コードです。 https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

このアプリケーションを機能させるには、コーディングを開始する前にいくつかの準備が必要です。

* Googleアナリティクスアカウント-登録すると、追跡する各Webページに配置するための「トラッカー」コードが生成されます。統計がすぐに表示されない場合があり、統計がGoogleアナリティクスダッシュボードに表示されるまでに最大24時間かかることがあります。

OAuth CLIENT_ID、CLIENT SECRET、およびEMAIL ADRESSを使用した認証（APIキー）（これは通常のメールではなく、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 Core Library
  • Google Apisクライアントライブラリ
  • Google Apis Authクライアントライブラリ
  • Google Apis Analytics.v3ライブラリ
  • Google GData Client（これは、データ、メトリック、ディメンションなどのクエリに使用されるプロパティを提供します）
  • Google GData Extensions Library
  • 分析

何かを忘れたかもしれませんが、ここに私が使用する名前空間があります：

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

最後に、これが私のコードの一部です。 Googleのコードのように、「新しいServiceAccountCredentials」を想定して新しいAnalyticsを作成しています。それが主な違いです： 。NETでGoogle Analytics APIからデータを取得、複数のメトリック？

これにより、Googleアナリティクスアカウントのデータにアクセスしてクエリを実行できます。最良の部分は、キーと資格情報によってアカウントデータに直接アクセスできるため、このためにGoogleにログインする必要がないことです。

このコードをMVCに移行します。このアナリティクスクライアントをMvcに実装する方法については、後で更新するかもしれません。

7
WhoAmI

このドキュメントでは、Google Accessトークンを取得し、それらを使用してGoogle AnalyticsデータをWebサイトに表示する方法を説明します。

例：ライブ例は

https://newtonjoshua.com

注：以下のすべての手順で同じGmailアカウントを使用してください。

ステップ1：Google Analyticsをセットアップする

以下の手順に従って、ウェブサイトにGoogle Analyticsを設定します

  1. Analyticsアカウントにサインインします。
  2. [管理者]タブを選択します。
  3. [アカウント]列のプルダウンメニューからアカウントを選択します。
  4. [プロパティ]列のドロップダウンメニューからプロパティを選択します。
  5. [プロパティ]で、[追跡情報]-> [追跡コード]をクリックします。
  6. データを収集するには、アナリティクストラッキングコードをコピーして、トラッキングするすべてのウェブページのソースコードに貼り付ける必要があります。
  7. プロパティのJavaScriptトラッキングコードスニペットを取得したら、スニペットを編集せずに正確にコピーします。
  8. 追跡するサイトのすべてのWebページで、終了</ head>タグの前に、追跡コードスニペット（変更なし、全体）を貼り付けます。
  9. アナリティクストラッキングを正常にインストールした後、トラフィック参照情報、ユーザー特性、閲覧情報などのデータがレポートに表示されるまでに最大24時間かかる場合があります

参照する：

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

ステップ2：トークンを取得する

Google Project：

Google Cloud Platformプロジェクトを作成するには、Google Developers Console（ https://console.developers.google.com ）を開き、Create Projectをクリックします。

有効化OAuth 2.0 APIアクセス：

アプリケーションは、ユーザーデータにアクセスし、他のGoogleサービスに連絡する必要があります。 OAuth 2.0を使用して、アプリAPIアクセスを許可します。

これを有効にするには、クライアントIDが必要です。

  1. Google API Console Credentialsページを開きます（ https://console.developers.google.com/apis/credentials ）。
  2. プロジェクトから、ドロップダウンからプロジェクトを選択します。
  3. クレデンシャルの作成を選択し、OAuthクライアントIDを選択します。
  4. [アプリケーションの種類]で、[Webアプリケーション]を選択し、名前を入力して、

  5. JavaScript origins、Redirect URIsを入力して制限を設定し、目的のWebサイトを指定しますデータを表示して、Createをクリックします。

  6. OAuth 2.0 client_idおよびclient_secret。UIを構成するために必要になります。

認証コードを取得：

ブラウザに入力します：

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}}？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}

更新トークンを使用して、Google APIにアクセスするためのアクセストークンを取得できます。

アクセストークンの取得：

POSTリクエストを送信し、

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

応答にaccess_tokenを含むJSONを取得します。

{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：データを取得する

Embed API：

GA Embed APIは、数分であなたのWebサイトにGAダッシュボードを簡単に作成して埋め込むことができるJavaScriptライブラリです。

https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started を参照してください。

クエリエクスプローラー：

Embed API Query Explorerにアクセスして認証する

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

データを取得するビューを選択します。

必要な指標とディメンションを選択します。

例：

国データを取得する（各国から自分のWebサイトにアクセスしているユーザーの数を知りたい）。

そのデータを取得するには、メトリックを「ユーザー」、ディメンションを「国」として選択します。

クエリの実行をクリックします。

クエリの分析データがテーブルに表示されます。

API Query URIをコピーします。そして、access_token ={{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リクエストを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/ を参照してください。

次の例では、id = 'countryChart'のdivに GeoChart を描画します。

// 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
Newton Joshua

新しい 。NET用Google APIクライアントライブラリ （現在ベータ版）を使用することをお勧めします。 Analytics API に関する情報はこちらにあります。 .NETのクライアントライブラリ（google-api-dotnet-client）は、Google Data API（google-gdata）の.NETライブラリに優先することに注意してください。

残念ながら、Googleからのサンプルコードはまだありません（ this issue を参照）が、 SOに関するこの質問 が役立つはずです。

Analyticsデータにアクセスするたびにログインしたくない場合は、OAuth 2.0認証と オフラインアクセス を使用できます。Webへの初期アクセスを許可する必要があります。ただし、これには1回ログインする必要がありますが、後で更新トークンを使用できます。

4
nwellnhof

数日間インターネットをトロールして、運のないサンプルASP.NETコードを取得しました。認証にはKoffe14のメソッドを使用し、 Linda Lawtonの優れたASP.NET分析 の例も使用しました。

私のウェブサイトにコードを投稿しました 。 MVCではありませんが、v3のGoogle APIを使用して、GoogleアナリティクスからASP.NET Webページにデータを取得する必要がある他の人々に役立つ可能性があります。

1
Myke Black

embeddedanalytics.com （免責事項-私は彼らと協力しています）をご覧ください。

これは、GA APIを学習し、それを視覚化（たとえば、グラフ/グラフ）にリンクする必要がない）を対象とするシンプルで強力なソリューションです。

基本的にグラフを定義し、グラフを表示する場所にコードのスニペットを埋め込みます。また、カスタムビルドのCMSまたは他のWebポータルに簡単に統合できるメカニズムもサポートしています。

0
M Schenkel