Google AdSense Integration Overview
This documentation covers the integration of Google AdSense into the board-web React Router application. It is designed to teach mid-level engineers the fundamentals of how AdSense works, how we've implemented it, and how to maintain/extend it.
note
Generated by Opus 4.5 Reviewed by ali
What is Google AdSense?
Google AdSense is an advertising program that allows website owners to earn revenue by displaying ads on their sites. Google matches ads to your site based on your content and visitors, and advertisers pay when users view or click ads.
Documentation Structure
| Document | Description |
|---|---|
| How AdSense Works | First principles explanation of the AdSense system |
| React Integration | How we integrate AdSense with React Router |
| Component Reference | API documentation for our AdSense components |
| Troubleshooting | Common issues and how to solve them |
Quick Architecture Overview
Key Files
board-web/
├── app/
│ ├── root.jsx # Loads AdSense script in <head>
│ ├── routes/
│ │ └── home.jsx # Uses AdSenseUnit components
│ └── third-parties/
│ ├── google-ad-sense.jsx # GoogleAdSenseScript component
│ └── google-ad-sense/
│ ├── ad-sense-constants.js # Ad slot IDs
│ ├── ad-sense-unit.jsx # Main ad component
│ ├── ad-sense-unit.scss # Styles & responsive sizing
│ └── ad-sense-placeholder.jsx # Dev/QA placeholder
Environment Configuration
AdSense only loads in production. This is controlled by a single environment variable:
# .env (Production only)
VITE_ADSENSE_PUBLISHER_ID=ca-pub-XXXXXXXXXXXXXXXX
# Dev/QA: Leave unset or empty to show placeholders
Current Ad Placements (Home Page)
| Placement | Slot Constant | Ad Type | Location |
|---|---|---|---|
| Hero Banner | HOME_HERO | Display (Responsive) | Above the fold, top of hero section |
| After Hero | HOME_AFTER_HERO | In-Article (Fluid) | Between hero and job listings |
Next Steps
Start with How AdSense Works to understand the fundamentals before diving into the implementation details.