How to Add Google Ad Sense Next.js 13 With App Router, Auto Ads and Unit Ads

How to Add Google Ad Sense Next.js 13 With App Router, Auto Ads and Unit Ads

Written by Shrikant Dhayje on Jun 23rd, 2023 ・ Views ・ Report Post

Shrikant Dhayje Visit User Profile

Hello Everyone So Today I am Gonna Talk About How to Run Google Ad sense, Google Ad sense Ad Units.

What is Problem

We Can Add Ad sense Code in head tag of Nextjs13 App router but the Problem is faced for Google Ad sense Ad Units.

In New We have to Assign The our Ad Component as Client and The Ad Sense Ad Unit code Does Not Refresh On Page Changes.

Solution 1 For Auto Ads ( Follow This For Ad Units Also )

Firstly goto RootLayout which looks like below

<pre class="highlight tsx">```  
<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">RootLayout</span><span class="p">({</span>    
  <span class="nx">children</span><span class="p">,</span>  
<span class="p">}:</span> <span class="p">{</span>  
  <span class="nl">children</span><span class="p">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ReactNode</span><span class="p">;</span>  
<span class="p">})</span> <span class="p">{</span>  
  <span class="k">return</span> <span class="p">(</span>  
    <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="p">=</span><span class="s">'en'</span><span class="p">></span>  
      <span class="p"><</span><span class="nt">head</span><span class="p">></span>  
      <span class="p"></</span><span class="nt">head</span><span class="p">></span>  
      <span class="p"><</span><span class="nt">body</span> <span class="na">className</span><span class="p">=</span><span class="s">'bg-gray-100 font-sans'</span><span class="p">></span>  
        <span class="si">{</span><span class="nx">children</span><span class="si">}</span>  
      <span class="p"></</span><span class="nt">body</span><span class="p">></span>  
    <span class="p"></</span><span class="nt">html</span><span class="p">></span>  
  <span class="p">);</span>  
<span class="p">}</span>





And You Got the Google Adsense Code Is Like Below


```  
<script>async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin/>

```  
```



Now Convert the code to NextJs Script component

```  

```  
Script async  
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"  
  crossOrigin="anonymous"  
  strategy='lazyOnload'  
/>

```  
```



Just add this in `head` tag and remember to strategy should be `lazyOnload` which have more chances of code running fine and also crossOrigin as anonymous.

###  Solution 2 : Google Ad sense Ad Unit Codes In App Router 

Now You Got The Code From Google Adsense Code Like This Below

```  

```

Comments (0)