How to show 60px height google adsense banner ad in react app?

[Canovice]

I am struggling to figure out how to show an google adsense ad on our react app with a sufficiently narrow height (preferably 50 - 60 pixels, 75 pixels max). We have the following component:

const Adsense = ({ height, format = 'auto', inRow = true }) => {
    const { userTier } = useContext(GlobalContext);

    // Check if Adsense should be displayed
    if (process.env.REACT_APP_SHOW_ADSENSE !== 'true' || userTier.value >= 2) {
        return null; // Do not render anything if not staging
    }

    // just the one ad for now
    useEffect(() => {
        try {
            (window.adsbygoogle = window.adsbygoogle || []).push({});
        } catch (e) {
            console.error('Error loading Adsense script:', e);
        }
    }, []);

    // mock ad for localhost
    const isLocalhost = window?.location?.hostname === 'localhost' || false;
    if (isLocalhost) {
        return (
            // <div style={{ position: 'fixed', bottom: 0, width: '100%', zIndex: 1000, backgroundColor: 'gray', textAlign: 'center' }}>
            <div style={{ backgroundColor: 'gray', textAlign: 'center' }}>
                <p style={{ padding: '20px', color: 'white' }}>Ad placeholder</p>
            </div>
        );
    }

    // real ad for staging/production (fixed to location)
    const rowStyle = height ? { maxHeight: height } : {};

    if (inRow === true) {
        return (
            <Row className='dropdown-row' style={rowStyle}>
                <ins
                    className='adsbygoogle'
                    style={{ display: 'block', height: '100%' }}
                    data-ad-client='ca-pub-1003439591401824'
                    data-ad-slot='2096268348'
                    data-ad-format={format}
                    data-full-width-responsive='true'
                />
            </Row>
        );
    } else {
        return (
            <ins
                className='adsbygoogle'
                style={{ display: 'block' }}
                data-ad-client='ca-pub-XXXXX'
                data-ad-slot='XXXXX'
                data-ad-format={format}
                data-full-width-responsive='true'
            />
        );
    }
};

export default Adsense;

Without style={{ maxHeight: 75 }}, a giant rectangle ad of 250px is displaying. When I add style={{ maxHeight: 75 }}, or when I replace data-ad-format from 'auto' to 'horizontal', the ad stop appearing on our website. Is there anything else we can do to get a 60 - 75px ad height?

EDIT we have the following rendering on our page

            <p>ad1</p>
            <Adsense height={75} format='horizontal' inRow={true} />
            <p>ad2</p>
            <Adsense height={90} format='horizontal' inRow={true} />
            <p>ad3</p>
            <Adsense height={null} format='auto' inRow={true} />
            <p>ad4</p>
            <Adsense height={null} format='horizontal' inRow={true} />
            <p>ad5</p>
            <Adsense height={75} format='auto' inRow={false} />
            <p>ad6</p>
            <Adsense height={90} format='auto' inRow={false} />
            <p>ad7</p>
            <Adsense height={null} format='auto' inRow={false} />
            <p>ad8</p>
            <Adsense height={null} format='horizontal' inRow={false} />

and it seems like only ad5 is displaying

our app.scss with two relevant classes

.dropdown-row { 
  margin: 0 auto;
  max-width: 1580px;
  padding: 0px 20px;
  @include media-breakpoint-down(lg) { padding: 0px 15px; }
  @include media-breakpoint-down(md) { padding: 0px 13px; }
  @include media-breakpoint-down(sm) { padding: 0px 11px; }
  @include media-breakpoint-down(xs) { padding: 0px 10px; }
}

// empty ad divs should have no display
.adsbygoogle:empty {
  display: none;
}

<p>I am struggling to figure out how to show an google adsense ad on our react app with a sufficiently narrow height (preferably 50 - 60 pixels, 75 pixels max). We have the following component:</p>
<pre><code>const Adsense = ({ height, format = 'auto', inRow = true }) => {
const { userTier } = useContext(GlobalContext);

// Check if Adsense should be displayed
if (process.env.REACT_APP_SHOW_ADSENSE !== 'true' || userTier.value >= 2) {
return null; // Do not render anything if not staging
}

// just the one ad for now
useEffect(() => {
try {
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (e) {
console.error('Error loading Adsense script:', e);
}
}, []);

// mock ad for localhost
const isLocalhost = window?.location?.hostname === 'localhost' || false;
if (isLocalhost) {
return (
// <div style={{ position: 'fixed', bottom: 0, width: '100%', zIndex: 1000, backgroundColor: 'gray', textAlign: 'center' }}>
<div style={{ backgroundColor: 'gray', textAlign: 'center' }}>
<p style={{ padding: '20px', color: 'white' }}>Ad placeholder</p>
</div>
);
}

// real ad for staging/production (fixed to location)
const rowStyle = height ? { maxHeight: height } : {};

if (inRow === true) {
return (
<Row className='dropdown-row' style={rowStyle}>
<ins
className='adsbygoogle'
style={{ display: 'block', height: '100%' }}
data-ad-client='ca-pub-1003439591401824'
data-ad-slot='2096268348'
data-ad-format={format}
data-full-width-responsive='true'
/>
</Row>
);
} else {
return (
<ins
className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-XXXXX'
data-ad-slot='XXXXX'
data-ad-format={format}
data-full-width-responsive='true'
/>
);
}
};

export default Adsense;
</code></pre>
<p>Without <code>style={{ maxHeight: 75 }}</code>, a giant rectangle ad of 250px is displaying. When I add <code>style={{ maxHeight: 75 }}</code>, or when I replace <code>data-ad-format</code> from 'auto' to 'horizontal', the ad stop appearing on our website. Is there anything else we can do to get a 60 - 75px ad height?</p>
<p><strong>EDIT</strong> we have the following rendering on our page</p>
<pre><code> <p>ad1</p>
<Adsense height={75} format='horizontal' inRow={true} />
<p>ad2</p>
<Adsense height={90} format='horizontal' inRow={true} />
<p>ad3</p>
<Adsense height={null} format='auto' inRow={true} />
<p>ad4</p>
<Adsense height={null} format='horizontal' inRow={true} />
<p>ad5</p>
<Adsense height={75} format='auto' inRow={false} />
<p>ad6</p>
<Adsense height={90} format='auto' inRow={false} />
<p>ad7</p>
<Adsense height={null} format='auto' inRow={false} />
<p>ad8</p>
<Adsense height={null} format='horizontal' inRow={false} />
</code></pre>
<p>and it seems like only ad5 is displaying
<a href="https://i.sstatic.net/L48Z4Tdr.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/L48Z4Tdr.png" alt="enter image description here" /></a></p>
<p>our app.scss with two relevant classes</p>
<pre><code>.dropdown-row {
margin: 0 auto;
max-width: 1580px;
padding: 0px 20px;
@include media-breakpoint-down(lg) { padding: 0px 15px; }
@include media-breakpoint-down(md) { padding: 0px 13px; }
@include media-breakpoint-down(sm) { padding: 0px 11px; }
@include media-breakpoint-down(xs) { padding: 0px 10px; }
}

// empty ad divs should have no display
.adsbygoogle:empty {
display: none;
}
</code></pre>
Continue reading...