Implementing page view analytics

You can implement page view analytics in your application to collect citizen page views for analysis. Using the included page view JavaScript functions, you can start tracking page views by implementing a callback to send tracking data to a library of your choice for analysis. In this example, the data is sent to the Google global site tag (gtag.js) JavaScript tagging framework.

Before you begin

The registerPageViewCallback and pageView functions are available for you to implement tracking in your custom application.

registerPageViewCallback

This function takes a callback, which you must define, as an argument. You must call the registerPageViewCallback function before the application is rendered.

pageView

This function calls the registered page view callback where present. If the page view callback is not registered, it is not called.

For IEG pages, pageView passes an object with the following properties as a parameter to the callback:

pageType ('IEG')
pageID (the current IEG page ID)
scriptID (the IEG script ID)

For non-IEG pages, pageView passes an object with the following properties as a parameter to the callback:

title
location
path

About this task

To track page views, you must initialize the tracking library, register the callback, and implement the callback to send tracking data to a library for analysis.

When you define your own custom routes, you must use the TitledRoute component so that the pages can be tracked. If the route corresponds to an IEG script, you must set the isIEG property for the TitledRoute component.

Procedure

The index.html file is a good place to initialize the library. Insert this snippet, which is as provided by Google except for the tracking call.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-TRACKINGID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

Also in the index.html file, you must update the Content Security Policy to allow the Google script to run:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.googletagmanager.com/ http://www.google-analytics.com/" />

Implement the callback function.

The callback handles both IEG and non-IEG pages based on the pageType prop.

export default function customCallback(props) {
  const gtagProps = {};
  if (props.pageType && props.pageType === 'IEG') {
    // IEG pages
    gtagProps.page_title = `${props.scriptID} ${props.pageID}`;
    gtagProps.page_path = `/apply/${props.pageID}`;
  } else {
    // Non-IEG pages
    gtagProps.page_title = props.title;
    gtagProps.page_location = props.location;
    gtagProps.page_path = props.path;
  }
  window.gtag('config', 'UA-TRACKINGID', gtagProps);
}

In index.js, register the callback before the application renders.

registerPageViewCallback(customCallback); 
ReactDOM.render(<App />, document.getElementById('root'));

For your own custom routes, you must use the TitledRoute component so that the pages can be tracked. If the route corresponds to an IEG script, you must set the isIEG property for the TitledRoute component. For more information, see Advanced routing.