Google AdSense Implementation Guide

Google AdSense Implementation Guide

Overview

Google AdSense has been integrated into your Jekyll website with ads placed in the following locations:

  1. Sidebar: Below the timeline navigation (both desktop and mobile)
  2. Post Top: Below the post title and metadata
  3. Post Bottom: Above the previous/next post navigation buttons

Configuration

Step 1: Update AdSense Configuration

Edit the file _data/adsense.yml and replace the placeholder values:

google_adsense:
  enabled: true
  publisher_id: "ca-pub-YOUR_ACTUAL_PUBLISHER_ID"  # Replace with your AdSense Publisher ID
  ad_slots:
    sidebar: "YOUR_SIDEBAR_AD_UNIT_ID"             # Replace with your sidebar ad unit ID
    post_top: "YOUR_POST_TOP_AD_UNIT_ID"           # Replace with your post top ad unit ID  
    post_bottom: "YOUR_POST_BOTTOM_AD_UNIT_ID"     # Replace with your post bottom ad unit ID

Step 2: Get Your AdSense Publisher ID

  1. Log in to your Google AdSense account
  2. Go to Account > Account Information
  3. Find your Publisher ID (starts with “ca-pub-“)

Step 3: Create Ad Units

  1. In AdSense, go to Ads > By ad unit
  2. Create three ad units:
    • Sidebar Ad: Recommended size - Square (300x250) or Vertical Banner (120x600)
    • Post Top Ad: Recommended size - Banner (728x90) or Large Rectangle (336x280)
    • Post Bottom Ad: Recommended size - Banner (728x90) or Large Rectangle (336x280)
  3. Copy each ad unit ID to the configuration file

Step 4: Testing

To disable ads during development, set enabled: false in _data/adsense.yml.

File Structure

_data/
  adsense.yml              # AdSense configuration
_includes/
  adsense-head.html        # AdSense script include
  adsense-sidebar.html     # Sidebar ad code
  adsense-post-top.html    # Post top ad code
  adsense-post-bottom.html # Post bottom ad code
assets/css/
  adsense.css             # AdSense styling

Customization

Styling

Modify assets/css/adsense.css to adjust the appearance of ad containers:

  • Background colors
  • Border styles
  • Spacing and margins
  • Mobile responsiveness

Ad Placement

The ads are included using Jekyll’s include system:

  • `

` - For sidebar ads

  • `

` - For post top ads

  • `

` - For post bottom ads

Responsive Design

The current implementation uses:

  • data-full-width-responsive="true" for automatic responsive sizing
  • CSS media queries for mobile-specific adjustments
  • Flexible ad formats that adapt to container size

AdSense Policies Compliance

Important Considerations:

  1. Content Policy: Ensure your content complies with AdSense content policies
  2. Placement Policy: Ads are placed in compliance with AdSense placement policies
  3. Traffic Quality: Only use legitimate traffic sources
  4. Click Policy: Never click on your own ads or encourage others to do so
  • Monitor ad performance regularly in AdSense dashboard
  • Test different ad sizes and formats
  • Ensure ads don’t negatively impact user experience
  • Keep ad-to-content ratio balanced

Troubleshooting

Ads Not Showing:

  1. Check that enabled: true in _data/adsense.yml
  2. Verify Publisher ID and Ad Unit IDs are correct
  3. Ensure your site is approved by AdSense
  4. Check browser console for JavaScript errors

Layout Issues:

  1. Adjust CSS in assets/css/adsense.css
  2. Test on different screen sizes
  3. Ensure ads don’t break site layout on mobile devices

Performance Considerations

  • AdSense script loads asynchronously to avoid blocking page render
  • CSS includes minimum height to prevent layout shift
  • Responsive ads adapt to different screen sizes automatically