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&amp;output=html&amp;h=315&amp;slotname=9360082050&amp;adk=179383159&amp;adf=4280140434&amp;pi=t.ma~as.9360082050&amp;w=250&amp;lmt=1686243940&amp;rafmt=11&amp;format=250x315&amp;url=http%3A%2F%2Flocalhost%3A3000%2F&amp;adtest=on&amp;wgl=1&amp;uach=WyJXaW5kb3dzIiwiMTUuMC4wIiwieDg2IiwiIiwiMTE0LjAuNTczNS45MCIsW10sMCxudWxsLCI2NCIsW1siTm90LkEvQnJhbmQiLCI4LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjExNC4wLjU3MzUuOTAiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMTQuMC41NzM1LjkwIl1dLDBd&amp;dt=1686243940235&amp;bpp=18&amp;bdt=833&amp;idt=119&amp;shv=r20230606&amp;mjsv=m202306050101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D0131efc224260eb6-22fb51662ce000b1%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_Mau56qS_H-iE3bKsxmOr1TCP2_z-A&amp;gpic=UID%3D00000c4416918412%3AT%3D1686054747%3ART%3D1686243870%3AS%3DALNI_MY2nh_dm0Uime-_txjeT8hChnoM8w&amp;prev_fmts=0x0&amp;nras=1&amp;correlator=1903045135563&amp;frm=20&amp;pv=1&amp;ga_vid=725767110.1686051615&amp;ga_sid=1686243940&amp;ga_hid=1689683430&amp;ga_fc=1&amp;u_tz=60&amp;u_his=1&amp;u_h=900&amp;u_w=1440&amp;u_ah=852&amp;u_aw=1440&amp;u_cd=24&amp;u_sd=2&amp;dmc=8&amp;adx=53&amp;ady=1021&amp;biw=1423&amp;bih=781&amp;scr_x=0&amp;scr_y=527&amp;eid=44759837%2C44759875%2C44759926%2C31075127%2C44788441%2C31067147&amp;oid=2&amp;pvsid=4370208828608287&amp;tmod=82592742&amp;uas=0&amp;nvt=2&amp;fc=1920&amp;brdim=0%2C0%2C0%2C0%2C1440%2C0%2C1440%2C852%2C1440%2C781&amp;vis=1&amp;rsz=%7C%7CeE%7C&amp;abl=CS&amp;pfx=0&amp;fu=128&amp;bc=31&amp;td=1&amp;ifi=2&amp;uci=a!2&amp;fsb=1&amp;xpc=2FhlrG9d3m&amp;p=http%3A//localhost%3A3000&amp;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.

Tag:google-ads-api, reactjs

5 comments.

  1. Maulik Patel

    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&amp;output=html&amp;adk=1812271804&amp;adf=3025194257&amp;abgtt=6&amp;lmt=1611946218&amp;plaf=7%3A2&amp;plat=3%3A128%2C4%3A128%2C9%3A32776%2C16%3A8388608%2C17%3A32%2C24%3A32%2C25%3A32%2C30%3A1081344%2C32%3A32%2C41%3A32%2C42%3A32&amp;format=0x0&amp;url=https%3A%2F%2Fspacebarclicker.org%2Fspacebar-counter-10-seconds.html&amp;pra=5&amp;wgl=1&amp;easpi=0&amp;aihb=0&amp;asro=0&amp;uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTI0LjAuNjM2Ny4yMDgiLG51bGwsMCxudWxsLCI2NCIsW1siQ2hyb21pdW0iLCIxMjQuMC42MzY3LjIwOCJdLFsiR29vZ2xlIENocm9tZSIsIjEyNC4wLjYzNjcuMjA4Il0sWyJOb3QtQS5CcmFuZCIsIjk5LjAuMC4wIl1dLDBd&amp;dt=1716216892087&amp;bpp=2&amp;bdt=37&amp;idt=24&amp;shv=r20240515&amp;mjsv=m202405150201&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D5f4573e7463f10dd%3AT%3D1716216886%3ART%3D1716216886%3AS%3DALNI_Ma9V0k60OSO6AYuZLbvNFDLpPk0ZQ&amp;gpic=UID%3D00000e079e03fe2a%3AT%3D1716216886%3ART%3D1716216886%3AS%3DALNI_MY2Sour9uSoOcOEUa6qa8OwiGhnTg&amp;eo_id_str=ID%3D66d722dcb6ed3974%3AT%3D1716216886%3ART%3D1716216886%3AS%3DAA-AfjYaXcCAEnaoEOrnqY5FT0v3&amp;nras=1&amp;correlator=78580874901&amp;frm=20&amp;pv=2&amp;ga_vid=1151640043.1716216892&amp;ga_sid=1716216892&amp;ga_hid=1076912649&amp;ga_fc=0&amp;u_tz=-300&amp;u_his=3&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1040&amp;u_aw=1920&amp;u_cd=24&amp;u_sd=1&amp;dmc=8&amp;adx=-12245933&amp;ady=-12245933&amp;biw=1903&amp;bih=919&amp;scr_x=0&amp;scr_y=0&amp;eid=44759876%2C44759927%2C44759842%2C31083637%2C95331982%2C31083765%2C95331036%2C31083182%2C95331712%2C95332416%2C31078663%2C31078665%2C31078668%2C31078670&amp;oid=2&amp;pvsid=2551592638042118&amp;tmod=583973829&amp;uas=0&amp;nvt=1&amp;fsapi=1&amp;ref=https%3A%2F%2Fspacebarclicker.org%2F&amp;fc=1920&amp;brdim=0%2C0%2C0%2C0%2C1920%2C0%2C1920%2C1040%2C1920%2C919&amp;vis=1&amp;rsz=%7C%7Cs%7C&amp;abl=NS&amp;fu=32768&amp;bc=31&amp;bz=1&amp;td=1&amp;psd=W251bGwsbnVsbCxudWxsLDNd&amp;nt=1&amp;ifi=1&amp;uci=a!1&amp;fsb=1&amp;dtd=33" data-google-container-id="a!1" tabindex="0" title="Advertisement" aria-label="Advertisement" data-load-complete="true" ></iframe> </div> </ins>;
  2. max

    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.

    1. KnightMove

      Well, I have tried it but didn't work.

    2. max

      Has your site been approved by google? I thought they had to review it before ads were shown?

    3. KnightMove

      Well, I have not hosted this site right now and I'm just building it in my local environment.

Add a new comment.