Google Analytics API のチュートリアルが動かない

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

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

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Hello Analytics - A quickstart guide for JavaScript</title>
6</head>
7<body>
8
9<button id="auth-button" hidden>Authorize</button>
10
11<h1>Hello Analytics</h1>
12
13<textarea cols="80" rows="20" id="query-output"></textarea>
14
15<script>
16
17  // Replace with your client ID from the developer console.
18  var CLIENT_ID = '<YOUR_CLIENT_ID>';
19
20  // Set authorized scope.
21  var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];
22
23  function authorize(event) {
24    // Handles the authorization flow.
25    // `immediate` should be false when invoked from the button click.
26    var useImmdiate = event ? false : true;
27    var authData = {
28      client_id: CLIENT_ID,
29      scope: SCOPES,
30      immediate: useImmdiate
31    };
32
33    gapi.auth.authorize(authData, function(response) {
34      var authButton = document.getElementById('auth-button');
35      if (response.error) {
36        authButton.hidden = false;
37      }
38      else {
39        authButton.hidden = true;
40        queryAccounts();
41      }
42    });
43  }
44
45function queryAccounts() {
46  // Load the Google Analytics client library.
47  gapi.client.load('analytics', 'v3').then(function() {
48
49    // Get a list of all Google Analytics accounts for this user
50    gapi.client.analytics.management.accounts.list().then(handleAccounts);
51  });
52}
53
54function handleAccounts(response) {
55  // Handles the response from the accounts list method.
56  if (response.result.items && response.result.items.length) {
57    // Get the first Google Analytics account.
58    var firstAccountId = response.result.items[0].id;
59
60    // Query for properties.
61    queryProperties(firstAccountId);
62  } else {
63    console.log('No accounts found for this user.');
64  }
65}
66
67function queryProperties(accountId) {
68  // Get a list of all the properties for the account.
69  gapi.client.analytics.management.webproperties.list(
70      {'accountId': accountId})
71    .then(handleProperties)
72    .then(null, function(err) {
73      // Log any errors.
74      console.log(err);
75  });
76}
77
78function handleProperties(response) {
79  // Handles the response from the webproperties list method.
80  if (response.result.items && response.result.items.length) {
81
82    // Get the first Google Analytics account
83    var firstAccountId = response.result.items[0].accountId;
84
85    // Get the first property ID
86    var firstPropertyId = response.result.items[0].id;
87
88    // Query for Views (Profiles).
89    queryProfiles(firstAccountId, firstPropertyId);
90  } else {
91    console.log('No properties found for this user.');
92  }
93}
94
95function queryProfiles(accountId, propertyId) {
96  // Get a list of all Views (Profiles) for the first property
97  // of the first Account.
98  gapi.client.analytics.management.profiles.list({
99      'accountId': accountId,
100      'webPropertyId': propertyId
101  })
102  .then(handleProfiles)
103  .then(null, function(err) {
104      // Log any errors.
105      console.log(err);
106  });
107}
108
109function handleProfiles(response) {
110  // Handles the response from the profiles list method.
111  if (response.result.items && response.result.items.length) {
112    // Get the first View (Profile) ID.
113    var firstProfileId = response.result.items[0].id;
114
115    // Query the Core Reporting API.
116    queryCoreReportingApi(firstProfileId);
117  } else {
118    console.log('No views (profiles) found for this user.');
119  }
120}
121
122function queryCoreReportingApi(profileId) {
123  // Query the Core Reporting API for the number sessions for
124  // the past seven days.
125  gapi.client.analytics.data.ga.get({
126    'ids': 'ga:' + profileId,
127    'start-date': '7daysAgo',
128    'end-date': 'today',
129    'metrics': 'ga:sessions'
130  })
131  .then(function(response) {
132    var formattedJson = JSON.stringify(response.result, null, 2);
133    document.getElementById('query-output').value = formattedJson;
134  })
135  .then(null, function(err) {
136      // Log any errors.
137      console.log(err);
138  });
139}
140
141  // Add an event listener to the 'auth-button'.
142  document.getElementById('auth-button').addEventListener('click', authorize);
143</script>
144
145<script src="https://apis.google.com/js/client.js?onload=authorize"></script>
146
147</body>
148</html>

【問題点】

function
1    // Handles the authorization flow.
2    // `immediate` should be false when invoked from the button click.
3    var useImmdiate = event ? false : true;
4    var authData = {
5      client_id: CLIENT_ID,
6      scope: SCOPES,
7      immediate: useImmdiate
8    };
9
10    gapi.auth.authorize(authData, function(response) {
11      var authButton = document.getElementById('auth-button');
12      if (response.error) {
13        authButton.hidden = false;
14      }
15      else {
16        authButton.hidden = true;
17        queryAccounts();
18      }
19    });
20  }

上記の認証部分？が上手くいっていないのか、本来であれば表示されるはずの「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で記述予定）（※）

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

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