0
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 React project. Although there is no error, ads never appear on localhost. Secondly, is it possible to show ads on local host environments and I have no ad blocker installed on my computer. I'm following the following article https://www.tutorialsbuddy.com/embed-google-adsense-code-in-react-component

After inspecting the above is the HTML result.

KnightMove
  • 1
  • 4

1 Answers1

0

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.

max
  • 37
  • 7