Friday, November 23, 2012

Google Analytics API - JavaScript and MVC3

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:
  1. Register for a developer key
  2. Copy & Paste the code to a web page
  3. 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:
  1. Navigate on the left panel to API Access
  2. Click the big blue Create An OAuth 2.0 Client ID button
  3. Add a cool product name and logo, then click Next
  4. Under
    1. Application Type – select Web Application
    2. Your site or hostname – add the domain name or host name from where this script will be served.
  5. 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!.

  1. Copy the library and save to your server
  2. Copy and paste the following code into a new web page (In MVC, it's View)

<head><title>GA Dash Demo</title></head>

  <!-- 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=""></script>
  <script src="gadash-1.0.js"></script>
  <script src=""></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.

      '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',
      'query': {
        'ids': TABLE_ID,
        'metrics': 'ga:visitors',
        'dimensions': 'ga:date'
      'chartOptions': {
        title: 'Visits in January 2011',
        hAxis: {title:'Date'},
        vAxis: {title:'Visits'},
        curveType: 'function'
Once complete, save this file to your server.


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!


Navigate your browser to the URL this script is hosted on. The script will:
  1. Display a button asking for you to authorize
  2. Click the button. You will be prompted to login and authorize access
  3. Once complete, the script will retrieve visitors over the past 30 days, and display the data in a pretty line chart


Result will look like as follows:

You can customize your report using Chart Method Reference

1 comment:

  1. I rarely leave responses, however after reading through a lot of responses
    on "Google Analytics API - JavaScript and MVC3". I actually do have a few
    questions for you if you do not mind. Could it be simply me or do a few
    of these responses look like they are left by brain dead individuals?
    :-P And, if you are writing at other online social sites,
    I would like to keep up with you. Would you post a list of every
    one of your social sites like your twitter
    feed, Facebook page or linkedin profile?
    Also visit my homepage ...