Why don't Google Ads show up?
import React from 'react' import { useEffect } from 'react'; import {Bling as GPT} from "react-gpt"; function Ads() { useEffect(() => { window.adsbygoogle = window.adsbygoogle || []; window.adsbygoogle.push({}); }, []) return ( <> <ins className="adsbygoogle" style={{display:"block", width:"250px"}} data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-1716395586958019" data-ad-slot="9360082050" data-adtest="on"> </ins> </> ) } // result of HTML after adding the above code. But I think data-ad-status is unfilled but don't know why. <ins class="adsbygoogle" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-1716395586958019" data-ad-slot="9360082050" data-adtest="on" style="display: block; width: 250px; height: 315px;" data-adsbygoogle-status="done" data-ad-status="unfilled"> <div id="aswift_1_host" tabindex="0" title="Advertisement" aria-label="Advertisement" style="border: none; height: 315px; width: 250px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;"> <iframe id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;border:0;width:250px;height:315px;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="250" height="315" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1716395586958019&output=html&h=315&slotname=9360082050&adk=179383159&adf=4280140434&pi=t.ma~as.9360082050&w=250&lmt=1686243940&rafmt=11&format=250x315&url=http%3A%2F%2Flocalhost%3A3000%2F&adtest=on&wgl=1&uach=WyJXaW5kb3dzIiwiMTUuMC4wIiwieDg2IiwiIiwiMTE0LjAuNTczNS45MCIsW10sMCxudWxsLCI2NCIsW1siTm90LkEvQnJhbmQiLCI4LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjExNC4wLjU3MzUuOTAiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMTQuMC41NzM1LjkwIl1dLDBd&dt=1686243940235&bpp=18&bdt=833&idt=119&shv=r20230606&mjsv=m202306050101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D0131efc224260eb6-22fb51662ce000b1%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_Mau56qS_H-iE3bKsxmOr1TCP2_z-A&gpic=UID%3D00000c4416918412%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_MY2nh_dm0Uime-_txjeT8hChnoM8w&prev_fmts=0x0&nras=1&correlator=1903045135563&frm=20&pv=1&ga_vid=725767110.1686051615&ga_sid=1686243940&ga_hid=1689683430&ga_fc=1&u_tz=60&u_his=1&u_h=900&u_w=1440&u_ah=852&u_aw=1440&u_cd=24&u_sd=2&dmc=8&adx=53&ady=1021&biw=1423&bih=781&scr_x=0&scr_y=527&eid=44759837%2C44759875%2C44759926%2C31075127%2C44788441%2C31067147&oid=2&pvsid=4370208828608287&tmod=82592742&uas=0&nvt=2&fc=1920&brdim=0%2C0%2C0%2C0%2C1440%2C0%2C1440%2C852%2C1440%2C781&vis=1&rsz=%7C%7CeE%7C&abl=CS&pfx=0&fu=128&bc=31&td=1&ifi=2&uci=a!2&fsb=1&xpc=2FhlrG9d3m&p=http%3A//localhost%3A3000&dtd=137" data-google-container-id="a!2" data-load-complete="true"> </iframe> </div> </ins>
I'm using the above code to showcase the ads in a React project. Although there is no error, ads never appear on localhost. Secondly, is it possible to show ads on local host environments? I have no ad blocker installed on my computer. I'm following the article https://www.tutorialsbuddy.com/embed-google-adsense-code-in-react-component
After inspecting the above is the HTML result.
This is the code you need.
<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;" data-ad-status="unfilled" > <div id="aswift_0_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" > <iframe id="aswift_0" name="aswift_0" browsingtopics="true" style="left:0;position:absolute;top:0;border:0;width:undefinedpx;height:undefinedpx;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allow="attribution-reporting; run-ad-auction" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4287935231942730&output=html&adk=1812271804&adf=3025194257&abgtt=6&lmt=1611946218&plaf=7%3A2&plat=3%3A128%2C4%3A128%2C9%3A32776%2C16%3A8388608%2C17%3A32%2C24%3A32%2C25%3A32%2C30%3A1081344%2C32%3A32%2C41%3A32%2C42%3A32&format=0x0&url=https%3A%2F%2Fspacebarclicker.org%2Fspacebar-counter-10-seconds.html&pra=5&wgl=1&easpi=0&aihb=0&asro=0&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTI0LjAuNjM2Ny4yMDgiLG51bGwsMCxudWxsLCI2NCIsW1siQ2hyb21pdW0iLCIxMjQuMC42MzY3LjIwOCJdLFsiR29vZ2xlIENocm9tZSIsIjEyNC4wLjYzNjcuMjA4Il0sWyJOb3QtQS5CcmFuZCIsIjk5LjAuMC4wIl1dLDBd&dt=1716216892087&bpp=2&bdt=37&idt=24&shv=r20240515&mjsv=m202405150201&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5f4573e7463f10dd%3AT%3D1716216886%3ART%3D1716216886%3AS%3DALNI_Ma9V0k60OSO6AYuZLbvNFDLpPk0ZQ&gpic=UID%3D00000e079e03fe2a%3AT%3D1716216886%3ART%3D1716216886%3AS%3DALNI_MY2Sour9uSoOcOEUa6qa8OwiGhnTg&eo_id_str=ID%3D66d722dcb6ed3974%3AT%3D1716216886%3ART%3D1716216886%3AS%3DAA-AfjYaXcCAEnaoEOrnqY5FT0v3&nras=1&correlator=78580874901&frm=20&pv=2&ga_vid=1151640043.1716216892&ga_sid=1716216892&ga_hid=1076912649&ga_fc=0&u_tz=-300&u_his=3&u_h=1080&u_w=1920&u_ah=1040&u_aw=1920&u_cd=24&u_sd=1&dmc=8&adx=-12245933&ady=-12245933&biw=1903&bih=919&scr_x=0&scr_y=0&eid=44759876%2C44759927%2C44759842%2C31083637%2C95331982%2C31083765%2C95331036%2C31083182%2C95331712%2C95332416%2C31078663%2C31078665%2C31078668%2C31078670&oid=2&pvsid=2551592638042118&tmod=583973829&uas=0&nvt=1&fsapi=1&ref=https%3A%2F%2Fspacebarclicker.org%2F&fc=1920&brdim=0%2C0%2C0%2C0%2C1920%2C0%2C1920%2C1040%2C1920%2C919&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=32768&bc=31&bz=1&td=1&psd=W251bGwsbnVsbCxudWxsLDNd&nt=1&ifi=1&uci=a!1&fsb=1&dtd=33" data-google-container-id="a!1" tabindex="0" title="Advertisement" aria-label="Advertisement" data-load-complete="true" ></iframe> </div> </ins>;I believe you have to have this piece of code in the Head tag:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" crossorigin="anonymous"></script>For localhost you need to add this parameter in the:
<ins> style={{display:"block", width:"250px"}} data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-1716395586958019" data-ad-slot="9360082050"> data-adtest="on" // This paramter for localhost </ins>See this answer for a better explanation.
Well, I have tried it but didn't work.
Has your site been approved by google? I thought they had to review it before ads were shown?
Well, I have not hosted this site right now and I'm just building it in my local environment.