Analytics

• Learning Outcomes
• Resources
• Lab
  • Create a Google Analytics Account and Property
  • Modify the Frontend to do Page Tracking
  • Modify the Frontend to do Event Tracking
• Assignment

Learning Outcomes

• describe the motiviation for collecting analytics for a web application
• describe the options available for collecting analytics
• implement Google Analytics for a web application

Resources

• slides

Lab

Video walk through of this lab.

This lab is a continuation of the previous email lab which we augment by adding Google Analytics to the application enabling page and event tracking.

Create a Google Analytics Account and Property

Login into your Google account if you have not already done so.

Go to Google Analytics. Click on the “Start measuring” or “Set up for free” or whatever the button says.

Create an account name. Agree to data sharing, or not, as you see fit. Click on the “Next” button.

Under “Property Setup | Property details”, enter whatever you want for “Property name”.

Choose your reporting time zone and currency.

Click on “Show advanced options”.

Enable “Create a Universal Analytics property”

For “Website URL”, choose “https://email-sms.4949NN.xyz”.

Select “Create a Universal Analytics property only”.

Click on the “Next” button.

Select whatever you want for “Industry category”, “Business size”, and intended use.

Click on the “Create” button.

Agree to the terms and conditions.

Opt in or out of email communications as you see fit.

You should be taken to a page that shows your Tracking ID and code.

Modify the Frontend to do Page Tracking

In the frontend terminal, add the history and react-ga modules to the project:

yarn add history@4.10.1 react-ga

In frontend/src/application.js, switch from using BrowserRouter:

  BrowserRouter as Router,
//  Router,

to Router:

//  BrowserRouter as Router,
  Router,

Import the modules into the application in frontend/src/application.js:

import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';

Just before the definiton of the Application class, initialize ReactGA, set up the history object, and the history event listener:

// initialize ReactGA
const trackingId = "UA-1234567890-1"; // Replace with your Google Analytics tracking ID
ReactGA.initialize(trackingId);

// set up history
const history = createBrowserHistory();

// Initialize google analytics page view tracking
history.listen(location => {
  ReactGA.pageview(location.pathname); // Record a pageview for the given page
});

Finally, add the history event listener to the Router component:

    <Router history={history}>

Rebuild the frontend with yarn build. Do a hard refresh of the application in the browser. Flip between the home, “About”, and “Email” pages of the app in the browser. You should see the results in the Realtime Overview of the Google Analytics dashboard.

Modify the Frontend to do Event Tracking

Import ReactGA into frontend/src/emailform.js:

import ReactGA from 'react-ga';

In the sendEmail event handler, record an email send event:

    ReactGA.event({
      category: "Email",
      action: "Send",
    });

Rebuild the frontend with yarn build. Do a hard refresh of the application in the browser. Send an email. You should see the results in the Realtime Events of the Google Analytics dashboard.

Assignment

1. Implement event tracking for the SMS as well.
2. Implement CI/CD for the project and deploy to Google Cloud Run at https://email-sms.4949NN.xyz.