title: I want to display Google Adsense on my gatsby.js site. However, it is not showing up
body: <p>I want to display Google Adsense on my gatsby.js site. However, it is not showing up.
  LeftSideSection is called in Layout.js.</p>
  <p>I am running it in a local environment.
  And I don't have a domain for my site.</p>
  <p>I don't register my site's domain in GoogleAdsense and
  I have created an Ad unit.</p>
  <p>export
  [<img src="https://i.stack.imgur.com/3NoFP.jpg" alt="enter image description here" />
  googleAdsense.js</p>
  <pre><code> import React from &quot;react&quot;
   import * as styles from &quot;./LeftSideSection.module.css&quot;;
   import {Adsense} from './googleAdsense'
   import React, { useEffect } from 'react'
  
  
  export const Adsense = ({ path }) =&gt; {
    useEffect(() =&gt; {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
    }, [path])
  
    
    return (
        
      &lt;ins 
        className=&quot;adsbygoogle&quot;
        style={{ &quot;display&quot;: &quot;block&quot; , textAlign: &quot;center&quot;,width:`100%` ,height:`100%`}}
        data-ad-client=&quot;ca-pub-xxxxxxxxx&quot;
        data-ad-slot=&quot;xxxxxxx&quot;
        data-ad-format=&quot;auto&quot;
        data-full-width-responsive=&quot;true&quot;
        data-adtest=&quot;on&quot;
             /&gt;
    )
    }
  </code></pre>
  <p>LeftSideSection.js</p>
  <pre><code>const LeftSideSection = (props) =&gt; {
    const { title, children } = props;
    const path = props.location?.pathname || '';
  
    return (
      &lt;section className={styles.container}&gt;
        &lt;p&gt;ads&lt;/p&gt;
           &lt;Adsense path={path} /&gt;
  
      &lt;/section&gt;
    );
  };
  
  export default LeftSideSection;
  </code></pre>
  <p>Layout.js</p>
  <pre><code>  import React from &quot;react&quot;;
      import Header from &quot;./Header&quot;;
      import * as styles from &quot;./Layout.module.css&quot;;
      import 'bootstrap/dist/css/bootstrap.min.css';
      import herderImage from '../images/header.png'
      import {Navbar} from 'react-bootstrap'
      import RightSideSection from &quot;./RightSideSection&quot;;
      import LeftSideSection from &quot;./LeftSideSection&quot;;
      import { Link } from &quot;gatsby&quot;;
      import { useBreakpoint } from 'gatsby-plugin-breakpoints';
      import HeaderRss from &quot;./HeaderRss&quot;;
      
      const Layout = ({ children }) =&gt; {
        const breakPoints = useBreakpoint();
        return (
          breakPoints.pc ?
          &lt;&gt;
          &lt;Navbar.Brand as={Link} href='/' &gt;
            &lt;img src={herderImage} style={{width:`100%`,height:`200px`,}}/&gt;
            &lt;/Navbar.Brand&gt;
            &lt;Header /&gt;
        
            &lt;div className={styles.container}&gt;
             
      
              &lt;div className={styles.LeftSideSection}&gt;
      &lt;LeftSideSection  /&gt;
      &lt;/div&gt;
      &lt;div className={styles.RightSideSection}&gt;
      &lt;RightSideSection /&gt;
      &lt;/div&gt;
      
      &lt;div className={styles.mainPane}&gt;
      &lt;div className={styles.headerRssContainer}&gt;
              &lt;HeaderRss/&gt;
              &lt;/div&gt;
      {children}
      &lt;/div&gt;
            &lt;/div&gt;
      
            &lt;footer className={styles.footer}&gt;
              © {new Date().getFullYear()}, 
              {`title`}
            &lt;/footer&gt;
      
          &lt;/&gt;:
     );
      }; 
      
      
      export default Layout;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/amT1C.jpg" rel="nofollow noreferrer">enter image description here</a></p>