SessionsGeoChart

Description

This GeoChart shows on a map of the world the number of sessions, and optionally pageviews, for each country, in the date range specified (number of days ago, until today).

Useful for quickly visualizing where in the world your visitors are coming from.

Refer to the Charts Overview for a list of all charts available.

Usage

import { AnalyticsDashboard, SessionsGeoChart } from "react-analytics-charts";

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <SessionsGeoChart gapi={gapi} viewId={viewId} days={28} showPageViews />
    );
  }}
/>

Props

This component also supports all div props, such as className, style, and onClick.

If you have more than one of this chart on the page, be sure to specify a unique container ID.

Data Queried

This query's date range spans from a start-date of NdaysAgo, where N is the days prop provided, until an end-date of today. See DataChart for more information on queries.

Metrics

• ga:sessions
• ga:pageviews (when showPageViews is enabled)

Dimensions

• ga:country

Customizing

This chart has been preconfigured for ease of use, but you can customize it by providing a query or options prop.

The properties you specify in either prop object will override the ones used by this chart.

This means you can cherry-pick the properties you'd like to override, such as the metrics in the query, or the width in options, without having to create a completely custom chart.

Europe Example

The following uses the europe region alias to show traffic from Europe:

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="europe"
  renderCharts={(gapi, viewId) => {
    return (
      <SessionsGeoChart
        gapi={gapi}
        viewId={viewId}
        container="europe-traffic-geo-chart"
        days={28}
        showPageViews
        options={{
          region: "europe",
        }}
      />
    );
  }}
/>

United States Example

The following uses the ga:region dimension, the US country code region, and the provinces resolution to show traffic from individual states in the United States:

<AnalyticsDashboard
  authOptions={{ clientId }}
  dashId="usa"
  renderCharts={(gapi, viewId) => {
    return (
      <SessionsGeoChart
        gapi={gapi}
        viewId={viewId}
        container="usa-traffic-geo-chart"
        days={28}
        showPageViews
        query={{
          dimensions: "ga:region",
        }}
        options={{
          region: "US",
          resolution: "provinces",
        }}
      />
    );
  }}
/>