0

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ファイルを置き、ブラウザで表示を確認

<!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>

【問題点】

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

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

↓エラー画面の内容です

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.

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

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

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

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

◎表示方法

var authData = {
  client_id: CLIENT_ID,
  scope: SCOPES,
  immediate: useImmdiate
};

上記部分を

var authData = {
  client_id: CLIENT_ID,
  scope: SCOPES,
  immediate: false
};

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

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

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

2
  • もし、推測どおり gapi.auth.authorize(authData, function(response)関数 で、authButton.hidden = false; が実行されているのであれば、response.errorにエラーの内容が入っているはずなので、response.errorの内容を質問を編集して追記してください。 Commented 2019年8月4日 14:05
  • マルチポスト teratail.com/questions/204332
    – htb
    Commented 2019年8月26日 4:06

1 件の回答 1

1
  1. 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 は試しました?

ありがとう!!動きました!

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

// `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
};

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

immediate should be false when invoked from the button click.

(拙訳)

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

ですので、

var authData = {
  client_id: CLIENT_ID,
  scope: SCOPES,
  immediate: false
};

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

7
  • コメントいただきありがとうございます。 クライアントIDが間違っていたのか、クライアントID入力箇所を訂正すると「Authorize」ボタンが表示されました。 ただ、ボタンを押した後の動きは依然エラーのままです。gapi.auth.authorize(authData, function(response)関数内にconsole.log(response.error)を記述し、デベロッパーツールで確認するとimmediate_failedという一言だけでした、、、
    – genki
    Commented 2019年8月5日 4:47
  • >redirect_uri=storagerelay://http/192.168.33.12?id=auth219779 >とIPアドレス直打ちで登録なさっていると思われるところを、名前をつけていないとエラーとなるようです。 こちらですが、googleAPIのダッシュボードでは、リダイレクトURIはチュートリアル?に記述があった「localhost:8080/oauth2callback」に設定しており他は触っておりません。。 HelloAnalytics.htmlのソース内にもURIの設定箇所が無いと思われますがどの部分を修正すれば良いのでしょうか?
    – genki
    Commented 2019年8月5日 4:53
  • 上記チュートリアルとはこちらのページになります。(developers.google.com/analytics/devguides/config/mgmt/v3/…クライアント ID の作成 [認証情報] ページから以下の手順を実行します。 1. [認証情報を作成] をクリックし、[OAuth クライアント ID] を選択します。 2. [アプリケーションの種類] で [ウェブ アプリケーション] を選択します。 3. 認証情報の名前を指定します。 4. [承認済みの JavaScript 生成元] を http://localhost:8080 に設定します。 5. [承認済みのリダイレクト URI] を http://localhost:8080/oauth2callback に設定します。 6. [作成] をクリックします。
    – genki
    Commented 2019年8月5日 4:59
  • @genki immediate_failed について回答に追記しておきました。 Commented 2019年8月5日 5:09
  • @shingo.nakahashi 様 早速追記いただきありがとうございます。 ご指摘の通り、immediate: useImmdiateimmediate: false にするとボタンが表示されました。 しかし押した後の動作は初めに投稿したエラー画面と全く同じ内容のままとなっています。 リダイレクトURIの設定は上記コメントの通り公式サイトを参考に「localhost:8080/oauth2callback」にしています。
    – genki
    Commented 2019年8月5日 6:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。