I was searching for
Google Analytics API in .Net to display the core reporting information in my website from Analytics. I found the
ga-ez-dash library (Google Analytics Easy Dashboard Javascript Library)
What is ga-ez-dash library?
This library is designed to create an easy way to build a custom Google Analytics Dashboard on your own page. The library is built on top of the
Google Analytics Core Reporting and
Chart Tools APIs and does all the heavy lifting of handling authorization, issuing queries, and transforming the results into pretty visualizations
But, at this time, each user who views a dashboard must have access to the Google Analytics account from which the dashboard data is generated. Currently you can’t create a dashboard for users who do not have access to your Google Analytics data. Getting Started To get started you need to perform the following 3 steps:
- Register for a developer key
- Copy & Paste the code to a web page
- Configure the chart
All applications that use the Google Analytics API must be registered through the
Google APIs Console. When you register in the console, you will create a new project and configure the settings to work with this library. Once configured, the console will provide you with a few values that you need in the configuration step. Here's exactly what you need to do
Go to the GoogleAPIs Console
To create a new APIs project and manage the API usage, click on
Create Project button
Select services for the project. (
Services -> Analytics API)
Next you will need to configure this project to use
OAuth 2.0 authentication. Just like you need to login to your Google Analytics account to view your data, you will need to authorize this dashboard application to view your data. Authorization is handled through the OAuth2.0 protocol.
Getting your Client ID and API Key
In the Google APIs Console, for the project you just created:
- Navigate on the left panel to API Access
- Click the big blue Create An OAuth 2.0 Client ID button
- Add a cool product name and logo, then click Next
- Under
- Application Type – select Web Application
- Your site or hostname – add the domain name or host name from where this script will be served.
- Click Create Client ID
Note: This dashboard library will only work if the script the page is on is hosted from a web server. The domain (hostname) of the web server must match the values in the JavaScript origins field. This library will not work if it is hosted from a file.
Once complete, your project should have values (Branding information,
Client ID for web applications and Simple API Access) as follows
Once compete, time to copy and paste the code to a web page!.
- Copy the library and save to your server
- Copy and paste the following code into a new web page (In MVC, it's View)
<!DOCTYPE>
<html>
<head><title>GA Dash Demo</title></head>
<body>
<!-- Add Google Analytics authorization button -->
<button id="authorize-button" style="visibility: hidden">
Authorize Analytics</button>
<!-- Div element where the Line Chart will be placed -->
<div id='line-chart-example'></div>
<!-- Load all Google JS libraries -->
<script src="https://www.google.com/jsapi"></script>
<script src="gadash-1.0.js"></script>
<script src="https://apis.google.com/js/client.js?onload=gadashInit"></script>
<script>
// Configure these parameters before you start.
var API_KEY = 'Enter Your API Key Here';
var CLIENT_ID = 'Enter Your Client ID Here';
var TABLE_ID = 'Enter your Table ID here';
// Format of table ID is ga:xxx where xxx is the profile ID.
gadash.configKeys({
'apiKey': API_KEY,
'clientId': CLIENT_ID
});
// Create a new Chart that queries visitors for the last 30 days and plots
// visualizes in a line chart.
var chart1 = new gadash.Chart({
'type': 'LineChart',
'divContainer': 'line-chart-example',
'last-n-days':30,
'query': {
'ids': TABLE_ID,
'metrics': 'ga:visitors',
'dimensions': 'ga:date'
},
'chartOptions': {
height:600,
title: 'Visits in January 2011',
hAxis: {title:'Date'},
vAxis: {title:'Visits'},
curveType: 'function'
}
}).render();
</script>
</body>
</html>
Once complete, save this file to your server.
Configuration
Once you've copied and pasted the code, you just need to configure the chart to work with your data.
Replace the
API_KEY and
CLIENT_ID values with the respective
API Key and
Client ID that you created in the Google APIs console during the first step.
Replace the
TABLE_ID parameter with
ga: + your profile ID. Finding your profile ID is easy. Just log into Google Analytics and navigate to the profile you want to use. After logging in, there will be a profile ID at the end of the URL in the address bar after the 'p'. This is your profile ID. Example: p'XXXX'.
Or you can find it in Google Analytics under Admin > Profile > Profile Settings
Use
ga: + your profile ID to get your Table ID. So if your profile ID was
8325, your table id would be
ga:8325.
Save the file. You're done!
Usage
Navigate your browser to the URL this script is hosted on. The script will:
- Display a button asking for you to authorize
- Click the button. You will be prompted to login and authorize access
- Once complete, the script will retrieve visitors over the past 30 days, and display the data in a pretty line chart
Result
Result will look like as follows:
You can customize your report using
Chart Method Reference
