Google Analytics Integration Overview

Sooner or later you’ll probably want to measure and analyze the traffic on your website. For users of the well-known Google Analytics service, the Scrivito Example App already integrates it. To use it, all you need to do after setting up your site in GA is to copy your tracking ID and paste it to the “Site settings” section of the homepage.

Example App “Site settings” tab: GA Tracking ID

How GA tracking works in the Example App

The Scrivito Example App comes with a React component, GoogleAnalytics, which is called in the application JS code, so that it is rendered for every page:

// src/App.js
// Other imports
import GoogleAnalytics from './Components/GoogleAnalytics';

export default function App() {
  return (
    <ErrorBoundary>
      <div>
        <div className="content-wrapper">
          <Navigation />
          <Scrivito.CurrentPage />
          <NotFoundErrorPage />
        </div>
        <Footer />
        <GoogleAnalytics />
        <CurrentPageMetaData />
        <Intercom />
      </div>
    </ErrorBoundary>
  );
}

The GoogleAnalytics component can be found in the “src/Components” directory of the Example App. It uses the ga() command queue, which is set up in the component’s componentDidMount() lifecycle method. As you can see below, the tracking ID is taken from the googleAnalyticsTrackingId attribute of the root page. It is this attribute that is set when entering the ID via the properties dialog of the homepage.

Tracking only takes place if a tracking ID has been provided, meaning that Google Analytics is not loaded if the tracking ID attribute and hence the trackingId state variable is empty.

import * as React from 'react';
import * as Scrivito from 'scrivito';
import Helmet from 'react-helmet';

class GoogleAnalytics extends React.Component {
  constructor(props) {
    super(props);

    this.state = { trackingId: '' };
  }

  componentDidMount() {
    Scrivito.load(() => {
      const rootPage = Scrivito.Obj.root();
      if (!rootPage) { return; }
      return rootPage.get('googleAnalyticsTrackingId');
    }).then(trackingId => {
      if (trackingId) {
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        window.ga('create', trackingId, 'auto');
        window.ga('set', 'anonymizeIp', true);
        window.ga('require', 'urlChangeTracker');
        window.ga('send', 'pageview');

        this.setState({ trackingId });
      }
    });
  }

  render() {
    if (!this.state.trackingId) {
      return null;
    }

    return (
      <Helmet>
        <script async src='/google_analytics.js' />
        <script async src='https://www.google-analytics.com/analytics.js' />
      </Helmet>
    );
  }
}

export default Scrivito.connect(GoogleAnalytics);

With a single page application, we need to ensure that the tracking code is executed each time the visitor navigates to a different page. This is what the urlChangeTracker Google Analytics plugin is registered for as the component is set up. The plugin is loaded at rendering time (via “/google_analytics.js”), just before Google’s “analytics.js” script is run.

Note that for Google’s script to be requested and executed, “https://www.google-analytics.com” is specified as a permitted script source in the CSP header included in the Example App.

Got a question?