Webtiryaki Bulut Themes!

The simplest and fastest way to build great UI for your community.
Log in Register

Google Ad Sense doesn't remove the slots sometimes even with the given class the provide

  • Thread starter Thread starter benxha
  • Start date Start date
B

benxha

Guest
So I'm using Google Ads with Next.js, and this is how I have installed it:

Code: 
const _document: FC = (): ReactNode => {
    return (
        <Html>
            <Head />

            <body>
                <Script
                    async
                    src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ADS_CLIENT}`}
                    crossOrigin='anonymous'
                    strategy='afterInteractive'
                />

                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

export default _document

And this is the ad unit component where, for each ad, I load it using useEffect.

Code: 
const Ad: FC<AdComponentPropTypes> = (props): ReactNode => {
    const { 
        slot, 
        className, 
        responsive
    } = props

    useEffect(() => {
        try {
            if (typeof window !== 'undefined') {
                (adsbygoogle = (window as any).adsbygoogle || []).push({})
            }
        } 
        
        catch (error) {
            console.error(error)
        }
    }, [])

    return  (
        <ins 
            style={IS_PRODUCTION ? {} : { background: '#99999925' }}
            data-ad-client={ADS_CLIENT}
            data-ad-slot={slot}
            className={`adsbygoogle flex items-center justify-center ${className}`}
            data-ad-format='auto'
            data-full-width-responsive={responsive ? 'true' : 'false'}
        />
    )
}

export default Ad

And this works fine; it shows ads sometimes and sometimes it doesn't, but this is because of Google Ads, and that is fine. The problem is with a dynamic list. I iterate and inject ads when displaying the list, which is fine, but sometimes it doesn't hide the empty slot, and sometimes it does. This is very weird behavior, and I need someone who might have experienced the same issue to answer.

Here is the list iteration where, based on an algorithm, I sometimes display an ad in a slot, and most of the other content is my gallery images. Here is the code:

Code: 
const PicsList: FC<PicsListProps> = (): ReactNode => {
    const { gridItems, picSize } = useWidth()
    const { Tab } = ProfileState()
    const { Pics, Loading, HasMore } = PicsState()
    const { PicsGrid } = PicsGridBuilder(Pics === null ? [...MockupPics(picSize || 480, gridItems)] : !Loading || !HasMore ? [...Pics] : [...Pics, ...MockupPics(picSize || 480, gridItems)], gridItems)
    
    return (
        <section className="mx-auto h-full max-w-10xl grid gap-2 md:gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7">
            {Pics !== null && PicsGrid?.map((set_of_pics: any, listIndex: number) => {
                return (
                    <div className="flex flex-col gap-2 md:gap-4" key={listIndex}>
                        {set_of_pics?.map((pic: PicInterface | PicSkeletonTypes, index: number) => {
                            // @ts-ignore
                            if (pic.type === 'ad') return (
                                <Fragment key={Math.random() + index + listIndex}>
                                    <Ad 
                                        className='border-[#D0C3E750] border-4 bg-[var(--skeleton-background)] rounded-[24px] md:rounded-[44px] min-h-[340px] max-h-[340] sm:min-h-[500px] sm:max-h-[500px] overflow-hidden'
                                        slot={AD_UNITS.PIC_ITEM}
                                        responsive={false}
                                    />
                                </Fragment>
                            )

                            else if ('height' in pic) {
                                if (Loading || Pics?.length === 0 || 'height' in PicsGrid[0][0]) return (
                                    <Fragment key={Math.random() + index + listIndex}>
                                        <PicSkeleton height={pic.height} />
                                    </Fragment>
                                )
                            }
                            
                            else return (
                                <Fragment key={pic?._id  + index + listIndex + pic.Title}>
                                    <PicItem admin={Tab === USER_PROFILE_TABS.APPROVAL} {...pic} />
                                </Fragment>
                            )
                        })}
                    </div>
                )
            })}

            {(Pics === null || Loading) && PicsGrid?.map((set_of_pics: any, listIndex: number) => {
                return (
                    <div className="flex flex-col gap-3 md:gap-4" key={listIndex}>
                        {set_of_pics?.map((pic: PicSkeletonTypes, index: number) => {
                            return (
                                <Fragment key={Math.random() + index + listIndex}>
                                    <PicSkeleton height={pic.height} />
                                </Fragment>
                            )
                        })}
                    </div>
                )
            })}
        </section>
    )
}

export default PicsList

I tried with the classes Google provides but something seems to mis on the puzzle. Here is the anwser from Google: https://support.google.com/adsense/answer/10762946?hl=en
<p>So I'm using Google Ads with Next.js, and this is how I have installed it:</p>
<pre><code>const _document: FC = (): ReactNode => {
return (
<Html>
<Head />

<body>
<Script
async
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ADS_CLIENT}`}
crossOrigin='anonymous'
strategy='afterInteractive'
/>

