Skip to main content

Troubleshooting Guide

This document covers common issues with AdSense integration and how to resolve them.

Common Errors​

Error: "All 'ins' elements already have ads in them"​

TagError: adsbygoogle.push() error: All 'ins' elements in the DOM
with class=adsbygoogle already have ads in them.

Cause: push({}) was called on an <ins> element that already has an ad.

When it happens:

  • React Router navigation (component remounts)
  • React StrictMode (double-mounting in development)
  • Multiple push() calls for the same element

Solution: Check data-ad-status before calling push():

useEffect(() => {
  // Check if already processed
  if (adRef.current?.dataset?.adStatus) {
    return  // Skip - already has an ad
  }

  (window.adsbygoogle = window.adsbygoogle || []).push({})
}, [])

Ads Not Showing in Production​

Symptoms:

  • Blank space where ad should be
  • No network requests to googlesyndication.com
  • No errors in console

Checklist:

  1. Check environment variable:

    # In browser console
    console.log(import.meta.env.VITE_ADSENSE_PUBLISHER_ID)

    Should show ca-pub-XXXXXXXX

  2. Check script loaded:

    # In browser console
    typeof window.adsbygoogle

    Should return "object", not "undefined"

  3. Check ad unit exists in AdSense:

  4. Check for ad blockers:

    • Disable ad blockers temporarily
    • Try in incognito mode

Blank Space When Ad Doesn't Fill​

Symptoms: Empty space where ad should be (ad unit unfilled)

Cause: AdSense couldn't find an ad to show

Solution: Our CSS should hide unfilled ads automatically:

.ad-sense-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none !important;
}

If still showing blank space:

  1. Check if CSS is loaded (inspect element)
  2. Verify the wrapper has class ad-sense-wrapper
  3. Check browser support for :has() selector

Browser support for :has():

  • Chrome 105+ (Sep 2022)
  • Safari 15.4+ (Mar 2022)
  • Firefox 121+ (Dec 2023)
  • Edge 105+ (Sep 2022)

Wrong Ad Size Displayed​

Symptoms: Ad appears at wrong dimensions

Possible causes:

  1. Using in-article ad for banner placement:

    • In-article ads are fluid, not fixed-size
    • Use Display ads for fixed dimensions

  2. CSS class not applied:

    // Make sure responsiveClass is passed
    <AdSenseUnit
      slot={AD_SENSE_UNITS.HOME_HERO}
      responsiveClass="ad-sense-horizontal-banner"  // Required
    />

  3. data-ad-format still present: When using responsiveClass, we should NOT have data-ad-format:

    // This is handled automatically, but verify in DevTools
    { ...(!useResponsiveClass && { 'data-ad-format': format }) }

Placeholder Shows in Production​

Symptoms: See "Google AdSense Placeholder" in production

Cause: VITE_ADSENSE_PUBLISHER_ID is not set or empty

Solution:

  1. Check deployment configuration:

    # deploy/deploy.yml
    env:
      VITE_ADSENSE_PUBLISHER_ID:
        - VITE_ADSENSE_PUBLISHER_ID

  2. Check Dockerfile:

    ARG VITE_ADSENSE_PUBLISHER_ID
    ENV VITE_ADSENSE_PUBLISHER_ID=$VITE_ADSENSE_PUBLISHER_ID

  3. Verify the secret is set in your deployment platform

CLS (Cumulative Layout Shift) Issues​

Symptoms: Content jumps when ad loads

Cause: Space not reserved before ad loads

Solution: Always specify minHeight:

// For fluid ads
<AdSenseUnit
  slot={AD_SENSE_UNITS.HOME_AFTER_HERO}
  format="fluid"
  layout="in-article"
  minHeight="100px"  // Reserve space
/>

// For responsive banners (CSS handles it)
<AdSenseUnit
  slot={AD_SENSE_UNITS.HOME_HERO}
  responsiveClass="ad-sense-horizontal-banner"
  // minHeight not needed - CSS sets dimensions
/>

Debugging Tools​

Check Ad Status in Console​

// Find all ad slots and their status
document.querySelectorAll('ins.adsbygoogle').forEach((ins, i) => {
  console.log(`Ad ${i}:`, {
    slot: ins.dataset.adSlot,
    status: ins.dataset.adStatus,
    client: ins.dataset.adClient
  })
})

Check if AdSense Script Loaded​

// Should return an array
console.log(window.adsbygoogle)

// Check if it's the real AdSense (not just our fallback array)
console.log(window.adsbygoogle.loaded)  // true if script loaded

Force Placeholder in Production (Testing)​

Temporarily use PLACEHOLDER slot to test placeholder rendering:

<AdSenseUnit
  slot={AD_SENSE_UNITS.PLACEHOLDER}  // Forces placeholder
  minHeight="100px"
/>

Environment-Specific Issues​

Development​

IssueSolution
Want to see real adsCan't - AdSense has no sandbox. Use production.
Placeholder not showingCheck slot is not PLACEHOLDER constant
Console errors about adsbygoogleExpected when publisher ID not set

QA​

IssueSolution
Need to test ad behaviorDeploy to production with test page
Placeholder dimensions wrongPass minHeight or responsiveClass

Production​

IssueSolution
Low fill rateUse standard IAB sizes (320x50, 728x90, etc.)
Ads loading slowlyNormal - ads are loaded asynchronously
Revenue not trackingCreate separate ad units per placement

Google AdSense Dashboard Issues​

Ad Unit Not Showing​

  1. Wait 10-15 minutes after creating new ad unit
  2. Verify site is approved in AdSense
  3. Check ad unit is not paused

Low Fill Rate​

  1. Use standard IAB ad sizes
  2. Check placement isn't too intrusive (policy violation)
  3. Verify traffic quality

Policy Violation Warnings​

  1. Never click your own ads
  2. Don't encourage users to click ads
  3. Don't place ads on pages with prohibited content
  4. Ensure ads are clearly distinguishable from content

Quick Reference​

Ad Unit Types​

TypeBest ForFormat PropLayout Prop
Display (Responsive)Banners, fixed positions'auto' or use responsiveClass-
In-ArticleBetween content'fluid''in-article'
In-FeedWithin lists'fluid''in-feed'

Standard Sizes (Best Fill Rates)​

MobileTabletDesktop
320x50468x60728x90
320x100300x250970x90
300x250336x280300x250

Key Resources​