OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Canovice
  • Start date Start date
C

Canovice

Guest
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:

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;

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

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} />

and it seems like only ad5 is displaying enter image description here

our app.scss with two relevant classes

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;
}
<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>
 

Latest posts

Top