Wednesday, November 28, 2012

Merge JS files using JMerge

Do you have a website with multiple JavaScript files? Each one of these files adds an HTTP request to your pages, effectively increasing the load time. JMerge is a simple web application that fetches and combines JavaScript files from a URL to reduce the number of HTTP requests. In essence, it does the work for you. All you do is type in a URL, pick the files you want to combine, and voila! Try it out for yourself:

Tuesday, November 27, 2012

Google PageSpeed

Make the Web Faster

Fast and optimized pages lead to higher visitor engagement, retention, and conversions. The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.



What is PageSpeed Insights?

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

PageSpeed Insights Browser Extensions

PageSpeed Insights is available as an open-source browser extension for Google Chrome and Firefox. Webmasters and web developers can use PageSpeed Insights to evaluate the performance of their web pages and to get suggestions on how to improve them.

PageSpeed Insights performs several tests on a site's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run PageSpeed Insights on their pages get a score for each page, as well as suggestions on how to improve its performance. By following the suggestions you can make your site faster, keep Internet users engaged with your site, reduce your bandwidth and hosting costs and improve the web!

Google Chrome

In Chrome, PageSpeed Insights extension runs in the Chrome Developer Tools.
Supports Mac OS X (x86), Linux (x86 and x86-64), and Windows (XP and up)
Install Chrome Extension

Firefox

In Firefox (4.0 and higher), PageSpeed Insights extension runs in the Firebug web development tool (1.7 and higher)
Supports Mac OS X (x86 and x86-64), Linux (x86 and x86-64), and Windows (XP and up).
Install Firefox Extension

PageSpeed Insights extensions periodically checks for updates. If an update is available, the browser will give you the option of downloading the newer version of PageSpeed Insights to get the latest updates to the rules and functionality that is added by the community. 

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)


<!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:
  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

Result will look like as follows:


You can customize your report using Chart Method Reference