This document explains how Google Analytics has been implemented in the Campus Bridge Learning Management System.
We've implemented Google Analytics 4 (GA4) tracking across the Campus Bridge application to track user interactions, page views, and other important events. The implementation uses a centralized approach with a shared JavaScript file.
public/analytics.js- Centralized analytics tracking scriptpublic/index.html- Main landing pagepublic/studentlogin.html- Student login pagepublic/courses.html- Courses dashboardpublic/freecourses.html- Free courses page
- Go to Google Analytics
- Sign in with your Google account
- Click "Admin" (gear icon) in the lower left
- In the "Account" column, select an existing account or create a new one
- In the "Property" column, click "Create Property"
- Select "Web" as the platform
- Enter "Campus Bridge" as the property name
- Enter your website URL
- Select the appropriate reporting time zone
- Click "Next" and complete the setup
- After creating the property, you'll get a Measurement ID (starts with "G-")
- If you need to find it later:
- Go to "Admin"
- Select your property
- Click "Data Streams"
- Click your web stream
- Your Measurement ID is displayed at the top
- Open
public/analytics.js - Find the line:
gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-YOUR-GA4-ID-HERE'; - Replace
G-YOUR-GA4-ID-HEREwith your actual Measurement ID - Also update the line:
gtag('config', 'G-YOUR-GA4-ID-HERE');
- Deploy your application
- Visit your site
- Go to your Google Analytics Realtime reports
- You should see active users
The implementation tracks the following events:
- Automatic tracking of all page views
- Clicks on main navigation elements
- Course card selections
- Sidebar navigation
- Login attempts
- Successful logins
- Course card clicks
- Video views in free courses
- Opening the Shakti AI chatbot
- Interactions with the chatbot
The analytics.js file provides several helper functions:
trackPageView(pageName)- Track page viewstrackNavigation(destination)- Track navigation eventstrackCourseInteraction(courseName, action)- Track course interactionstrackAuthEvent(eventType, description)- Track authentication eventstrackChatbotEvent(eventType, message)- Track chatbot interactionstrackVideoView(courseName, videoTitle)- Track video views
To add Google Analytics tracking to new pages:
-
Include the analytics script in the
<head>section:<script src="analytics.js"></script>
-
Use the appropriate tracking functions for events:
// For navigation trackNavigation('Page Name'); // For course interactions trackCourseInteraction('Course Name', 'Action'); // For authentication trackAuthEvent('event_type', 'Description');
This implementation respects user privacy by:
- Not collecting personally identifiable information (PII)
- Only tracking interactions and page views
- Using standard GA4 anonymization features
If you're not seeing data in Google Analytics:
- Check that you've updated the Measurement ID correctly
- Verify there are no JavaScript errors in the browser console
- Ensure your site is accessible via HTTPS (required for GA4)
- Check that your ad blocker isn't blocking GA scripts
- Confirm you're looking at the correct date range in GA reports
For questions about this implementation, contact the Campus Bridge development team.