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.

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:

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.

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.