Move Plausible analytics page ID to environment variable

[leogdion]

• Configure webpack to inject PLAUSIBLE_PAGE_ID from .env file
• Update index.ts to use environment variable instead of hardcoded value
• Add dotenv package for environment variable loading
• Update GitHub Actions workflow to use PLAUSIBLE_PAGE_ID secret
• Keep analytics ID out of repository for security

🤖 Generated with Claude Code

---

Perform an AI-assisted review on

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 2-hide-analytics-id

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[claude]

Pull Request Review: Move Plausible analytics page ID to environment variable

Summary

This PR successfully moves the Plausible analytics page ID from hardcoded source code to an environment variable, improving security by keeping the analytics ID out of the repository. The implementation is generally solid, but there are several areas that need attention.

---

Critical Issues

1. Missing .env.example File

Severity: High

The PR doesn't include a .env.example file to document required environment variables for developers.

Issue: New developers won't know what environment variables are required or how to configure them locally.

Recommendation:
Create a .env.example file in the project root:

# Plausible Analytics Page ID
PLAUSIBLE_PAGE_ID=your-page-id-here

Update CLAUDE.md to document this requirement in the development setup section.

Files to create:

• .env.example (root directory)

---

2. Empty String Fallback Could Break Analytics

Severity: Medium

Location: components/Styling/scripts/index.ts:5

const pageID = process.env.PLAUSIBLE_PAGE_ID || "";

Issue: If the environment variable is missing, pageID becomes an empty string, which will silently fail analytics tracking. This makes debugging harder.

Recommendation:
Add validation or at least a warning:

const pageID = process.env.PLAUSIBLE_PAGE_ID || "";
if (!pageID && process.env.NODE_ENV === 'production') {
  console.warn('PLAUSIBLE_PAGE_ID is not set - analytics will not work correctly');
}

---

3. GitHub Actions Secret Not Verified

Severity: High

Location: .github/workflows/main.yml:38

Issue: The workflow references secrets.PLAUSIBLE_PAGE_ID but there's no indication the secret has been configured in the repository settings.

Recommendation:

• Verify the secret is configured in GitHub repository settings (Settings → Secrets and variables → Actions)
• Add a step to validate the environment variable is set during the build
• Document this requirement in the PR description or setup documentation

---

Code Quality Issues

4. dotenv Package Categorization

Severity: Low

Location: components/Styling/package.json:34

Issue: dotenv is listed under devDependencies, but it's used during the webpack build process which needs to run in CI/CD (production context).

Current:

"devDependencies": {
  "dotenv": "^17.2.3"
}

Analysis: This is actually correct since webpack bundles are built during the build phase (dev/CI environment), not at runtime. However, it's worth noting that the bundled output won't need dotenv at runtime since webpack injects the value at build time via DefinePlugin.

Verdict: This is fine as-is, but worth understanding the distinction.

---

5. Local Development Experience

Severity: Medium

Issue: The PR doesn't provide guidance on how developers should set up their local .env file for development.

Recommendation:
Add to CLAUDE.md in the "Development" section:

### Environment Setup

Copy `.env.example` to `.env` and configure required variables:

