

Google
analyticsの公式サイトのチュートリアル（<https://developers.google.com/analytics/devguides/config/mgmt/v3/quickstart/web-
js?hl=ja>）を試したのですが、上手く動作しません。

**【試したこと】**  
①上記公式サイトのガイドに従い、APIの有効化・クライアントIDの作成  
②公式サイトのhtmlファイル（HelloAnalytics.html）をダウンロードし、下記コードの「」部分を自分のクライアントIDに変更（'' →
'xxxxx.apps.googleusercontent.com'）  
③Apacheが起動しているvagrant環境の共有フォルダに上記hmtlファイルを置き、ブラウザで表示を確認

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Hello Analytics - A quickstart guide for JavaScript</title>
    </head>
    <body>
    
    <button id="auth-button" hidden>Authorize</button>
    
    <h1>Hello Analytics</h1>
    
    <textarea cols="80" rows="20" id="query-output"></textarea>
    
    <script>
    
      // Replace with your client ID from the developer console.
      var CLIENT_ID = '<YOUR_CLIENT_ID>';
    
      // Set authorized scope.
      var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];
    
      function authorize(event) {
        // Handles the authorization flow.
        // `immediate` should be false when invoked from the button click.
        var useImmdiate = event ? false : true;
        var authData = {
          client_id: CLIENT_ID,
          scope: SCOPES,
          immediate: useImmdiate
        };
    
        gapi.auth.authorize(authData, function(response) {
          var authButton = document.getElementById('auth-button');
          if (response.error) {
            authButton.hidden = false;
          }
          else {
            authButton.hidden = true;
            queryAccounts();
          }
        });
      }
    
    function queryAccounts() {
      // Load the Google Analytics client library.
      gapi.client.load('analytics', 'v3').then(function() {
    
        // Get a list of all Google Analytics accounts for this user
        gapi.client.analytics.management.accounts.list().then(handleAccounts);
      });
    }
    
    function handleAccounts(response) {
      // Handles the response from the accounts list method.
      if (response.result.items && response.result.items.length) {
        // Get the first Google Analytics account.
        var firstAccountId = response.result.items[0].id;
    
        // Query for properties.
        queryProperties(firstAccountId);
      } else {
        console.log('No accounts found for this user.');
      }
    }
    
    function queryProperties(accountId) {
      // Get a list of all the properties for the account.
      gapi.client.analytics.management.webproperties.list(
          {'accountId': accountId})
        .then(handleProperties)
        .then(null, function(err) {
          // Log any errors.
          console.log(err);
      });
    }
    
    function handleProperties(response) {
      // Handles the response from the webproperties list method.
      if (response.result.items && response.result.items.length) {
    
        // Get the first Google Analytics account
        var firstAccountId = response.result.items[0].accountId;
    
        // Get the first property ID
        var firstPropertyId = response.result.items[0].id;
    
        // Query for Views (Profiles).
        queryProfiles(firstAccountId, firstPropertyId);
      } else {
        console.log('No properties found for this user.');
      }
    }
    
    function queryProfiles(accountId, propertyId) {
      // Get a list of all Views (Profiles) for the first property
      // of the first Account.
      gapi.client.analytics.management.profiles.list({
          'accountId': accountId,
          'webPropertyId': propertyId
      })
      .then(handleProfiles)
      .then(null, function(err) {
          // Log any errors.
          console.log(err);
      });
    }
    
    function handleProfiles(response) {
      // Handles the response from the profiles list method.
      if (response.result.items && response.result.items.length) {
        // Get the first View (Profile) ID.
        var firstProfileId = response.result.items[0].id;
    
        // Query the Core Reporting API.
        queryCoreReportingApi(firstProfileId);
      } else {
        console.log('No views (profiles) found for this user.');
      }
    }
    
    function queryCoreReportingApi(profileId) {
      // Query the Core Reporting API for the number sessions for
      // the past seven days.
      gapi.client.analytics.data.ga.get({
        'ids': 'ga:' + profileId,
        'start-date': '7daysAgo',
        'end-date': 'today',
        'metrics': 'ga:sessions'
      })
      .then(function(response) {
        var formattedJson = JSON.stringify(response.result, null, 2);
        document.getElementById('query-output').value = formattedJson;
      })
      .then(null, function(err) {
          // Log any errors.
          console.log(err);
      });
    }
    
      // Add an event listener to the 'auth-button'.
      document.getElementById('auth-button').addEventListener('click', authorize);
    </script>
    
    <script src="https://apis.google.com/js/client.js?onload=authorize"></script>
    
    </body>
    </html>
    
[/code]

**【問題点】**

[code]

        // Handles the authorization flow.
        // `immediate` should be false when invoked from the button click.
        var useImmdiate = event ? false : true;
        var authData = {
          client_id: CLIENT_ID,
          scope: SCOPES,
          immediate: useImmdiate
        };
    
        gapi.auth.authorize(authData, function(response) {
          var authButton = document.getElementById('auth-button');
          if (response.error) {
            authButton.hidden = false;
          }
          else {
            authButton.hidden = true;
            queryAccounts();
          }
        });
      }
    
[/code]

上記の認証部分？が上手くいっていないのか、本来であれば表示されるはずの「Authorize」ボタンが表示されない。  
デベロッパーツールで`<button id="auth-button" hidden>Authorize</button>`の「hidden」を削除して  
ボタンを押すとエラー画面が表示される

