Google AdSense memungkinkan Anda memonetisasi situs web dengan menampilkan iklan relevan dari Google.
useScriptGoogleAdsense(): Sebuah komposabel untuk mengelola Google AdSense secara dinamis.<ScriptGoogleAdsense>: Komponen headless untuk menyematkan iklan langsung di aplikasi Nuxt Anda.
Pengaturan Konfigurasi Nuxt
Tambahkan ini ke config Anda untuk memuat Google Adsense secara global. Alternatifnya, Anda dapat menggunakan komposabel useScriptGoogleAdsense untuk kontrol yang lebih besar.
export default defineNuxtConfig({ scripts: { registry: { googleAdsense: { client: 'ca-pub-1234567890123456', trigger: 'onNuxtReady', } } }})Konfigurasi ini secara otomatis mengaktifkan mode first-party (bundel + proksi). Lihat di bawah untuk penyesuaian.
useScriptGoogleAdsense()
Komposabel useScriptGoogleAdsense memberi Anda kontrol granular atas kapan dan bagaimana Google Adsense dimuat di situs Anda.
const { proxy } = useScriptGoogleAdsense()// slot iklan dirender secara otomatisSilakan ikuti panduan Skrip Registry untuk mempelajari lebih lanjut tentang penggunaan tingkat lanjut.
Mode First-Party: Proksi Berfokus Privasi
Tidak diperlukan konfigurasi tambahan. Skrip digabungkan dari domain Anda (muat lebih cepat, tidak perlu DNS tambahan) dan permintaan runtime diproksikan melalui server Anda dengan anonimisasi otomatis (IP pengguna tetap tersembunyi dari Google Adsense, bekerja dengan pemblokir iklan). Pelajari lebih lanjut.
Contoh
Menggunakan Google Adsense dalam komponen dengan proksi untuk mengirim event.
<script setup lang="ts">const { proxy } = useScriptGoogleAdsense()// tidak berfungsi di pengembangan, ssr// hanya berfungsi di produksi, klienfunction handleAction() { // slot iklan dirender secara otomatis}</script><template> <div> <button @click="handleAction"> Kirim Event </button> </div></template>Di Mana Menemukan <your-id> (ID Penerbit)
Temukan ID Penerbit Google AdSense (juga dikenal sebagai ca-pub-XXXXXXX) di Akun Google AdSense Anda:
- Masuk ke akun Google AdSense Anda.
- Navigasi ke Akun > Pengaturan (klik ikon profil > "Informasi akun").
- Temukan ID Penerbit di bawah Informasi Akun.
- Ganti <your-id> dalam konfigurasi di atas dengan ID Anda yang sebenarnya.
Anda juga dapat mengelola pengaturan Iklan Otomatis dari Dasbor Google AdSense untuk mengontrol jenis iklan, penempatan, dan optimalisasi pendapatan.
Verifikasi Kepemilikan Situs
Penyisipan Meta Tag Otomatis
Jika Anda memberikan client, Nuxt secara otomatis menyisipkan meta tag pada halaman untuk Google memverifikasi kepemilikan situs Anda.
export default defineNuxtConfig({ scripts: { registry: { googleAdsense: { client: 'ca-pub-<your-id>', // ID Penerbit AdSense }, }, },})Menggunakan ads untuk Verifikasi
Google merekomendasikan menambahkan file ads untuk kelayakan pendapatan iklan.
Langkah-langkah:
- Buat file baru:
public/ads - Tambahkan konten berikut:
google, pub-<your-id>, DIRECT, f08c47fec0942fa0 - Ganti <your-id> dengan ID Penerbit AdSense Anda.
Mengapa menggunakan ads? Ini membantu mencegah penipuan iklan dan memastikan bahwa hanya situs Anda yang dapat menampilkan iklan Anda.
Mengaktifkan Iklan Otomatis
Iklan Otomatis memungkinkan Google menempatkan iklan secara otomatis untuk optimasi yang lebih baik.
export default defineNuxtConfig({ scripts: { registry: { googleAdsense: { client: 'ca-pub-<your-id>', // ID Penerbit AdSense autoAds: true, // Aktifkan Iklan Otomatis }, }, },})Menggunakan Komponen <ScriptGoogleAdsense>
Ini menyediakan cara sederhana untuk menyematkan iklan di aplikasi Nuxt Anda.
<template> <ScriptGoogleAdsense data-ad-client="ca-pub-<your-id>" data-ad-slot="1234567890" data-ad-format="auto" /></template>Properti Komponen
| Properti | Deskripsi |
|---|---|
data-ad-client | ID Penerbit Google Adsense (`ca-pub-XXXXXXXXXX`). |
data-ad-slot | ID Slot Iklan Anda (tersedia di dasbor AdSense). |
data-ad-format | Tipe format iklan (`auto`, `rectangle`, `horizontal`, `vertical`, `fluid`, `autorelaxed`). |
data-ad-layout | Tata letak (`in-article`, `in-feed`, `fixed`). |
data-full-width-responsive | Setel ke `true` untuk membuat iklan responsif. |
Contoh Penggunaan dengan data-ad-layout
Untuk menentukan tata letak iklan (misalnya 'in-article'), Anda dapat menggunakan atribut data-ad-layout:
<template> <ScriptGoogleAdsense data-ad-client="ca-pub-<your-id>" data-ad-slot="1234567890" data-ad-format="fluid" data-ad-layout="in-article" /></template>Jika pengguna memiliki pemblokir iklan yang diaktifkan, Anda dapat menampilkan konten cadangan.
<template> <ScriptGoogleAdsense data-ad-client="ca-pub-..." data-ad-slot="..."> <template #error> <p>Harap dukung kami dengan menonaktifkan pemblokir iklan Anda.</p> </template> </ScriptGoogleAdsense></template>Menggunakan Komposabel useScriptGoogleAdsense()
Komposabel useScriptGoogleAdsense() memungkinkan kontrol granular atas skrip AdSense.
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>( _options?: GoogleAdsenseInput) {}Lihat Panduan Skrip Registry untuk penggunaan tingkat lanjut.
