google-analytics-embed-react

google-analytics-embed-react

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

Installation

npm install google-analytics-embed-react

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 :smiley:. 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.