質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google Analytics API

Google Analytics APIは、アクセス解析機能が行える API(Application Programming Interface)です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

2300閲覧

googleアナリティクスのReal Time Reporting APIを使って、Webサービスのページ上に「現在の閲覧人数」を表示させたい

GenkiSugiyama

総合スコア86

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google Analytics API

Google Analytics APIは、アクセス解析機能が行える API(Application Programming Interface)です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

2クリップ

投稿2019/08/03 04:13

編集2022/01/12 10:55

WebサービスのTOPページに「現在○人が閲覧中」のようなアクティブユーザーの数を表示する機能をGoogle APIを用いて実装したいと考えています。

こちらの記事のリンク先のページようなイメージです。

api使用のためにプロジェクトの認証情報などを作成し、公式リファレンスのテストページ?にて必要なパラメーターを入力し実行すると「"totalsForAllResults":{"rt:activeUsers":"6"}」などリクエストが通り、データが取れることを確認済みですが、色々と知識不足すぎて実際にWebサービスで実装する際のリクエスト作成の方法が分かりません。
まずはこちらの記事(http://fujiringo.sakura.ne.jp/hayabusa/blog/code/2015/03/google-analytics-api-sample.html)を参考に公式のjavascriptのライブラリを使ってデータを取得しようとライブラリをダウンロードし、client-idの情報などを自分のものに変更して動かそうとしたのですが、うまく動作しませんでした。(400 error Error: invalid_request Permission denied to generate login hint for target domain.)

①ライブラリがうまく動作しない原因
②実際のWebページに「現在の閲覧者数の取得」を組み込む際の方法(jqueryで記述したいです。)
上記二点についてご教授いただけますと大変助かります。
よろしくお願いいたします。

※コード追加のご指摘をいただいたので記載いたします。

auth_util.js

1// Copyright 2012 Google Inc. All Rights Reserved. 2 3/* Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16/** 17 * @fileoverview Utility for handling authorization and updating the UI 18 * accordingy. 19 * @author api.nickm@gmail.com (Nick Mihailovski) 20 */ 21 22/** 23 * Authorization information. This should be obtained through the Google APIs 24 * developers console. https://code.google.com/apis/console/ 25 * Also there is more information about how to get these in the authorization 26 * section in the Google JavaScript Client Library. 27 * https://code.google.com/p/google-api-javascript-client/wiki/Authentication 28 */ 29var clientId = 'xxxxxxxxxxxxxxx'; 30var apiKey = 'xxxxxxxxxxxxxxx'; 31var scopes = 'https://www.googleapis.com/auth/analytics.readonly'; 32 33/** 34 * Callback executed once the Google APIs Javascript client library has loaded. 35 * The function name is specified in the onload query parameter of URL to load 36 * this library. After 1 millisecond, checkAuth is called. 37 */ 38function handleClientLoad() { 39 gapi.client.setApiKey(apiKey); 40 window.setTimeout(checkAuth, 1); 41} 42 43/** 44 * Uses the OAuth2.0 clientId to query the Google Accounts service 45 * to see if the user has authorized. Once complete, handleAuthResults is 46 * called. 47 */ 48function checkAuth() { 49 gapi.auth.authorize({ 50 client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); 51} 52 53/** 54 * Handler that is called once the script has checked to see if the user has 55 * authorized access to their Google Analytics data. If the user has authorized 56 * access, the analytics api library is loaded and the handleAuthorized 57 * function is executed. If the user has not authorized access to their data, 58 * the handleUnauthorized function is executed. 59 * @param {Object} authResult The result object returned form the authorization 60 * service that determine whether the user has currently authorized access 61 * to their data. If it exists, the user has authorized access. 62 */ 63function handleAuthResult(authResult) { 64 if (authResult && !authResult.error) { 65 gapi.client.load('analytics', 'v3', handleAuthorized); 66 } else { 67 handleUnauthorized(); 68 } 69} 70 71/** 72 * Updates the UI once the user has authorized this script to access their 73 * data. This changes the visibiilty on some buttons and adds the 74 * makeApiCall click handler to the run-demo-button. 75 */ 76function handleAuthorized() { 77 var authorizeButton = document.getElementById('authorize-button'); 78 var runDemoButton = document.getElementById('run-demo-button'); 79 80 authorizeButton.style.visibility = 'hidden'; 81 runDemoButton.style.visibility = ''; 82 runDemoButton.onclick = makeApiCall; 83 outputToPage('Click the Run Demo button to begin.'); 84} 85 86/** 87 * Updates the UI if a user has not yet authorized this script to access 88 * their Google Analytics data. This function changes the visibility of 89 * some elements on the screen. It also adds the handleAuthClick 90 * click handler to the authorize-button. 91 */ 92function handleUnauthorized() { 93 var authorizeButton = document.getElementById('authorize-button'); 94 var runDemoButton = document.getElementById('run-demo-button'); 95 96 runDemoButton.style.visibility = 'hidden'; 97 authorizeButton.style.visibility = ''; 98 authorizeButton.onclick = handleAuthClick; 99 outputToPage('Please authorize this script to access Google Analytics.'); 100} 101 102/** 103 * Handler for clicks on the authorization button. This uses the OAuth2.0 104 * clientId to query the Google Accounts service to see if the user has 105 * authorized. Once complete, handleAuthResults is called. 106 * @param {Object} event The onclick event. 107 */ 108function handleAuthClick(event) { 109 gapi.auth.authorize({ 110 client_id: clientId, scope: scopes, immediate: false}, handleAuthResult); 111 return false; 112} 113

hello_analytics_api_v3.html

1<!DOCTYPE> 2<html> 3<head> 4 <title>Hello Google Analytics API</title> 5 <link rel="stylesheet" type="text/css" 6 href="//fonts.googleapis.com/css?family=Cantarell|Inconsolata"> 7 <link rel="stylesheet" type="text/css" 8 href="pretty.css"> 9</head> 10<body> 11<h1>Hello Google Analytics API</h1> 12<p>This page demonstrates how to query the Google Analytics API version 3 using the 13 <a href="https://code.google.com/p/google-api-javascript-client/"> 14 Google API Javascript Client Library</a>.</p> 15 16<p>The demo traverses the 17 <a href="http://code.google.com/apis/analytics/docs/mgmt/v3/mgmtGettingStarted.html"> 18 Management API</a> to retrieve the first profile ID for the 19 authorized user. This profile ID is then used with the 20 <a href="http://code.google.com/apis/analytics/docs/gdata/v3/gdataGettingStarted.html"> 21 Core Reporting API</a> to retrieve the top 25 organic search terms by visits.</p> 22 23<p>To learn how this works, read the detailed comments in the 24 <a href="hello_analytics_api_v3.js">JavaScript source code</a>.</p> 25 26<p>To run the demo:</p> 27<ol> 28 <li>Click the authorize button to grant access to your Google Analytics data.</li> 29 <li>Click the run demo button to start the demo.</li> 30</ol> 31 32<hr> 33<button id="authorize-button" style="visibility: hidden">Authorize</button> 34<button id="run-demo-button" >Run Demo</button> 35<br> 36<hr> 37<div id="output">Loading, one sec....</div> 38 39<script src="auth_util.js"></script> 40<script src="hello_analytics_api_v3.js"></script> 41<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script> 42 43</body> 44</html> 45

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/08/03 04:34

あなたがうまく動作しなかったコードを 質問文に記載してください。(apiKeyなどはxxxxxxでよいです)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問