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:
import React, { useEffect, useContext } from 'react';
import GlobalContext from '../../context/GlobalContext';
import { Row } from 'react-bootstrap';
const Adsense = () => {
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)
return (
<Row className='dropdown-row' style={{ maxHeight: 75 }}>
<ins
className='adsbygoogle'
style={{ display: 'block', height: '100%' }}
data-ad-client='ca-pub-XXXXX'
data-ad-slot='XXXXX'
data-ad-format='auto' // 'horizontal'
data-full-width-responsive='true'
/>
</Row>
);
};
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?