<Main />
<NextScript />
</body>
</Html>
)
}

export default _document
</code></pre>
<p>And this is the ad unit component where, for each ad, I load it using useEffect.</p>
<pre><code>const Ad: FC<AdComponentPropTypes> = (props): ReactNode => {
const {
slot,
className,
responsive
} = props

useEffect(() => {
try {
if (typeof window !== 'undefined') {
(adsbygoogle = (window as any).adsbygoogle || []).push({})
}
}

catch (error) {
console.error(error)
}
}, [])

return (
<ins
style={IS_PRODUCTION ? {} : { background: '#99999925' }}
data-ad-client={ADS_CLIENT}
data-ad-slot={slot}
className={`adsbygoogle flex items-center justify-center ${className}`}
data-ad-format='auto'
data-full-width-responsive={responsive ? 'true' : 'false'}
/>
)
}

export default Ad
</code></pre>
<p>And this works fine; it shows ads sometimes and sometimes it doesn't, but this is because of Google Ads, and that is fine. The problem is with a dynamic list. I iterate and inject ads when displaying the list, which is fine, but sometimes it doesn't hide the empty slot, and sometimes it does. This is very weird behavior, and I need someone who might have experienced the same issue to answer.</p>
<p>Here is the list iteration where, based on an algorithm, I sometimes display an ad in a slot, and most of the other content is my gallery images. Here is the code:</p>
<pre><code>const PicsList: FC<PicsListProps> = (): ReactNode => {
const { gridItems, picSize } = useWidth()
const { Tab } = ProfileState()
const { Pics, Loading, HasMore } = PicsState()
const { PicsGrid } = PicsGridBuilder(Pics === null ? [...MockupPics(picSize || 480, gridItems)] : !Loading || !HasMore ? [...Pics] : [...Pics, ...MockupPics(picSize || 480, gridItems)], gridItems)

return (
<section className="mx-auto h-full max-w-10xl grid gap-2 md:gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7">
{Pics !== null && PicsGrid?.map((set_of_pics: any, listIndex: number) => {
return (
<div className="flex flex-col gap-2 md:gap-4" key={listIndex}>
{set_of_pics?.map((pic: PicInterface | PicSkeletonTypes, index: number) => {
// @ts-ignore
if (pic.type === 'ad') return (
<Fragment key={Math.random() + index + listIndex}>
<Ad
className='border-[#D0C3E750] border-4 bg-[var(--skeleton-background)] rounded-[24px] md:rounded-[44px] min-h-[340px] max-h-[340] sm:min-h-[500px] sm:max-h-[500px] overflow-hidden'
slot={AD_UNITS.PIC_ITEM}
responsive={false}
/>
</Fragment>
)

else if ('height' in pic) {
if (Loading || Pics?.length === 0 || 'height' in PicsGrid[0][0]) return (
<Fragment key={Math.random() + index + listIndex}>
<PicSkeleton height={pic.height} />
</Fragment>
)
}

else return (
<Fragment key={pic?._id + index + listIndex + pic.Title}>
<PicItem admin={Tab === USER_PROFILE_TABS.APPROVAL} {...pic} />
</Fragment>
)
})}
</div>
)
})}

{(Pics === null || Loading) && PicsGrid?.map((set_of_pics: any, listIndex: number) => {
return (
<div className="flex flex-col gap-3 md:gap-4" key={listIndex}>
{set_of_pics?.map((pic: PicSkeletonTypes, index: number) => {
return (
<Fragment key={Math.random() + index + listIndex}>
<PicSkeleton height={pic.height} />
</Fragment>
)
})}
</div>
)
})}
</section>
)
}

export default PicsList
</code></pre>
<p>I tried with the classes Google provides but something seems to mis on the puzzle. Here is the anwser from Google: <a href="https://support.google.com/adsense/answer/10762946?hl=en" rel="nofollow noreferrer">https://support.google.com/adsense/answer/10762946?hl=en</a></p>
Continue reading...
 
You must log in or register to reply here.
Top