Skip to content

Bringing Google Analytics Embed components for your React admin panels

License

Notifications You must be signed in to change notification settings

arimacdev/google-analytics-embed-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

google-analytics-embed-react

Bringing the Google Analytics Embed Components for your ReactJS admin panels.

Installation

npm install google-analytics-embed-react

Examples

We implemented two examples to show you the usage of this library. One example is using Google Identity Service to authenticate users on frontend. Other Example is using google API client to authenticate your service account. You need to have at-least one Google Analytics view in your account to run those examples.

Frontend Authentication Example

This example is using the latest Google Identity Service to authenticate. Because recommended way is deprecated by Google (Migrate to Google Identity Services). You can find the source files for this example in the sites/react-frontend-auth folder.

Steps to run the example:-

  1. Create a project on Google API Console and create a OAuth2 client id. Download and save the JSON key file to the root folder of this project as oauth_key.json.

  2. Install all dependencies from the root folder of the project.

npm install --save-dev
  1. Build the React library.
npm run reactlib:build
  1. Run the project
npm run frontend_auth:start

Backend Authentication Example

In this example we are using the googleapis client library to authenticate from backend and sending the access token to frontend. You need a Google Service Account to run this example. You can find the source files for the backend example in the sites/express-backend and the frontend example in the sites/react-backend-auth folder.

Steps to run the example:-

  1. Create a project on Google API Console and create a Service Account for the project. You need to add the email of that service account as a Viewer for your Google Analytics view. Download and save the JSON key file to the root folder of the project as service_account_key.json.

  2. Install all dependencies from the root folder of the project.

npm install --save-dev
  1. Build the React library.
npm run reactlib:build
  1. Run the backend ExpressJS project
npm run backend:start
  1. Open another terminal and run the frontend parallely.
npm run backend_auth:start

Usage

You need to wrap your entire app with the GoogleAnalyitcsProvider component as the first step to use this library. This component will take the accessToken as the only mandatory prop. But it is also optional 😃. It means you do not need the accessToken in first rendering time. But you have to pass it later to display your graphs.

<GoogleAnalyticsProvider accessToken={myAccessToken}>
  {/* Your application components */}
</GoogleAnalyticsProvider>

Then render any chart component in your application.

<GoogleAnalyticsPieChart
    query={{
      ids, // <-- Replace with the ids value for your view.
      'start-date': '90daysAgo',
      'end-date': 'today',
      metrics:
        'ga:pageviews,ga:uniquePageviews,ga:timeOnPage,ga:bounces,ga:entrances,ga:exits',
      sort: '-ga:pageviews',
      dimensions: 'ga:pagePath',
      'max-results': 10
    }}
    width={500}
    style={{ float: 'left' }}
    pieHole={0.4}
  />

Component Reference

GoogleAnalyticsProvider

This component will load the Google platform script and authenticate yourself with the gapi.analytics namespace.

Props

Name Type Default Optional Description
accessToken string undefined No* Access token to authroize the user
onReady callback, ()=>void undefined Yes Fired once the Google platform script loaded and gapi is ready to use.
onAuthenticated callback, ()=>void undefined Yes Fired once the Google Analytics API authenticated the access token
scopes array, string[] undefined Yes Additional scopes to include
overwriteDefaultScopes boolean false Yes Overwrite the scopes passed when generating the access token with the provided scopes
children JSX.Element N/A No Child elements of the application to render inside the provider

ViewSelector

This is the react implementation of the View Selector. Users can select their Google Analytics view from the select boxes. Then you will be notified by the onChange callback.

Props

Name Type Default Optional Description
onChange callback, (string)=>void undefined Yes Fired at the component initialization time and the user changed the view. The first argument is the view id in ga:xxxxx format.
children JSX.Element undefined Yes An optional placeholder to show until the gapi is being ready
style object, React.CSSProperties undefined Yes CSS styles to pass to the container element.
className string undefined Yes Class name to pass to the container element

DataChart

GoogleAnalyticsLineChart, GoogleAnalyticsBarChart, GoogleAnalyticsColumnChart, GoogleAnalyticsGeoChart, GoogleAnalyticsPieChart , GoogleAnalyticsTable components will help you to visualize the Google Analytics Data by using the google.visualization API. All of those components extended to the same DataChart component and the props are common for all components.

Props

Name Type Default Optional Description
query object, gapi.analytics.Query N/A No Refer the Google Core Reporting API for more details about the properties and filterations.
children JSX.Element undefined Yes An optional placeholder to show until the gapi is being ready
style object, React.CSSProperties undefined Yes CSS styles to pass to the container element.
className string undefined Yes Class name to pass to the container element
onSuccess callback, (object)=>void undefined Yes Fired when the chart successfully rendered and the Reporting API call success. First argument is a response object that returning from Reporting API. Check this page for more details.
onError callback, (object)=>void undefined Yes Fired when an error occured during the rendering the chart or a error response received from the Reporting API. The first argument contains the error object. Refer this page for more details about error response object.
. . . object undefined Yes Google Chart options depending on the chart type. Refer the Google Charts Guides to get a knowledge about options needed for different chart types.

Data

This is the implementation for Data component. We implemented it as a helper method to fetch Reporting data manually.

fetchData(query: Query): Promise<SuccessResponse>

This method will return a Promise which resolve when the Reporting API returned a success response. And it will be rejected if the Reporting API returned an error response. This method will take a query as the only argument.