Skip to content
This repository has been archived by the owner on Apr 19, 2024. It is now read-only.

Adding analytics

Kevan Hannah edited this page May 30, 2023 · 1 revision

Most teams use a combination of Google Analytics and Google Tag Manager to analyze how users interact with their Ontario.ca application:

  • Google Analytics for free and comprehensive insight into user behaviour
  • Google Tag Manager for collecting custom data using third-party marketing or analytics services

The Ontario.ca Jamstack Toolkit is configured to work with Ontario.ca's existing Google Analytics 4 property out of the box, without the need for additional setup or configuration. Once you deploy your Jamstack application to Ontario.ca, you can immediately start viewing analytics using the existing Ontario.ca Google Analytics properties.

For access to Ontario.ca Google Analytics properties, visit InsideOPS (requires an Ontario Public Service user account).

Tracking custom events with Google Analytics

Some teams may want their applications to collect additional information that Google Analytics 4 does not collect automatically. These teams will need to set up their own Google Analytics property and set up custom event tracking alongside Google Analytics' automatic or recommended events.

To do this, you will need to set up a new Google Tag Manager container and configure Google Analytics 4 to track any custom events. You can then add the container ID to app-globals.js. This will override the default Google Analytics configuration and ensure data flows from your application to your custom Google Analytics instance.

// In your app-globals.js
module.exports = () => {
  const googleTagManagerID = 'YOUR_GOOGLE_TAG_MANAGER_ID';

  return {
    googleTagManagerID,
  };
};

Disabling Google Analytics

If you prefer to opt out of collecting analytics about your Ontario.ca application, you can pass a falsy value to the googleTagManagerID value in app-globals.js to disable the toolkit's default Google Analytics configuration.

// In your app-globals.js
module.exports = () => {
  // Set the googleTagManagerID to be false, null or undefined
  const googleTagManagerID = false;

  return {
    googleTagManagerID,
  };
};
Clone this wiki locally