// formats

Ad Format Showcase

Every size and format the simulator renders — all 12 standard IAB fixed slots, the responsive breakpoint system, and fluid layout ads. Each card shows the real mock output the library produces.

// fixed slots

All 12 Standard IAB Sizes

Set explicit width and height in the inline style to use a fixed slot. Click any card to preview the format at full size.

html

<ins
  class="adsbygoogle"
  style="display:block;width:300px;height:250px"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="3000000007"
></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Billboard

970×250

Click to preview full size

Large Leaderboard

970×90

Click to preview full size

Leaderboard

728×90

Click to preview full size

Banner

468×60

Click to preview full size

Large Rectangle

336×280

Click to preview full size

Half Page

300×600

Click to preview full size

Medium Rectangle

300×250

Click to preview full size

Large Mobile Banner

320×100

Click to preview full size

Mobile Banner

320×50

Click to preview full size

Half Banner

234×60

Click to preview full size

Wide Skyscraper

160×600

Click to preview full size

Skyscraper

120×600

Click to preview full size

// data-ad-format="auto"

Responsive Breakpoints

With data-ad-format="auto" the simulator selects a size based on the container's width. Click a breakpoint to see which size is chosen.

320×50

Mobile Banner — container width: 320px

Markup

html

<ins
  class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="4000000001"
  data-ad-format="auto"
></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Breakpoint logic

// src/engine/adSizeEngine.js
if (containerWidth < 400)  return 320×50   // Mobile Banner
if (containerWidth < 600)  return 300×250  // Medium Rectangle
if (containerWidth < 900)  return 728×90   // Leaderboard
if (containerWidth < 1100) return 970×90   // Large Leaderboard
return 970×250                             // Billboard

// data-ad-layout

Layout Ads

Layout ads use fluid dimensions relative to their container width. Set data-ad-layout to choose the type.

Placed inside article body between paragraphs. Height is 35% of container width.

Height formula: containerWidth × 0.35

At 640px → 640×224

Markup

html

<ins
  class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="5000000001"
  data-ad-format="fluid"
  data-ad-layout="in-article"
></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Engine logic

// src/engine/adSizeEngine.js
if (layout === 'in-article') {
  return {
    width:  containerWidth,      // parent.offsetWidth
    height: Math.round(containerWidth * 0.35),
  }
}