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/paste your tracking ID to the “Site settings” tab in the homepage properties, and to also enable the cookie consent form on this tab.

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, Tracking, which is called in the application JS code, so that it is rendered for every page:

src/App.js

// Other imports
import CookieConsent from "./Components/CookieConsent";
import Tracking from "./Components/Tracking";

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

The Tracking component can be found in the “src/Components” directory of the Example App. 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

the cookie consent form has been switched on by providing the cookie consent link in the site settings,
the GA tracking ID has been provided in the site settings, and
the cookie consent has been given by the visitor.

Only then, “/tracking.js” is loaded, causing Google’s “analytics.js” code to be invoked.

src/Components/Tracking.js

import * as React from "react";
import * as Scrivito from "scrivito";
import Helmet from "react-helmet";
import cookieConsentGiven from "../utils/cookieConsentGiven";

export default function Tracking() {
  const [trackingEnabled, setTrackingEnabled] = React.useState(false);
  React.useEffect(() => {
    cookieConsentGiven()
      .then(() => configureGoogleAnalytics())
      .then(() => setTrackingEnabled(true));
  }, []);

  return (
    trackingEnabled && (
      <Helmet>
        <script async src="/tracking.js" />
      </Helmet>
    )
  );
}

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

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 required for as the component is set up. The plugin is loaded at rendering time (via “/tracking.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?