Posts tagged with reactjs

I created customised native ad and i'm able to show skip option when i click skip i want to show another ad then in the second ad user can close ads so i can take them to some another screen in app

in this package i couldn't found any option to close ad

nativeAdViewRef.current?.loadAd(); 

using this function to load ad, how can i close?

my requirement is if user clicks skip i need to show another ad after few seconds i need to show close option

taking user to another screen if clicking on skip is rightway? or it violates any google ad rules?

I deployed inside a docker a reactjs project (optimized build).

I added the required scripts to enable Google ADS but I got following message

It doesn't find the ads.txt file, I put it under the /public folder and re-built and re-deployed the docker but nothing.. do you have any suggestion for it?

I am struggling with implement google native ads on web, i tired to find some documentation on google site, but all refers to mobile app. Has anyone perhaps implemented this?

Already what i do:

  1. I dig through the google documentation
  2. Ask chat GPT :) , give me few useless info
  3. Some tests with google ads events etc.

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.