Integration Google AdSense With Next.js

Created At : 16 Nov 2024

Sharing is Caring, Pls help to share with your friend

Author : Aung Kyaw NyuntSoftware EnginnerContact : aungkyawnyunt2004@gmail.com or akn.cloud86@gmail.com

Google AdSense is on of the Google's product and that is one of the most popular and highest paying online advertisement service.

Normally google adsense and html Integration is easy but for next.js, it would not be easy as usually before reading this article. In this article, you would learn benefit of google adsense and how to integrate single or multi adbsenses.

(1) : BENEFIT OF GOOGLE ADSENSE

There are lots of benefit. ok let's check what they are.

Right ads for your website

Right ads for your website means Google AdSense only show the ad on your website that is relevant to your content.

Example:
Suppose your website content is about education then the ad appear on your website are related to education or technology.

Responsive ads

Now a days huge number of user coming from mobile devices so to make your website more mobile friendly Google AdSense provide responsive ads.

Control in your hand

You can block the ads that you don't like to appear on your website

You can choose ad size as per your choice and put the ad where you want to place it.

(2) Let's start How to integrate Google AdSense and Next.js

-

Get the first important code from google adsense.

Let me assume you already knew how to register on Google AbSense https://www.google.com/adsense .
If not, pls registry and get the codes from there.

click on "Get code".

adsbygoogle.js sample

Copy and paste this code in the HTML of your site, inside the html head tag. No need to add repeatedly even if you have multiple adsense.

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

This code to check the connection of your site and adsense.

Code Flow

From now on traditional javascript will not be ok in Next.js. so let me explain some code flow for Next.js.

Create new ad unit on Google AdSense Console

There are 3 kinds of ads.

Display ads
In-Feed ads
In-article ads

Choose the one, you want. In this tutorial I use Display ads.

Sample Code

Here is the sample code for your ad unit.

<script 
  async 
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
  crossorigin="anonymous"
></script>
<!-- HorizonalAds -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"
></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- END HorizonalAds -->

keep in mid it as "ad unit code". we have to modify this code to use in our Next.js.

Create GoogleAds Component

create projectRoot/components/GoogleAds.js with the following code.

import { useEffect } from "react"
export default function GoogleAds(...props) {
    const { currentPath } = props;
    useEffect(() => {
        window.adsbygoogle = window.adsbygoogle || []
        window.adsbygoogle.push({})
      }, [currentPath])

    return(
        <div key={currentPath}>
        { /*START horizonalAds Google Adsense */ }
            <ins className="adsbygoogle horizonalAds"
                style={{display: 'block'}}
                data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
                data-ad-slot="xxxxxxxxxx"
                data-ad-format="auto"
                data-full-width-responsive="true"
            >
            </ins>
        { /* END horizonalAds Google Adsense */ }

        </div>
    )
}

We have to use this component from our Page1.js and Page2.js or somewhere.

Create MainLayout.js

Let's create projectRoot/components/MainLayout.js with the following code.

import React, { useEffect, useRef } from "react"
import Head from 'next/head';

import styles from './../../styles/MainLayout.module.css'
interface IMainLayout {
    children: React.ReactNode;
    title:string;
 }

export default function MainLayout({ children, ...props }:IMainLayout) {
    

    return (
    <>
        <Head>
            <title>{props.title?props.title:"GoogleAds With Next.js Tutorial"}</title>
            <meta name="viewport"                   content="width=device-width, initial-scale=1"/>
            <meta name="description"                content="this is description." />
            <meta name="keywords"                   content="this is keywords." />
            <meta name="author"                     content="Aung Kyaw Nyunt" />

            {/*
                this is remark.
                change "crossorigin" to "crossOrigin"
                you do not need to call this script https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx
                again and again even if you have multiple ad units. only one time is required.
            */}
            <script 
                async 
                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
                crossOrigin="anonymous"
            ></script>
            
        </Head>
      
        {/* Begin Body */ }
        <div className={styles.mainViewPort}>
        <h1>This is tutorial.</h1>
        <h2>Begin the page.</h2>
        {children}
        <h2>ENd of the page.</h2>
        </div>
        {/* Begin Body */ }
       
    </>
    )
}

We will use this MainLayout.js from Pages as the Layout template.

Remark

you may need to wait couple of weeks to be validate your google adsense account.
Thank you so much for reading my article, have a good day or night.

Create Page1.js

create projectRoot/pages/Page1.js with the following code.

import MainLayout from '../../../components/MainLayout'
import GoogleAds from '../../../components/GoogleAds';

  function Page1() {
  
  return (
    <MainLayout 
       title="this is page1"
    >
    {/* Start Header */}
    <div >
            <p> thi is testing. </p>
          <GoogleAds currentPath="testAdsense" />
    </div>
    {/* End Body */}
    
    </MainLayout>
  )
}

export default Page1

Finished.

I hope this article would help your need.
Thank you for taking the time to read my article. I hope you find it helpful. Please feel free to reach out if you have any questions or would like to discuss further.