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

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

新規登録して質問してみよう
ただいま回答率
85.35%
GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

Google Analytics API

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

831閲覧

Reactで、Reporting API v4を用いてアナリティクスデータを表示

kaoru_tujimiya

総合スコア36

GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

Google Analytics API

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/13 08:31

編集2020/05/13 09:25

前提・実現したいこと

Reactにて、Reporting API v4を用いてアナリティクスのデータを取得して表示をさせたいです。

取得までは出来ているのですが、表示をする方法が分かりません。

後は表示させるだけなのですが、どなたかわかる方おられますでしょうか?

宜しくお願いします。

該当のソースコード

react

1import React, { useState, useEffect } from 'react' 2import { Button } from 'antd' 3 4import { useQuery } from '@apollo/react-hooks' 5import { GET_SETTING } from 'graphql/tags/Setting' 6 7const { gapi } = window 8 9const Aaa = () => { 10 const [state, setState] = useState({ 11 viewId: '', 12 clientId: '', 13 }) 14 const [signedIn, setSignedIn] = useState(false) 15 16 const { 17 data: settingData, 18 error: settingError, 19 } = useQuery(GET_SETTING, { 20 variables: { 21 values: JSON.stringify(['gaConfig']), 22 }, 23 }) 24 25 useEffect(() => { 26 if (!settingData) return 27 const { gaConfig } = JSON.parse(settingData.setting.values) 28 const { viewId, clientId } = JSON.parse(gaConfig) 29 const f = async () => { 30 setState({ 31 ...state, 32 viewId, 33 clientId, 34 }) 35 } 36 f() 37 }, [settingData]) 38 39 useEffect(() => { 40 if (!state.clientId) return 41 const f = async () => { 42 gapiLoad() 43 } 44 f() 45 }, [state.clientId]) 46 47 useEffect(() => { 48 if (!signedIn) return 49 const f = async () => { 50 let res = null 51 const arg = { 52 path: '/v4/reports:batchGet', 53 root: 'https://analyticsreporting.googleapis.com/', 54 method: 'POST', 55 body: { 56 reportRequests: [ 57 { 58 viewId: state.viewId, 59 dateRanges: [ 60 { 61 startDate: '2019-01-01', 62 endDate: 'today', 63 }, 64 ], 65 metrics: [ 66 { 67 expression: 'ga:sessions' 68 }, 69 { 70 expression: 'ga:users', 71 }, 72 { 73 expression: 'ga:pageviews', 74 }, 75 ], 76 dimensions: [ 77 { 78 name: 'ga:country', 79 }, 80 ], 81 }, 82 ], 83 }, 84 } 85 86 res = await gapiRequest(arg).catch((err) => err) 87 if (res.result.error) { 88 return 89 } 90 } 91 f() 92 }, [signedIn]) 93 94 if (settingError) { 95 const error = settingError 96 return `Error! ${error}` 97 } 98 99 const gapiLoad = async () => { 100 gapi.load('auth2', async (signin2) => { 101 gapi.signin2.render('google-signin-button', { 102 onsuccess: (res) => { 103 setSignedIn(true) 104 }, 105 onfailure: (res) => { 106 }, 107 }) 108 const res = await gapi.auth2 109 .init({ 110 client_id: state.clientId, 111 scope: 'https://www.googleapis.com/auth/analytics.readonly', 112 }) 113 .then((res) => res) 114 .catch((err) => err) 115 if (res.error) { 116 return 117 } 118 }) 119 } 120 121 const onSignIn = async () => { 122 const auth = gapi.auth2.getAuthInstance() 123 const res = await auth.signIn().catch((err) => err) 124 if (res.error) { 125 return 126 } 127 setSignedIn(true) 128 } 129 130 const onSignOut = () => { 131 const auth = gapi.auth2.getAuthInstance() 132 auth.signOut() 133 setSignedIn(false) 134 } 135 136 const gapiRequest = (arg) => 137 new Promise((resolve, reject) => { 138 gapi.client.request(arg).then( 139 (res) => { 140 resolve(res) 141 }, 142 (err) => { 143 reject(err) 144 }, 145 ) 146 }) 147 148 return ( 149 <> 150 <div id="google-signin-button"></div> 151 {!signedIn ? ( 152 <Button icon="google" onClick={onSignIn}> 153 SignIn 154 </Button> 155 ) : ( 156 <Button icon="google" onClick={onSignOut}> 157 SignOut 158 </Button> 159 )} 160 <textarea cols="80" rows="20" id="query-output"></textarea> 161 </> 162 ) 163} 164 165export default Aaa 166 167 168

試したこと

補足情報(FW/ツールのバージョンなど)

はじめてのアナリティクス Reporting API v4: ウェブ アプリケーション向け JavaScript クイックスタート

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

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

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

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

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

guest

回答1

0

取得までは出来ているのですが、表示をする方法が分かりません。

res = await gapiRequest(arg).catch((err) => err) でresに入っているのが取得したい内容だと思います。

ただこのままだと、useEffect内のffunction内のスコープの変数に入っているため、描画できないと思います。

useStateを利用し取得した表示データを格納するstateを作成して表示するのはどうでしょうか?

投稿2020/08/12 09:29

kmtr

総合スコア213

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問