\`\`\`bash
cp .env.example .env
\`\`\`

Required variables:
- `PLAUSIBLE_PAGE_ID`: Your Plausible analytics page ID

---

Positive Aspects

1. Security improvement: Removing hardcoded analytics ID from source control
2. Clean implementation: Proper use of webpack DefinePlugin for environment variable injection
3. Correct .gitignore: .env files are already properly ignored (line 106-108 in .gitignore)
4. Type safety: TypeScript types are maintained
5. Backward compatibility: Empty string fallback prevents crashes (though analytics won't work)

---

Testing Recommendations

1. Verify GitHub Secret: Ensure PLAUSIBLE_PAGE_ID secret is configured in repository settings
2. Test local build: Verify the build works locally with a .env file
3. Test CI build: Verify the GitHub Actions build succeeds with the secret
4. Test analytics: After deployment, verify Plausible tracking still works correctly
5. Test missing env var: Verify graceful degradation when PLAUSIBLE_PAGE_ID is not set

---

Action Items

Before merging:

• Create .env.example file documenting required environment variables
• Verify PLAUSIBLE_PAGE_ID secret is configured in GitHub repository settings
• Update CLAUDE.md with environment setup instructions
• Consider adding validation/warning for missing PLAUSIBLE_PAGE_ID
• Test the build process both locally and in CI

---

Performance & Security

Performance: No performance impact. The environment variable is injected at build time via webpack DefinePlugin, so there's no runtime overhead.

Security: Significant improvement. The analytics page ID is no longer committed to the repository, reducing exposure in version control history.

---

Overall Assessment

This is a good security improvement that follows best practices for handling configuration. The implementation is mostly solid, but needs documentation and verification of the GitHub Actions secret before merging.

Recommendation: Request changes to add .env.example and documentation before merging.

[claude]

Pull Request Review: Move Plausible Analytics Page ID to Environment Variable

Summary

This PR successfully moves the hardcoded Plausible analytics page ID to an environment variable, improving security and configuration management. The implementation is solid with good CI verification and documentation.

---

✅ Strengths

1. Security Improvement: Successfully removes sensitive analytics ID from source control
2. Comprehensive Documentation: Excellent addition to CLAUDE.md with clear setup instructions and flow diagrams
3. Robust CI Validation: Three-layer verification (env check, bundle verification, HTML validation)
4. Developer Experience: Clear .env.example with helpful comments
5. Graceful Degradation: Build warns but doesn't fail when env var is missing locally

---

🔍 Code Quality Observations

webpack.config.ts (lines 11-15)

Good: Build-time warning for missing environment variable

if (!plausiblePageId) {
  console.warn('\n⚠️  Warning: PLAUSIBLE_PAGE_ID environment variable is not set.');
  console.warn('   Analytics tracking will be disabled. See .env.example for setup instructions.\n');
}

Note: The variable plausiblePageId is assigned but never used beyond the check. Consider removing line 11 and checking directly in the condition.

index.ts (line 5)

Good: Fallback to empty string

const pageID = process.env.PLAUSIBLE_PAGE_ID || "";

Consideration: With an empty string, analytics will silently send events with an empty pageID. Consider adding runtime validation or logging when pageID is empty to help debug configuration issues.

---

🐛 Potential Issues

1. CI Verification Could Be More Robust (main.yml:53)

The grep check for pageID might match false positives:

if grep -q "pageID" public/js/main.js; then

Recommendation: Search for a more specific pattern to ensure the actual value is injected:

if grep -qE 'pageID[[:space:]]*=[[:space:]]*".+"' public/js/main.js; then

2. Missing TypeScript Type Safety

The webpack DefinePlugin uses process.env.PLAUSIBLE_PAGE_ID but there's no TypeScript declaration for this custom env variable.

Recommendation: Add a type declaration file (e.g., components/Styling/scripts/env.d.ts):

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      PLAUSIBLE_PAGE_ID: string;
    }
  }
}
export {};

3. Package Dependency Placement

The dotenv package is in devDependencies (package.json:34-36), which is appropriate. However, ensure it's available in all build environments.

---

⚡ Performance Considerations

• Build-time injection: ✅ Correctly uses DefinePlugin for compile-time replacement
• No runtime overhead: ✅ No dynamic environment variable loading in browser
• Bundle size: ✅ Minimal impact (dotenv only used at build time)

---

🔒 Security Assessment

1. ✅ Sensitive data removed from repo
2. ✅ .env properly in .gitignore (lines 106-108)
3. ✅ .env.example provides template without exposing secrets
4. ✅ CI properly uses GitHub Secrets

Recommendation: Consider documenting where users should store/manage the actual page ID value (password manager, team documentation, etc.)

---

🧪 Test Coverage

Current state: ✅ Good CI verification with three validation steps

Enhancement suggestions:

1. Add a test that verifies analytics events actually fire (could be a smoke test)
2. Consider adding a step that checks the built HTML includes the analytics script properly
3. The HTML validation with htmlhint is a great addition!

---

📋 Additional Recommendations

1. Environment Variable Validation Priority

The webpack config warns but continues (lines 12-15), while CI fails fast (lines 40-43). This is actually good design - developers can build locally without analytics, but production builds must have it.

2. Documentation Enhancement

The CLAUDE.md documentation is excellent. One small addition - consider mentioning that the page ID should be kept secure and not shared publicly.

3. Error Handling in index.ts

When pageID is empty, the analytics tracking will still execute. Consider:

const pageID = process.env.PLAUSIBLE_PAGE_ID || "";

if (!pageID) {
  console.warn("Analytics disabled: PLAUSIBLE_PAGE_ID not configured");
}

// Only track if pageID is set
if (pageID) {
  props.pageID = pageID;
  plausible.trackEvent("signup", { callback, props });
}

---

📊 Overall Assessment

Code Quality: ⭐⭐⭐⭐⭐ (5/5)
Security: ⭐⭐⭐⭐⭐ (5/5)
Documentation: ⭐⭐⭐⭐⭐ (5/5)
CI/CD: ⭐⭐⭐⭐ (4/5)

Verdict: ✅ APPROVE

This is a well-executed security improvement with thoughtful implementation. The suggestions above are minor enhancements and don't block merging. The PR demonstrates best practices in:

• Moving secrets to environment variables
• Comprehensive documentation
• Build-time validation
• Developer experience

Great work! 🎉

---

Review generated with attention to security, code quality, and best practices

[claude]

Pull Request Review

Great work on moving the Plausible Analytics page ID to environment variables! This is a solid security improvement. Here's my detailed review:

✅ Strengths

1. Security: Excellent move removing the hardcoded analytics ID from the codebase
2. Documentation: Comprehensive documentation added to CLAUDE.md covering the environment variable setup and flow
3. CI/CD Integration: Good verification steps in GitHub Actions to ensure the environment variable is configured
4. Developer Experience: The .env.example file makes it easy for new developers to get started

🔍 Code Quality & Best Practices

Positive:

• Clean separation of configuration from code
• Good use of TypeScript type safety maintained throughout
• Proper use of webpack's DefinePlugin for environment variable injection
• Warning messages are clear and actionable

Suggestions:

1. Unused Variable (webpack.config.ts:11)

   • The plausiblePageId variable is assigned but only used for the conditional check
   • Consider simplifying:

   if (\!process.env.PLAUSIBLE_PAGE_ID) {
     console.warn('⚠️  Warning: PLAUSIBLE_PAGE_ID environment variable is not set.');
     console.warn('   Analytics tracking will be disabled. See .env.example for setup instructions.');
   }

2. Import Order (webpack.config.ts:4-5)

   • Consider grouping external imports together before dotenv
   • Minor style preference for consistency

🐛 Potential Issues

1. Analytics Silent Failure (index.ts:5)

   • When pageID is an empty string, analytics events will still be tracked but with an empty ID
   • Consider adding runtime validation:

   const pageID = process.env.PLAUSIBLE_PAGE_ID || "";
   
   if (\!pageID) {
     console.warn('Plausible Analytics: pageID not configured, analytics disabled');
   }

2. Build Failure in CI (main.yml:40-43)

   • The CI now fails hard if PLAUSIBLE_PAGE_ID is missing, which is good for production
   • However, this prevents building on forks or for contributors who don't have access to secrets
   • Consider adding a conditional check for PR builds from forks to allow builds without the secret while warning about missing analytics

⚡ Performance Considerations

• No performance concerns - the environment variable is resolved at build time
• Bundle size remains unchanged
• No runtime overhead introduced

🔒 Security Concerns

Excellent:

• Removes sensitive analytics ID from version control
• Proper use of GitHub Secrets

Note:

• The analytics ID itself isn't highly sensitive (it's typically in the page source anyway), but this pattern is good practice for other secrets
• Consider adding a note in documentation that the pageID may be visible in the compiled bundle (as it must be for client-side analytics)

🧪 Test Coverage

Missing:

• No automated tests for the environment variable configuration
• Consider adding a simple test that verifies the pageID is set in development

Suggestions:

• Add a test script that checks for .env file existence in local development
• Could add a Jest test for the webpack config to ensure DefinePlugin is properly configured

📝 Documentation

Excellent work on documentation! The CLAUDE.md additions are comprehensive and clear.

Minor suggestions:

1. Consider adding a troubleshooting section for common issues
2. Add a note about what happens if the variable is missing (analytics disabled vs build failure)

🎯 Overall Assessment

This is a well-executed PR that improves security posture and maintainability. The implementation is solid, documentation is thorough, and the CI integration is thoughtful.

Recommendation: Approve with minor suggestions ✅

The only blocking concern is the CI build failure for forks/PRs - consider whether you want to allow builds without the secret for contribution purposes.

---

Review generated by Claude Code - Happy to discuss any of these points further!