Google Analytics & AdSense Integration Guide

Google Analytics & AdSense Integration Guide

🚨 IMPORTANT: Replace Placeholder IDs

Before going live, you MUST replace these placeholder IDs with your actual Google IDs:

1. Google Analytics Setup

1. Create Google Analytics Account:
   • Go to https://analytics.google.com/
   • Create a new property for your website
   • Get your Measurement ID (format: G-XXXXXXXXXX)
2. Replace in Cookie Consent file:
   • File: _includes/cookie-consent.html
   • Find: G-XXXXXXXXXX (appears twice)
   • Replace with your actual Measurement ID

2. Google AdSense Setup

1. Apply for Google AdSense:
   • Go to https://www.google.com/adsense/
   • Submit your website for review
   • Wait for approval (can take days/weeks)
2. Get your Publisher ID:
   • Format: ca-pub-XXXXXXXXXXXXXXXX
   • Find it in your AdSense dashboard
3. Replace in files:
   • File: _includes/cookie-consent.html
     • Find: ca-pub-XXXXXXXXXXXXXXXX
     • Replace with your Publisher ID
   • File: _includes/ad-banner.html
     • Find: ca-pub-XXXXXXXXXXXXXXXX
     • Replace with your Publisher ID
     • Find: 1234567890
     • Replace with actual ad slot ID from AdSense

📝 How to Use Ad Units

Adding Ads to Race Pages

Edit your save_markdown() function in scrape_and_generate.py:

# Add this after the race summary, before the results table
md += f"""

{summary}

<!-- Advertisement -->
{{% include ad-banner.html %}}

---

**Crónica por:** [{author_info['name']}]({author_info['url']})
"""

Manual Ad Placement

You can manually add ads to any markdown file:

<!-- In any .md file -->
<!-- Google AdSense Ad Unit - Replace with your actual ad code -->
<!-- This is a responsive banner ad - place it between content sections -->

<div class="ad-container" style="text-align: center; margin: 20px 0; padding: 10px;">
  <p style="font-size: 12px; color: #666; margin-bottom: 10px;">Publicidad</p>
  
  <!-- Replace 'ca-pub-XXXXXXXXXXXXXXXX' with your Publisher ID -->
  <!-- Replace '1234567890' with your actual ad slot ID -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="1234567890"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

<style>
.ad-container {
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  background-color: #fafafa;
  margin: 20px auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .ad-container {
    margin: 15px 5px;
  }
}
</style>

🔧 Testing

Test Cookie Consent:

1. Clear your browser cookies for your site
2. Reload the page
3. Cookie banner should appear
4. Test all consent options

Test Analytics:

1. Install Google Analytics Debugger extension
2. Check Real-time reports in Analytics dashboard
3. Verify events are being tracked

Test AdSense:

1. Ads may take 24-48 hours to appear after setup
2. Use Chrome DevTools to check for AdSense errors
3. Check AdSense dashboard for policy issues

⚖️ Legal Compliance

GDPR Requirements Met:

• ✅ Cookie consent banner
• ✅ Granular cookie controls
• ✅ Privacy policy with all required information
• ✅ Cookie policy with detailed explanations
• ✅ User rights clearly explained
• ✅ Legal basis for processing stated

Additional Recommendations:

1. Privacy Policy Link: Already added to footer
2. Cookie Settings: Users can reconfigure anytime
3. Data Retention: Clearly stated in policies
4. Third-party Disclosure: Google partnerships disclosed
5. Contact Information: Available via GitHub

🌍 International Considerations

EU/GDPR:

• All requirements covered in privacy and cookie policies
• Explicit consent required for advertising cookies

California (CCPA):

• Current implementation covers basic requirements
• Consider adding “Do Not Sell My Info” if needed

UK (UK-GDPR):

• Same requirements as EU GDPR
• Current implementation is compliant

📊 Analytics Events to Track

Consider adding custom events in your race pages:

// Track race page views by type
gtag('event', 'race_view', {
  'race_type': 'road', // or 'cyclocross', 'gravel', etc.
  'author': 'Javier Morata'
});

// Track popular races
gtag('event', 'popular_race', {
  'race_name': 'Tour de France'
});

🚀 Performance Tips

1. Lazy Loading: Ads load after cookie consent
2. Mobile Optimization: Responsive ad units included
3. Page Speed: Analytics loads asynchronously
4. SEO: Privacy pages help with search rankings

🛠️ Troubleshooting

Common Issues:

1. Ads not showing:
   • Check AdSense approval status
   • Verify Publisher ID is correct
   • Check browser ad blockers
2. Analytics not tracking:
   • Verify Measurement ID
   • Check cookie consent is accepted
   • Use Analytics debugger
3. Cookie banner not appearing:
   • Clear browser cookies
   • Check console for JavaScript errors

📋 Go-Live Checklist

• Replace all placeholder IDs
• Test cookie consent functionality
• Verify Analytics tracking
• Confirm AdSense approval
• Test on mobile devices
• Check page load speed
• Verify legal pages accessibility
• Test from different countries (VPN)

📈 Revenue Optimization

Once everything is working:

1. Analyze Traffic: Use Analytics to find popular content
2. Ad Placement: Test different ad positions
3. Content Strategy: Create content around popular races
4. SEO: Optimize for cycling-related keywords
5. Social Media: Share race summaries to increase traffic

---

Remember: Always prioritize user experience over ad revenue. Too many ads can hurt your site’s credibility and performance.