From 786f1d1f38ea1416e54f75c50d2e7dad233b7768 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Fri, 2 Jan 2026 06:00:59 +0000
Subject: [PATCH] Add Vercel Web Analytics to project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Vercel Web Analytics Integration Implementation

### Summary
Successfully integrated Vercel Web Analytics into the Buildbot project. The implementation uses the HTML-based analytics approach, which is appropriate for the project's architecture.

### Analysis
The Buildbot project consists of:
- **Backend**: Python FastAPI-based master application (master/buildbot/)
- **Frontend**: AngularJS-based web UI (www/base/) with webpack bundling and Jade templating

Since the frontend is not a modern framework (like Next.js, React App, etc.) but rather a traditional JavaScript application with Jade templates, the HTML implementation approach was chosen.

### Changes Made

#### Modified Files:
- **www/base/src/app/layout.jade**
  - Added Vercel Web Analytics script initialization
  - Added deferred script tag to load analytics from `/_vercel/insights/script.js`
  - Placement: Between browser warning scripts and app initialization scripts for optimal load timing

### Implementation Details

The implementation adds two script elements to the HTML head:

1. **Analytics Function Initialization**:
   ```html
   <script>
     window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
   </script>
   ```
   This creates a queue-based function for analytics calls, ensuring functionality even if the analytics script loads asynchronously.

2. **Analytics Script Loading**:
   ```html
   <script defer src="/_vercel/insights/script.js"></script>
   ```
   The deferred attribute ensures the script loads after DOM parsing, preventing blocking of page rendering.

### Why This Approach

- **No Package Installation Required**: The HTML implementation doesn't require adding `@vercel/analytics` as a dependency
- **Works with Legacy Architecture**: Compatible with AngularJS and webpack-based applications
- **CDN Delivery**: The analytics script loads from Vercel's CDN at deployment time
- **Minimal Changes**: Non-invasive integration with existing codebase
- **No Framework-Specific Code**: Works regardless of framework changes

### Prerequisites for Deployment

To enable analytics data collection:
1. Project must be deployed to Vercel
2. Web Analytics must be enabled on the Vercel dashboard
3. No additional configuration needed - the script will automatically begin tracking once deployed

### Data Collection

Once deployed to Vercel with Web Analytics enabled:
- Automatic tracking of page views and visitor information
- Network request monitoring available in browser DevTools
- Requests will appear to `/_vercel/insights/view` endpoint
- No route support in HTML implementation (standard for plain HTML apps)
- Custom events can be added later using the analytics queue if needed

### Testing Notes

- Jade syntax validation: ✓ Passed
- File structure: ✓ Verified
- Indentation: ✓ Consistent with existing code
- Script placement: ✓ Optimal for performance
- No breaking changes: ✓ Confirmed

### Notes

- The analytics script only becomes active when deployed to Vercel
- In local development, the `/_vercel/insights/script.js` will not be available (expected behavior)
- The implementation follows Vercel's official documentation for HTML-based web analytics

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 www/base/src/app/layout.jade | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/www/base/src/app/layout.jade b/www/base/src/app/layout.jade
index 695eda76716f..18c293bd2aca 100644
--- a/www/base/src/app/layout.jade
+++ b/www/base/src/app/layout.jade
@@ -18,6 +18,10 @@ html.no-js(ng-app="app", xmlns:ng='http://angularjs.org', xmlns:app='ignored')
     script(src="browser-warning.js")
     link(href='browser-warning.css', rel='stylesheet')
     script(src="browser-warning-list.js")
+    // Vercel Web Analytics
+    script
+      | window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+    script(defer, src="/_vercel/insights/script.js")
     script
       | window.T =  {{ custom_templates | tojson }};
     script(src="scripts.js?_" + timestamp)