↓エラー画面の内容です

[code]

    400. That’s an error.
    
    Error: invalid_request
    
    Permission denied to generate login hint for target domain.
    
    Request Details
    response_type=permission id_token
    scope=https://www.googleapis.com/auth/analytics.readonly
    openid.realm=
    redirect_uri=storagerelay://http/192.168.33.12?id=auth219779
    client_id=xxxxx.apps.googleusercontent.com
    ss_domain=http://192.168.33.12
    gsiwebsdk=shim
    That’s all we know.
    
[/code]

**【解決したいこと】**  
①このサンプルファイルのエラーを発見、解消し任意のデータを取得したい。  
②このサンプルファイルを活用して、google realtime reporting
apiを使って自分のwebサービスのTOPページに「現在○人が閲覧中」というアクティブユーザーの数値をwebサービス閲覧者向けに表示させたい。（スクリプトはjqueryで記述予定）（※）

※まずはサンプルファイルが動かない理由をご教示いただきたいです。  
その上で可能であれば、「そもそもこのサンプルを活用することで上記②のような処理は行えるのか」「行えるのであればどのような処理を書いていけばいいのか」をご教示いただけると大変助かります。

よろしくお願いいたします。

**※8/5 19:30追記**  
shingo.nakanishi 様の回答のおかげで「Authorize」ボタンを表示させることができました。

◎表示方法

[code]

    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: useImmdiate
    };
    
[/code]

上記部分を

[code]

    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: false
    };
    
[/code]

に変更することでボタンが表示されました。

しかし、ボタンクリック後のエラーは依然解消されていない状況です。  
[![エラー画面のスクリーンショット](https://i.stack.imgur.com/4hsNJ.png)](https://i.stack.imgur.com/4hsNJ.png)  
OAuth Errorとあるのでデータ取得以前の認証部分が正しく設定されていないとは推測できますが、具体的に訂正すべき箇所がわかりません。

引き続きご回答をお待ちしています。  
よろしくお願いいたします。


CC BY-SA 4.0
2019-08-04T12:30:37.220
57161
2019-08-05T10:53:35.283
2019-08-05T10:53:35.283
34569
34569
question
javascript oauth google-api google-analytics-api
Google Analytics API のチュートリアルが動かない


>   400. That’s an error.
>

>
> Error: invalid_request
>
> Permission denied to generate login hint for target domain.

については、

おそらく

<https://stackoverflow.com/questions/36020374/google-permission-denied-to-
generate-login-hint-for-target-domain-not-on-localh>

の回答である

<https://stackoverflow.com/questions/36020374/google-permission-denied-to-
generate-login-hint-for-target-domain-not-on-localh/36162748#36162748>

が役立ちそうです。

> Okay, I figured this out. I was using an IP address (as in  
>  "<http://175.132.64.120>") for the redirect uri, as this was a test site  
>  on the live server, and Google only accepts actual urls (as in  
>  "<http://mycompany.com>" or "<http://localhost>") as redirect uris.
>
> Which, you know, THEY COULD HAVE SAID SOMEWHERE IN THE DOCUMENTATION,  
>  but whatever.

（拙訳)

> わかりました。私はリダイレクトにテストサイトであるIPアドレス（"<http://175.132.64.120>"）を使っていました。  
>  Googleは実際のURIのみリダイレクトに許可していました（たとえば "<http://mycompany.com>" や  
>  "<http://localhost>"）。
>
> こんなのドキュメントのどこに書いてあるっていうんだい！？

ということで、

`redirect_uri=storagerelay://http/192.168.33.12?id=auth219779`

とIPアドレス直打ちで登録なさっていると思われるところを、名前をつけていないとエラーとなるようです。

* * *

**補足**

> 上記の認証部分？が上手くいっていないのか、本来であれば表示されるはずの「Authorize」ボタンが表示されない。

については質問にコメントした通り、`response.error` の内容を見れば、より詳しいヒントが`error`に入っているかもしれません。

**追記**

> gapi.auth.authorize(authData,
> function(response)関数内にconsole.log(response.error)を記述し、デベロッパーツールで確認するとimmediate_failedという一言だけでした、、、

となると

<https://stackoverflow.com/questions/43627474/immediate-failed-error-in-
google-analytics>

のコメントにある。

> Did you tried with immediate: false ? – Alessandro Apr 26 '17 at 7:21
>
> Thanks!! it works! – oihi08 Apr 26 '17 at 7:29

の部分が役に立ちそうです。

（拙訳)

> immediate: false は試しました？
>
> ありがとう！！動きました！

ご自身がチュートリアルサイトから引用されているソースを見てみると、

[code]

    // `immediate` should be false when invoked from the button click.
    var useImmdiate = event ? false : true;
    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: useImmdiate
    };
    
[/code]

となっている部分があります。

> `immediate` should be false when invoked from the button click.

（拙訳)

> ボタンクリックから呼び出すときはfalseにしてください。

ですので、

[code]

    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immediate: false
    };
    
[/code]

にすると、ボタンが出現すると考えられます。


CC BY-SA 4.0
2019-08-04T13:44:08.067
57162
2019-08-05T05:07:53.417
2019-08-05T05:07:53.417
9008
9008
57161
answer