dewedev/ADSENSE_SETUP_GUIDE.md

AdSense Setup Guide - Final Steps

✅ What's Already Done:

1. ✅ AdSense Script Added to public/index.html
2. ✅ AdBlock Component created (src/components/AdBlock.js)
3. ✅ AdColumn Component created (src/components/AdColumn.js)
4. ✅ MobileAdBanner Component created (src/components/MobileAdBanner.js)
5. ✅ ToolLayout Updated to include ads on all tool pages
6. ✅ Build Successful - Ready to deploy!

---

🎯 What You Need to Do Now:

Step 1: Create Ad Units in AdSense Dashboard

Go to: https://adsense.google.com/

Navigate to: Ads → By ad unit → Display ads

Create 4 Ad Units:

Ad Unit 1: Tool Sidebar 1

• Name: Tool Sidebar 1
• Size: 300x250 (Medium Rectangle)
• Type: Display ads
• Click "Create" and copy the Ad Slot ID

Ad Unit 2: Tool Sidebar 2

• Name: Tool Sidebar 2
• Size: 300x250 (Medium Rectangle)
• Type: Display ads
• Click "Create" and copy the Ad Slot ID

Ad Unit 3: Tool Sidebar 3

• Name: Tool Sidebar 3
• Size: 300x250 (Medium Rectangle)
• Type: Display ads
• Click "Create" and copy the Ad Slot ID

Ad Unit 4: Mobile Bottom Banner

• Name: Mobile Bottom Banner
• Size: 320x50 (Mobile Banner)
• Type: Display ads
• Click "Create" and copy the Ad Slot ID

---

Step 2: Update Ad Slot IDs in Code

After creating the ad units, you'll have 4 slot IDs that look like: 1234567890

Open: src/components/AdColumn.js

Replace:

const AdColumn = ({ 
  slot1 = 'REPLACE_WITH_SLOT_1',  // ← Replace with your Slot 1 ID
  slot2 = 'REPLACE_WITH_SLOT_2',  // ← Replace with your Slot 2 ID
  slot3 = 'REPLACE_WITH_SLOT_3'   // ← Replace with your Slot 3 ID
}) => {

With:

const AdColumn = ({ 
  slot1 = '1234567890',  // ← Your actual Slot 1 ID
  slot2 = '0987654321',  // ← Your actual Slot 2 ID
  slot3 = '1122334455'   // ← Your actual Slot 3 ID
}) => {

Open: src/components/MobileAdBanner.js

Replace:

const MobileAdBanner = ({ slot = 'REPLACE_WITH_MOBILE_SLOT' }) => {

With:

const MobileAdBanner = ({ slot = '5544332211' }) => {  // ← Your Mobile Slot ID

---

Step 3: Rebuild and Deploy

npm run build:no-snap

Then deploy to your hosting (Netlify, Vercel, etc.)

---

Step 4: Test Ads

After deployment:

1. Visit any tool page (not homepage)
2. Desktop: You should see 3 ads in the right sidebar
3. Mobile: You should see 1 sticky banner at the bottom
4. Homepage: Should have NO ads (clean!)

Note: Ads may take 10-30 minutes to start showing after deployment.

---

📊 How It Works:

Homepage (Clean - No Ads)

┌─────────────────────────────┐
│  Hero Section               │
│  Tool Cards                 │
│  Features                   │
│  Footer                     │
└─────────────────────────────┘

Tool Pages (Desktop - 3 Ads)

┌────────────────────────────┬─────────┐
│                            │  [Ad1]  │ 300x250
│   Tool Content             │         │
│   (Object Editor, etc.)    │  [Ad2]  │ 300x250
│                            │         │
│                            │  [Ad3]  │ 300x250
└────────────────────────────┴─────────┘

Tool Pages (Mobile - 1 Ad)

┌─────────────────────────┐
│   Tool Content          │
│   (Scrollable)          │
│                         │
├─────────────────────────┤
│   [Ad Banner 320x50]    │ ← Sticky
└─────────────────────────┘

---

🎨 Ad Styling:

Ads are wrapped in:

• Light mode: Gray background (bg-gray-100)
• Dark mode: Dark gray background (bg-gray-800)
• Rounded corners for modern look
• Proper spacing between ads

---

🔧 Troubleshooting:

Ads Not Showing?

1. Wait 10-30 minutes after deployment
2. Check AdSense Dashboard - Make sure account is approved
3. Check Browser Console for errors
4. Disable Ad Blocker for testing
5. Verify Slot IDs are correct in code

Ads Showing Blank Space?

• This is normal during testing
• AdSense needs time to fill inventory
• May show blank for first few hours/days
• Will improve as site gets traffic

Mobile Ad Overlapping Content?

• There's a <div className="xl:hidden h-16" /> at bottom
• This adds padding to prevent overlap
• Adjust height if needed

---

📈 Monitoring Performance:

AdSense Dashboard:

• Go to: https://adsense.google.com/
• Check: Reports → Overview
• Monitor:
  • Page RPM (Revenue per 1000 impressions)
  • CTR (Click-through rate)
  • Impressions (How many times ads shown)
  • Earnings (Daily/monthly revenue)

Expected Timeline:

• Day 1-7: Low earnings, AdSense learning
• Week 2-4: Earnings stabilize
• Month 2+: Optimize based on data

---

🚀 Next Steps After Ads Are Live:

1. Monitor Performance (first week)
2. Optimize Ad Positions (if needed)
3. Test Different Ad Sizes (A/B testing)
4. Track User Feedback (any complaints?)
5. Plan PRO Tier (ad-free option)

---

💰 Revenue Expectations:

Based on your traffic estimate:

Month 1: $100-150

• 10,000 visitors
• 15,000 tool page views
• 45,000 ad impressions

Month 3: $300-400

• 30,000 visitors
• 45,000 tool page views
• 135,000 ad impressions

Month 6: $500-700

• 50,000 visitors
• 75,000 tool page views
• 225,000 ad impressions

Month 12: $1,000-1,500

• 100,000 visitors
• 150,000 tool page views
• 450,000 ad impressions

---

✅ Checklist:

• Create 4 ad units in AdSense dashboard
• Copy all 4 slot IDs
• Update AdColumn.js with 3 slot IDs
• Update MobileAdBanner.js with 1 slot ID
• Run npm run build:no-snap
• Deploy to production
• Test on desktop (should see 3 ads in sidebar)
• Test on mobile (should see 1 sticky banner)
• Test homepage (should see NO ads)
• Wait 30 minutes for ads to start showing
• Monitor AdSense dashboard for first earnings!

---

You're almost done! Just need those 4 slot IDs from AdSense! 🎉