Project 2 Requirement (45 points) - Analytics & Logging

 

 

 

 

You are going to drive traffic to your app by solicting friends, colleages and family to use your app. You will use this traffic to study analytics of your app's usage -in the same manner you would do for a real deployed application.

 

You will implement analytic tracking using Google Analytics. You will also be learning on your own about

 

 

Google Analytics

Read about Google Analytics and how it integrates into your application and Google Cloud. For Google I want you to implement both the Client Side and Server Side analytic options. Install Google Analytics for React.js(npm install react-ga4 --or whatever latest version). Same for NodeJS

How it works

How to Integrate Google Analytics with React.js Create a GA Property: Go to Google Analytics Click Admin > Create Property and choose GA4 Get your GA4 Measurement ID (e.g., G-XXXXXXXXXX) Install GA4 in React.js: npm install react-ga4 Initialize GA4 in App.js: import ReactGA from "react-ga4"; ReactGA.initialize("G-XXXXXXXXXX"); // Replace with your GA4 ID ReactGA.send("pageview"); // Track page load Track API Requests to Gemini API: (example) ReactGA.event({ category: "API Request", action: "Called Gemini API", label: "Image Captioning", }); How to Integrate Google Analytics with Node.js (Express) Install GA4 Measurement Protocol Client: npm install axios Send API Event Data to GA4 in server.js: const axios = require("axios"); function trackEvent(eventName) { axios.post("https://www.google-analytics.com/mp/collect", { client_id: "your-client-id", events: [{ name: eventName }], }); } trackEvent("Gemini API Call"); When Should You Use GA4? Use GA4 If You Need To: Track user behavior in React apps Monitor API calls (Gemini API, Cloud Vision API) Analyze engagement & retention

 

 

Google Cloud Logging

Every time you make a call to a API (Social Network X, Google Cloud Vision and Google Gemini, etc) you must log the call using Google Cloud Logging. This will let you:

• Tracking API requests (Vision API, Gemini API, etc.).

• Monitoring performance and response times.

How it works:

Google Cloud Logging collects logs from your NodeJS Express backend.

General Steps Install the Google Cloud Logging SDK: npm install @google-cloud/logging Initialize Cloud Logging in index.js (or similar): const { Logging } = require("@google-cloud/logging"); const logging = new Logging(); const log = logging.log("gemini-api-requests"); async function logRequest(requestData) { const metadata = { resource: { type: "global" } }; const entry = log.entry(metadata, requestData); await log.write(entry); } app.post("/generate", async (req, res) => { try { const prompt = req.body.prompt; logRequest({ message: "Gemini API called", prompt }); const result = await geminiAPI.generate(prompt); res.json({ response: result }); } catch (error) { logRequest({ error: error.message }); res.status(500).json({ error: error.message }); } });

 

 

 

Deliverable- Report: Create a report called "Analytics&Logging" and upload it to the Github wiki

 

Create a pdf of a report containing the following sections (and sub-sections). Put it on the Project GitHub wiki in a page called &Logging.You MUST keep the same titles and section headings as shown in Green.

• section 1= Google Analytics. Give a summary of how you implemented both client and server side analytic options. Select a minimum of 3 analytic metrics that you felt were important for your app. Then present for EACH of the minimum of 3 analytic metrics:

  • 1.1.a: metric 1- provide a graphs/plots/visualizations: Provide accurate and appropriate display of quantitative information using academic vocabulary with correct symbols, units, scale, etc.

  • 1.1.b: Interpret the metric 1's trends: Give an appropriate and comprehensive explanation of the analysis of the metric's data and trends.What does it tell you about your Facebook app and/or your users --how is it important and what does the trend tell you.

  • 1.1.c: limitations of metric 1: Accurate and thorough articulation of deficiencies with the underlying data, analyses or conclusions.
    
    

  • 1.2.a: metric 2- provide a graphs/plots/visualizations: Provide accurate and appropriate display of quantitative information using academic vocabulary with correct symbols, units, scale, etc.

  • 1.2.b: nterpret the metric 2's trends: Give an appropriate and comprehensive explanation of the analysis of the metric's data and trends.What does it tell you about your Facebook app and/or your users --how is it important and what does the trend tell you.

  • 1.2.c: limitations of metric 2: Accurate and thorough articulation of deficiencies with the underlying data, analyses or conclusions.

  • 1.3.a: metric 3- provide a graphs/plots/visualizations: Provide accurate and appropriate display of quantitative information using academic vocabulary with correct symbols, units, scale, etc.

  • 1.3.b: nterpret the metric 3's trends: Give an appropriate and comprehensive explanation of the analysis of the metric's data and trends.What does it tell you about your Facebook app and/or your users --how is it important and what does the trend tell you.

  • 1.3.c: limitations of metric 3: Accurate and thorough articulation of deficiencies with the underlying data, analyses or conclusions.

 

• section 2= Google Logging. Give a summary of how you implemented Google Cloud logging on front end and backend. Show Log files and discuss what is going on.

  • 2.1:frontend implementaton: show and discuss code related to logging implmementation for front end (ReactJS). AND show results from front end logging and discuss.

  • 2.2: backend implementaton: show and discuss code related to logging implmementation for back end (Express/NodeJS)AND show results from back end logging and discuss.