Cara Memasang Google Adsense di Next.js

By Liu Purnomo

Published on: 11 Mei 2021

Sharing

Google Adsense adalah salah satu cara untuk mendapatkan uang dari blog. Google Adsense ini adalah program periklanan dari Google yang memungkinkan kita untuk menampilkan iklan di blog kita. Iklan yang ditampilkan adalah iklan yang relevan dengan konten blog kita.

Hi there! Want to support my work?

Buy me a coffee

Saya berasumsi bahwa Anda sudah punya akun Google Adsense, kalau belum punya sebaiknya Anda mendaftar dan mengajukan terlebih dahulu.

Catatan: Google Adsense tidak menerima semua blog. Jadi, jika Anda mendaftar dan ditolak, jangan berkecil hati. Coba terus kembangkan blog Anda dan ajukan lagi nanti.

Dapatkan Kode Iklan

Setelah Anda memiliki akun Google Adsense, langkah selanjutnya adalah mendapatkan kode iklan. Untuk mendapatkan kode iklan, Anda bisa mengikuti langkah-langkah berikut:

Masuk ke akun Google Adsense Anda.
Klik menu Ads.
Klik tombol +.
Pilih Display ads.
Pilih Responsive.
Klik tombol Create.
Klik tombol Copy code.

Pasang Kode Iklan di Blog

Buka file pages/_document.js dan tambahkan kode iklan di dalam tag <body>.


import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <Script
          async
          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
          strategy="lazyOnload"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Pastikan Anda mengganti process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID dengan ID klien Google Adsense Anda. ID klien Google Adsense bisa Anda dapatkan di menu Ads > Settings > Account information > Client ID.

anda bisa membuat file .env di root project Anda dan menambahkan NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID di dalamnya.

NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID=ca-pub-xxxxxxxxxxxxxxxx

Membuat Komponen Iklan

Buatlah file didalam folder components dengan nama .jsx dan tambahkan kode berikut:


import { useEffect } from 'react';

const  = (props) => {
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.log(err);
    }
  }, []);

  return (
    <ins
      className="adsbygoogle -customize"
      style={{
        display: 'block',
        overflow: 'hidden',
      }}
      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
      {...props}
    />
  );
};
export default ;

Menampilkan Iklan

Buka file pages/index.js dan tambahkan kode berikut:


import  from '../components/';

export default function Home() {
  return (
    <div>
      <h1>Next.js</h1>
      <p>Belajar Next.js</p>
      
    </div>
  );
}

Membuat Komponen Iklan Responsif

Buatlah file didalam folder components dengan nama AdResponsive.jsx dan tambahkan kode berikut:


import { useEffect } from 'react';

const AdResponsive = (props) => {
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (err) {
      console.log(err);
    }
  }, []);

  return (
    <ins
      className="adsbygoogle -customize"
      style={{
        display: 'block',
        overflow: 'hidden',
      }}
      data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
      data-ad-format="auto"
      {...props}
    />
  );
};

export default AdResponsive;

Menampilkan Iklan Responsif

Buka file pages/index.js dan tambahkan kode berikut:


import AdResponsive from '../components/AdResponsive';

export default function Home() {
  return (
    <div>
      <h1>Next.js</h1>
      <p>Belajar Next.js</p>
      <AdResponsive />
    </div>
  );
}

Memasang ads.txt

Google Adsense membutuhkan file ads.txt untuk memverifikasi bahwa Anda adalah pemilik blog tersebut.

Buatlah file ads.txt di folder public dan tambahkan kode berikut:

google.com, pub-xxxxxxxxxxxxxxxx, DIRECT, xxxxxxxxxxxx

Code diatas adalah kode yang digunakan untuk memverifikasi bahwa Anda adalah pemilik blog tersebut. Jadi, pastikan Anda mengganti pub-xxxxxxxxxxxxxxxx dengan ID klien Google Adsense Anda. ID klien Google Adsense bisa Anda dapatkan di menu Ads > Settings > Account information > Client ID.

Konklusi

Memasang Google Adsense memang berpotensi menambah penghasilan kita, namun perlu di ingat bahwa menambah script ini akan membuat loading web kita menjadi lambat. Jadi, kita harus mempertimbangkan dengan baik apakah kita akan memasang Google Adsense atau tidak.