Analytics

• Learning Outcomes
• Resources
• Lab
  • Create a Google Analytics Account and Property
  • Build and Run the Application
  • 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 may be a bit dated. Only use as a guide to set up the Google Analytics tracking property. The application is totally different.)

Fork and clone this project: https://gitlab.com/langarabrian/analytics4

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://analytics.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.

Build and Run the Application

In one terminal change to the analytics4/frontend directory.

Build the React frontend:

yarn install
yarn build

In another terminal, change to the analytics4/backend directory. Set your MONGODBURI environment variable.

Build and run the Feathers backend:

yarn install
PORT=8080 yarn run dev

Preview the application in the browser and make sure you understand how it works.

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/App.tsx, switch from using BrowserRouter:

  BrowserRouter as Router,
//  Router,

to Router:

//  BrowserRouter as Router,
  Router,

Import the modules into the application in frontend/src/App.tsx:

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

Just before the definiton of the App function, 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”, “Guest List”, and “Shopping List” 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/Guests.tsx:

import ReactGA from 'react-ga';

In the handleSubmit event handler, record an event when a new guest is successfully added:

    ReactGA.event({
      category: "Guest",
      action: "Add",
    });

Rebuild the frontend with yarn build. Do a hard refresh of the application in the browser. Add a few new guests. You should see the results in the Realtime Events of the Google Analytics dashboard.

Assignment

1. Add a new Feathers Mongoose backend service “items”. Change the model, so that the service has a “quantity” property that is a number and a “description” property that is a string.
2. Modify the frontend/src/Shopping.tsx component so that it maintains a shopping list using the new “items” service. It is pretty much identical to the frontend/src/Guests.tsx component except that instead of “First Name” and “Last Name” it has “Quantity” and “Description”.
3. Implement CI/CD for the project and deploy to Google Cloud Run at https://analytics.4949NN.xyz.