Skip to main content

How Google AdSense Works

This document explains the fundamental concepts of Google AdSense from first principles. Understanding these concepts is essential before working with our implementation.

note

Generated by Opus 4.5 Reviewed by ali

The Three Components​

AdSense requires three things to display an ad:

  1. The AdSense Library Script - Loaded once in <head>
  2. The <ins> Element - Marks where an ad should appear
  3. The adsbygoogle.push({}) Call - Triggers ad loading

The Ad Loading Sequence​

The Queue System​

The key insight is that window.adsbygoogle is a queue. Each push({}) call processes ONE unfilled <ins class="adsbygoogle"> element in DOM order.

What Happens During push({})​

The data-ad-status Attribute​

After AdSense processes an <ins> element, it sets the data-ad-status attribute:

ValueMeaning
filledAn ad was returned and is displaying
unfilledNo ads available, slot is empty
unfill-optimizedNo ads, but AdSense may optimize the space

This attribute is crucial for:

  1. Detecting if an ad loaded successfully
  2. Hiding empty ad slots to avoid blank space
  3. Preventing duplicate initialization errors

Reference: Google AdSense Documentation - data-ad-status

Ad Unit Types​

Google offers several ad unit types, each suited for different placements:

Display Ads (Responsive)​

  • Best for: Banners, sidebars, fixed placements
  • Supports: CSS media queries for exact sizing
  • Use when: You want control over dimensions

In-Article Ads​

  • Best for: Between content sections
  • Behaviour: Fluid, adapts to container width
  • Use when: You want ads that blend with content

In-Feed Ads​

  • Best for: Within lists of items (like job listings)
  • Behaviour: Matches the look of surrounding content
  • Use when: Displaying ads within repeated content

Responsive Ad Sizing​

For Display ads, you can use CSS media queries to set exact sizes per screen width:

/* Mobile: Standard mobile banner */
.ad-banner { width: 320px; height: 50px; }

/* Tablet: Standard banner */
@media (min-width: 500px) {
  .ad-banner { width: 468px; height: 60px; }
}

/* Desktop: Leaderboard */
@media (min-width: 800px) {
  .ad-banner { width: 728px; height: 90px; }
}

Important: When using CSS for exact sizes, you must NOT include data-ad-format="auto" on the <ins> element.

Reference: Google AdSense - Modify Responsive Ad Code

Standard IAB Ad Sizes​

These industry-standard sizes have the best fill rates:

SizeNameBest For
320x50Mobile BannerMobile headers/footers
320x100Large Mobile BannerMobile, more visible
468x60BannerTablet
728x90LeaderboardDesktop headers
300x250Medium RectangleSidebars, in-content
336x280Large RectangleSidebars, higher revenue

Key Takeaways​

  1. One script, many ads: Load the AdSense script once in <head>, use multiple <ins> elements for different ad placements

  2. Queue-based: Each push({}) processes one unfilled slot - call it once per <ins> element

  3. Status tracking: AdSense sets data-ad-status after processing - use this to detect filled/unfilled state

  4. Environment matters: Never load AdSense in development - use placeholders instead

  5. Size affects revenue: Standard IAB sizes have better fill rates than custom sizes