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
あなたの回答
tips
プレビュー