Sanity Google Analytics Plugin
Analytics widget and components for showing Google Anlytics data in your studio.
sanity install google-analytics
How to config
You have to setup a google API, and all your studio users need to have access to the current Google Analytics View
Setup an API
- Open the API Library in the Google API Console. If prompted, select a project or create a new one.
- Find Google Analytics Reporting API and enable it
- Open the Credentials page in the API Console.
- Click Create credentials > OAuth client ID and select the appropriate Application type.
Detailed instructions for setup Google Analytics API
Your view id
are available inside your Google Analytics.
Go to admin → View settings to find your view id
.
Add config file
Add a google-analytics-plugin.json
in your config
folder.
Dashboard widgets
If you don't have dashboard, install it with sanity install @sanity/dashboard
.
Dashboard docs
Make a config file, and add the path yo your sanity.json
Making queries
To make a query, try the Query explorer or find parameters in the Query reference
Example of Dashboard config
widgets: name: 'google-analytics' layout: width: 'large' options: title: 'Last 30 days' gaConfig: reportType: 'ga' query: dimensions: 'ga:date' metrics: 'ga:users, ga:sessions, ga:newUsers' 'start-date': '30daysAgo' 'end-date': 'yesterday' chart: type: 'LINE' options: width: '100%' name: 'google-analytics' layout: width: 'medium' options: title: 'World map' gaConfig: reportType: 'ga' query: dimensions: 'ga:country' metrics: 'ga:users' 'start-date': '30daysAgo' 'end-date': 'yesterday' chart: type: 'GEO' width: '100%'
Table of top bouncing pages
name: 'google-analytics' layout: width: 'medium' options: title: 'Top 10 bouncing blog posts' gaConfig: reportType: 'ga' query: dimensions: 'ga:pagePath' 'max-results': 10 metrics: 'ga:bounceRate, ga:bounces, ga:pageViews' sort: '-ga:bounceRate' 'start-date': '30daysAgo' 'end-date': 'yesterday' filters: 'ga:pagePath=~^/blog;ga:bounces>50' chart: type: 'TABLE' labels: 0: 'Page path' 1: 'Bounce rate' 2: 'Bounces' 3: 'Page views' options: width: '100%'
Make your own component
withAnalyticsData
By wrapping your component in withAnalyticsData
a data
-prop will be available in your plugin.
Component { const data = thisprops return <pre>JSON</pre> } MyComponent
When you use your component, you can specify what data you want.
<MyComponent config= reportType: 'ga' query: dimensions: 'ga:date' metrics: 'ga:users, ga:sessions, ga:newUsers' 'start-date': '30daysAgo' 'end-date': 'yesterday' />
Use the analytics widget in your own components
<AnalyticsWidget config= { // Do something with the selected data console // Example of finding the id based on slug and navigate to it sanityClient } reportType: 'ga' query: dimensions: 'ga:date' metrics: 'ga:users, ga:sessions' 'start-date': '30daysAgo' 'end-date': 'yesterday' chart: axes: x: 0: label: 'Date' type: 'LINE' series: 0: title: 'Users' color: '#145eda' 1: title: 'Sessions' color: '#16ae3c' />
Example of a table with top bouncing blog posts and navigate to them on click
name: 'google-analytics' layout: width: 'medium' options: title: 'Top bouncing posts' gaConfig: reportType: 'ga' { try // Find url const path = cellc0v1 // Find the ID sanityClient catch console } query: dimensions: 'ga:pagePath' 'max-results': 10 metrics: 'ga:bounceRate, ga:bounces, ga:pageViews' sort: '-ga:bounceRate' 'start-date': '30daysAgo' 'end-date': 'yesterday' filters: 'ga:pagePath=~^/blog;ga:bounces>50' chart: type: 'TABLE' options: width: '100%'