Creating a Visitor Map Dashboard Report

May 1, 2014 11:04 am

Using a Google Analytics Query Report and the Google Visualization Geochart code, you can easily create interactive dashboard map reports. In the following example we will make a report which shows the United States with each state highlighted based on the number of visits.

1. Create a report with the google analytics option and create a query which grabs location information. I used the ga:users metric to get all visits to the site, then pick the dimensions based on what I want my map to display. In this case I chose ga:region (state) and ga:country. I am then going to use country to filter my result set to only US countries.

Note: When you move your query to freedom, don't forget to change the start date and end date to [[today]] and [[today-30]] or whatever date range you wish to use. This will keep your map showing up to date information.

--------------------------------------------------------------------------

2. Now we are going to create the code. Set the Report Output type to HTML and you can build your body/item/repeat sections to display your information. If you want to display visitors from a different country, or zoom in to a specific state to show cities, you can reference the geochart page for information on the map's configuration options: https://developers.google.com/chart/interactive/docs/gallery/geochart

BODY

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['City', 'Visits'], // We need this header section for google's API, the rest of the arrays will be populated with the [[repeat]]
          [[repeat]]
        ]);

       var options = {
       region: 'US', //north america
       resolution: 'provinces', // zoom in to show individual states
        colorAxis: {colors: ['#faeecf', '#2d5d85' ]} // start and end colours for the gradient (can use more than 2 colours in this array ).
      };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); // initialize the chart into #chart_div
        chart.draw(data, options); // draw the chart
    };
    </script>

  <div id="chart_div" style="width: 100%; height: 400px;"></div>

REPEAT

[[item]]

ITEM


<if [[ga:region]] != '(not set)'>
[ '[[ga:region]]', [[ga:users]] ],
</if>


In the Item section, make sure to place an if statement around each array item to check if the region is set or not. If it is not, we don't want to send it with our chart data.

Google's API will then return an interactive SVG map fit into your containing div:

May 1, 2014 11:08 am

Also, if you like these exact specifications, the report from the above example is available in the "Add A New Report" list under the title: GA - Visitor Location Map US View (Past 30 Days)