react-analytics-widget
Embed Google Analytics widgets in your React applications.
- The
GoogleProvider
container ensure user is logged on analytics - The
GoogleDataChart
component display any DataChart configuraton
Demo : https://revolunet.github.io/react-analytics-widget
Requirements
You need to create a OAUTH client id in the google developer console and provide an analytic view ID. Alternatively you can use server-side authentication tokens. You can find more info in this example.
Note:
If you provide values for both the accessToken
and the clientId
props, the latter will be ignored.
Also, add the Google SDK at the top of your page
; { g = wgapi || wgapi = {} ganalytics = q: { thisq } js = d fjs = d0 jssrc = "https://apis.google.com/js/platform.js" fjsparentNode js { g }}window document "script"
Usage
OAUTH authentication
const CLIENT_ID = 'x-x--x---x---x-xx--x-apps.googleusercontent.com'; // graph 1 configconst last30days = reportType: "ga" query: dimensions: "ga:date" metrics: "ga:pageviews" "start-date": "30daysAgo" "end-date": "yesterday" chart: type: "LINE" options: // options for google charts // https://google-developers.appspot.com/chart/interactive/docs/gallery title: "Last 30 days pageviews" // graph 2 configconst last7days = reportType: "ga" query: dimensions: "ga:date" metrics: "ga:pageviews" "start-date": "7daysAgo" "end-date": "yesterday" chart: type: "LINE" // analytics views IDconst views = query: ids: "ga:87986986" const Example = <GoogleProvider clientId=CLIENT_ID> <GoogleDataChart views=views config=last30days /> <GoogleDataChart views=views config=last7days /> </GoogleProvider>
Server-side token authentication
; // graph 1 configconst last30days = reportType: "ga" query: dimensions: "ga:date" metrics: "ga:pageviews" "start-date": "30daysAgo" "end-date": "yesterday" chart: type: "LINE" options: // options for google charts // https://google-developers.appspot.com/chart/interactive/docs/gallery title: "Last 30 days pageviews" // graph 2 configconst last7days = reportType: "ga" query: dimensions: "ga:date" metrics: "ga:pageviews" "start-date": "7daysAgo" "end-date": "yesterday" chart: type: "LINE" // analytics views IDconst views = query: ids: "ga:87986986" { const request = 'https://yourserver.example/auth/ganalytics/getToken' method: 'GET' ; ; } <GoogleProvider accessToken=thisstatetoken> <GoogleDataChart views=views config=last30days /> <GoogleDataChart views=views config=last7days /> </GoogleProvider>