Add Adsense Footer Javascript

Menambahkan Iklan AdSense di Footer dengan JavaScript: Panduan Lengkap dan Terbaik

Menambahkan Iklan AdSense di Footer dengan JavaScript: Panduan Lengkap dan Terbaik

Menampilkan iklan di situs web adalah salah satu cara umum untuk menghasilkan pendapatan online. Google AdSense merupakan salah satu platform periklanan yang paling populer dan banyak digunakan oleh para pemilik situs web. Menempatkan iklan AdSense di bagian footer (bagian bawah) situs web merupakan strategi yang efektif karena memastikan iklan selalu terlihat oleh pengunjung, terlepas dari seberapa jauh mereka menggulir halaman. Artikel ini akan membahas secara detail bagaimana menambahkan iklan AdSense di footer menggunakan JavaScript, mulai dari persiapan hingga troubleshooting.

I. Persiapan Sebelum Menambahkan Kode AdSense

Sebelum kita masuk ke kode JavaScript, ada beberapa hal penting yang perlu dipersiapkan:

• Akun AdSense yang Aktif: Anda memerlukan akun Google AdSense yang telah disetujui dan siap untuk menampilkan iklan. Pastikan Anda telah mengikuti semua pedoman dan kebijakan AdSense agar akun Anda tetap aktif. Kegagalan dalam mematuhi kebijakan dapat mengakibatkan penonaktifan akun dan hilangnya pendapatan.

• Kode Iklan AdSense: Setelah akun Anda disetujui, Anda akan mendapatkan kode iklan AdSense. Kode ini unik untuk setiap situs web dan iklan. Anda perlu menyalin kode ini dengan hati-hati karena kode ini yang akan kita tempatkan di dalam kode JavaScript. Perhatikan ukuran iklan yang Anda pilih, karena hal ini akan memengaruhi tata letak dan tampilan di footer. Ukuran yang umum digunakan adalah 728×90 (leaderboard) atau 336×280 (medium rectangle).



• Pemahaman Dasar JavaScript: Meskipun kita akan menyediakan kode yang siap pakai, pemahaman dasar tentang JavaScript akan sangat membantu dalam memahami cara kerja kode dan melakukan penyesuaian jika diperlukan. Anda setidaknya perlu memahami konsep dasar seperti fungsi, variabel, dan manipulasi DOM (Document Object Model).

• Editor Kode: Gunakan editor kode yang sesuai, seperti Notepad++, Sublime Text, Atom, atau Visual Studio Code. Editor kode ini akan membantu Anda menulis dan mengedit kode JavaScript dengan lebih efisien.

  

II. Menambahkan Kode JavaScript ke Footer

Ada beberapa cara untuk menambahkan kode iklan AdSense ke footer menggunakan JavaScript. Berikut adalah dua metode yang paling umum:

A. Metode 1: Menggunakan createElement dan appendChild

Metode ini memungkinkan Anda untuk secara dinamis menambahkan elemen iklan AdSense ke dalam footer. Berikut adalah contoh kode JavaScript:

function addAdSenseToFooter() 

// Panggil fungsi setelah halaman selesai dimuat
window.addEventListener('DOMContentLoaded', addAdSenseToFooter);

Penjelasan Kode:

• addAdSenseToFooter(): Fungsi ini berisi logika untuk menambahkan iklan AdSense.
• adSenseCode: Variabel ini berisi kode iklan AdSense Anda. Ganti YOUR_AD_CLIENT_ID dan YOUR_AD_SLOT_ID dengan ID klien dan ID slot iklan Anda.
• document.querySelector('footer'): Ini memilih elemen <footer> di halaman HTML Anda. Pastikan Anda memiliki elemen <footer> di dalam kode HTML Anda.
• document.createElement('div'): Membuat elemen <div> baru untuk menampung kode iklan.
• adContainer.innerHTML = adSenseCode: Menambahkan kode iklan ke dalam elemen <div>.
• footer.appendChild(adContainer): Menambahkan elemen <div> yang berisi kode iklan ke dalam elemen <footer>.
• window.addEventListener('DOMContentLoaded', addAdSenseToFooter): Memastikan fungsi addAdSenseToFooter dijalankan setelah seluruh halaman HTML selesai dimuat.

B. Metode 2: Menambahkan Kode Secara Langsung ke File HTML

Metode ini lebih sederhana, tetapi kurang fleksibel. Anda cukup menambahkan kode iklan AdSense langsung ke dalam elemen <footer> di file HTML Anda. Meskipun tidak menggunakan JavaScript, metode ini tetap efektif dan mudah diimplementasikan.

<footer>
  <div>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-YOUR_AD_CLIENT_ID"
         data-ad-slot="YOUR_AD_SLOT_ID"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push();
    </script>
  </div>
  <!-- Isi footer lainnya -->
</footer>

III. Menyesuaikan Tampilan Iklan

Setelah menambahkan kode, Anda mungkin perlu menyesuaikan tampilan iklan agar sesuai dengan desain situs web Anda. Anda dapat menggunakan CSS untuk mengubah style iklan, seperti warna latar belakang, padding, margin, dan lain-lain. Berikut adalah contoh penggunaan CSS:

#adsense-footer 
  background-color: #f0f0f0;
  padding: 10px;
  margin: 20px 0;
  text-align: center; /* Memusatkan iklan */

IV. Mengatasi Masalah (Troubleshooting)

Jika iklan AdSense tidak ditampilkan, berikut beberapa hal yang perlu diperiksa:

• ID Klien dan ID Slot yang Benar: Pastikan Anda telah memasukkan ID klien dan ID slot yang benar dari akun AdSense Anda.
• Koneksi Internet: Pastikan koneksi internet Anda stabil.
• Blokir AdBlocker: AdBlocker dapat memblokir iklan AdSense. Coba nonaktifkan AdBlocker sementara untuk melihat apakah iklan ditampilkan.
• Cache dan Cookie: Kosongkan cache dan cookie browser Anda.
• Kesalahan Kode: Periksa kode JavaScript Anda untuk memastikan tidak ada kesalahan sintaks. Konsol browser (biasanya dapat diakses dengan menekan F12) dapat membantu mengidentifikasi kesalahan.
• Elemen Footer: Pastikan elemen <footer> ada di dalam kode HTML Anda.
• Konflik JavaScript: Konflik dengan kode JavaScript lain dapat mencegah iklan ditampilkan. Cobalah menonaktifkan skrip lain secara sementara untuk mengidentifikasi penyebabnya.

V. Kesimpulan

Menambahkan iklan AdSense di footer menggunakan JavaScript dapat menjadi cara yang efektif untuk menghasilkan pendapatan dari situs web Anda. Dengan mengikuti panduan langkah demi langkah di atas, Anda dapat dengan mudah menambahkan dan menyesuaikan iklan agar sesuai dengan desain situs web Anda. Ingatlah untuk selalu mematuhi kebijakan AdSense untuk menjaga agar akun Anda tetap aktif dan menghasilkan pendapatan secara konsisten. Jangan ragu untuk bereksperimen dengan berbagai ukuran iklan dan posisi untuk menemukan yang paling efektif untuk situs web Anda. Dengan sedikit usaha dan kesabaran, Anda dapat mengoptimalkan pendapatan dari iklan AdSense Anda. Selalu pantau kinerja iklan Anda dan lakukan penyesuaian jika diperlukan untuk memaksimalkan pendapatan.

Artikel Terkait

• Template Blog Adsense Gratis
• Tanda Adsense Diterima
• Surat Pin Google Adsense
• Verifikasi Identitas Google Adsense
• 50k Visitors Adsense Per Day