Quick Start - Google Analytics with Google Gadgets

Google Gadgets display data in a variety of formats including charts and maps, and can easily be added to existing web pages.

Follow these steps to begin using Google Gadgets to display your Google Analytics data.

Click here to see the web page built with this quick start.

Setup step: Associate your ShufflePoint account with Google Analytics

If you have not already done so, click the Google Analytics link on the right side of the “My ShufflePoint” page, and follow Google's instructions. Upon granting access and returning to the ShufflePoint site, you should see a list of Google Analytics accounts and profiles which may now be queried using ShufflePoint.
View the tutorial movie.

Step 1: Open the Analytics Query Tool

Log into ShufflePoint, and click “Launch Analytics Query Tool” on the “My ShufflePoint” page.

Step 2: Create a Query

Click on the “Query” tab in the center panel and then copy the following query and paste it into the “Query” area. Once the query has been pasted, click the “Get Results” button on the right.

SELECT
   METRICS ga:uniquePageviews, ga:visits ON COLUMNS
   DIMENSIONS sp:countryCode ON ROWS 
FROM default
WHERE
   TIMEFRAME default
   FILTER ga:country != "United States"
   

The query tool should appear as follows after you click the “Get Results” button.

Step 3: Generate Gadget Data Source URL

Click on the “Google Gadgets” tab and then click the “Generate” button in the lower right of the panel.

The query tool should appear as follows after you click the “Generate” button.
Click the “Copy to Clipboard” button in preparation for pasting the generated URL into the Google Gadget.

Step 4: Search for Gadget

Open the Google Gadget Search Page and type “heat map” into the search area.

The page should appear as follows. Click the “Add it to your webpage” button next to the Heat Map described as the Official Google Gadget.

Step 5: Configure Google Gadget

Paste the data source URL copied to the clipboard in Step 3 into the “Data source url” field in the Heat Map gadget's configuration screen. Make the title “World Map without US”. Change the Width to 442 and the Height to 265 to properly size the gadget container.

Change the “Data refresh interval” to “Do not refresh”. Gadgets will show the latest data each time the iGoogle page is loaded.

The page should appear as follows:

Step 6: Get HTML Code

Click the “Get the Code” button and scroll down to display HTML code you can add to your web page to display the new heat map.

Click here to see the web page built with this quick start.

Optional Steps

Create a second heat map of the U.S. by following the same steps above except use the this query in Step 2:

SELECT
   METRICS ga:uniquePageviews, ga:visits ON COLUMNS
   DIMENSIONS sp:regionCode ON ROWS
FROM default
WHERE
   TIMEFRAME default
   FILTER ga:country == "United States"
   

In step 5 make the title “US Map”, and change the “Region” to “U.S.A.”. Change the “Data refresh interval” to “Do not refresh”.

Click here to see the web page built with this quick start.

Related Links