Add Google Analytics

Ontario.ca Frontend is set up to use a combination of Google Analytics and Google Tag Manager to help you analyze how users interact with your project. Google Analytics provides free and comprehensive insight into user behaviour, while Google Tag Manager enables the collection of custom data using third-party marketing or analytics services.

New Ontario.ca Frontend projects are pre-configured to work with Ontario.ca's existing Google Analytics 4 property out of the box, without the need for additional setup or configuration.

Tracking custom events with Google Analytics

There may be instances where you may want your project to collect additional information that Google Analytics 4 does not collect automatically. In these cases, you will need to set up your 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 globals.js. This will override the default Google Analytics configuration and ensure data flows from your application to your custom Google Analytics instance.

src/_data/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 in your project all together, you can pass a falsy value to the googleTagManagerID value in globals.js to disable the toolkit's default Google Analytics configuration.

src/_data/globals.js

module.exports = () => {  ...  // Set the googleTagManagerID to be false, null or undefined  const googleTagManagerID = false;  return {    googleTagManagerID,    ...  };};