Ingin memonetisasi situs WordPress Anda tanpa mengorbankan pengalaman pengguna? Menambahkan iklan Google AdSense dengan desain yang elegan dan ramah pengguna bisa menjadi solusi terbaik. Dalam artikel ini, kami akan memandu Anda melalui skrip PHP canggih yang mengintegrasikan iklan AdSense responsif ke situs WordPress Anda, lengkap dengan penghitung waktu mundur dan fitur pengecualian untuk pengguna VIP. Simak bagaimana skrip ini bekerja dan mengapa ini cocok untuk situs Anda.
Mengapa Menggunakan Iklan AdSense Kustom?
Iklan adalah cara efektif untuk menghasilkan pendapatan, tetapi implementasi yang buruk dapat mengganggu pengalaman pengguna. Skrip ini menawarkan solusi dengan:
- Menampilkan iklan hanya untuk pengguna non-VIP, memastikan pengguna premium menikmati situs tanpa iklan.
- Menempatkan iklan hanya di halaman artikel tunggal untuk menghindari gangguan di halaman lain.
- Menyertakan penghitung waktu mundur (10 detik) sebelum pengguna dapat menutup iklan, menyeimbangkan monetisasi dan kenyamanan.
- Desain responsif yang menyesuaikan tampilan untuk perangkat mobile dan desktop.
- Pesan dukungan yang sopan untuk mendorong interaksi pengguna dengan iklan.
Baik Anda blogger, pembuat konten, atau pemilik bisnis kecil, skrip ini membantu Anda memonetisasi situs dengan tetap menjaga kepuasan pengunjung.
Lelah dengan iklan? Hanya dengan IDR 833 / hari, buka konten eksklusif dan nikmati pengalaman tanpa iklan. Selengkapnya.
Fitur Utama Skrip
- Pengecualian Pengguna VIP: Skrip memeriksa peran ‘vip’ menggunakan current_user_can('vip'). Pengguna VIP tidak akan melihat iklan, memberikan pengalaman premium.
- Penargetan Halaman Artikel: Iklan hanya muncul di halaman artikel tunggal (is_single()), menjaga tampilan situs tetap rapi.
- Desain Responsif: Kontainer iklan menyesuaikan ukuran untuk perangkat mobile (max-width: 480px) dengan dimensi, padding, dan ukuran font yang dioptimalkan.
- Tombol Tutup Interaktif: Penghitung waktu selama 10 detik menonaktifkan tombol tutup, setelah itu pengguna dapat menutup iklan. Mengklik tombol sebelum waktunya akan memunculkan pesan modal.
- Desain Elegan: Menggunakan font ‘Inter’ dari Google Fonts, bayangan halus, dan sudut membulat untuk tampilan profesional.
- Pesan Dukungan: Pesan di bawah iklan mendorong pengguna untuk mendukung konten Anda melalui interaksi dengan iklan.
Cara Kerja Skrip
Skrip ini terhubung ke aksi wp_footer untuk menyisipkan kontainer iklan AdSense ke situs WordPress Anda. Berikut rinciannya:
- Logika PHP: Memeriksa status pengguna VIP dan halaman artikel tunggal untuk menentukan kapan iklan ditampilkan.
- Styling CSS: Menentukan kontainer iklan dengan posisi tetap (pojok kanan bawah) dan media query untuk kompatibilitas mobile.
- Fungsi JavaScript: Menginisialisasi iklan AdSense, mengelola penghitung waktu, dan menangani interaksi tombol tutup serta modal.
- Overlay Modal: Overlay semi-transparan dan mini-modal muncul jika pengguna mencoba menutup iklan lebih awal, memperkuat pesan dukungan.
Kontainer iklan berukuran 300×300 piksel di desktop dan menyesuaikan hingga 90% lebar viewport di mobile, memastikan iklan terlihat namun tidak mengganggu. Tombol tutup, berbentuk lingkaran merah dengan ‘X’ putih, aktif setelah penghitung waktu selesai.
Cara Menerapkan Skrip
- Tambahkan ke Tema: Salin skrip ke file functions.php tema Anda atau plugin kustom.
- Perbarui Detail AdSense: Ganti nilai data-ad-client dan data-ad-slot dengan ID penerbit dan slot iklan AdSense Anda.
- Kustomisasi (Opsional): Sesuaikan durasi penghitung (default: 10 detik), warna, atau pesan dukungan sesuai merek Anda.
- Uji Coba: Pastikan iklan muncul dengan benar di halaman artikel, tidak tampil untuk pengguna VIP, dan responsif di perangkat mobile.
Mengapa Skrip Ini Istimewa
Berbeda dari plugin AdSense umum, skrip ini memberikan kontrol penuh atas penempatan, gaya, dan pengalaman pengguna. Penghitung waktu memastikan iklan dilihat tanpa terlalu mengganggu, dan pengecualian VIP menghargai pengguna setia. Desain modernnya cocok untuk situs profesional, ideal untuk blogger dan bisnis.
Lelah dengan iklan? Hanya dengan IDR 833 / hari, buka konten eksklusif dan nikmati pengalaman tanpa iklan. Selengkapnya.
Mulai Sekarang
Siap meningkatkan pendapatan situs Anda sambil menjaga kepuasan pengguna? Salin skrip ini, sesuaikan dengan kebutuhan Anda, dan lihat pendapatan AdSense Anda meningkat. Jika perlu bantuan untuk mengatur atau menyesuaikan desain, tinggalkan komentar di bawah atau hubungi tim kami.
PHP Snippets Iklan AdSense Kustom
add_action('wp_footer', 'add_custom_adsense_ad_secondary');
function add_custom_adsense_ad_secondary() {
// Check if the user has the 'vip' role
if (current_user_can('vip')) {
return; // Exit if user is VIP
}
// Only display on single posts
if (is_single()) {
?>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
.ads-container-secondary {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
height: 300px;
background-color: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10001;
text-align: center;
padding: 1rem;
border-radius: 8px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.ads-container-secondary {
width: 90vw;
height: 90vw;
max-width: 300px;
max-height: 300px;
bottom: 10px;
right: 10px;
padding: 0.5rem;
}
}
.ads-container-secondary ins {
width: 100% !important;
max-width: calc(100% - 2rem) !important;
height: 100% !important;
max-height: calc(100% - 2rem) !important;
display: inline-block !important;
margin: 0 auto;
box-sizing: border-box;
}
.close-btn-secondary {
position: absolute;
top: -1rem;
right: -1rem;
width: 2rem;
height: 2rem;
background-color: #ff4d4d;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: not-allowed;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, cursor 0.3s;
z-index: 10002;
box-sizing: border-box;
}
@media (max-width: 480px) {
.close-btn-secondary {
top: -0.75rem;
right: -0.55rem;
width: 1.9rem;
height: 1.9rem;
}
}
.close-btn-secondary.enabled {
cursor: pointer;
background-color: #cc0000;
}
.close-btn-secondary.enabled:hover {
background-color: #b30000;
}
.close-btn-secondary svg {
width: 0.875rem;
height: 0.875rem;
fill: #fff;
}
@media (max-width: 480px) {
.close-btn-secondary svg {
width: 0.95rem;
height: 0.95rem;
}
}
.countdown-secondary {
display: none;
position: absolute;
top: -3rem;
right: 0;
font-size: 0.75rem;
color: #333;
font-family: 'Inter', sans-serif;
font-weight: 500;
letter-spacing: 0.03125rem;
background-color: rgba(255, 255, 255, 0.9);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
z-index: 10002;
box-sizing: border-box;
}
@media (max-width: 480px) {
.countdown-secondary {
top: -2.5rem;
font-size: 0.875rem;
padding: 0.1rem 0.3rem;
}
}
.support-message-secondary {
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
color: #666;
margin-top: 0.3125rem;
line-height: 1.2;
box-sizing: border-box;
}
@media (max-width: 480px) {
.support-message-secondary {
font-size: 0.675rem;
margin-top: 0.25rem;
}
}
.mini-modal-secondary {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
color: #333;
font-family: 'Inter', sans-serif;
font-size: 1rem;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
z-index: 10003;
text-align: center;
max-width: 95%;
box-sizing: border-box;
}
@media (max-width: 480px) {
.mini-modal-secondary {
font-size: 0.875rem;
padding: 0.75rem 1rem;
max-width: 95%;
}
}
.modal-overlay-secondary {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10002;
}
</style>
<!-- Skrip AdSense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4429698323405946"
crossorigin="anonymous"></script>
<!-- Kontainer Iklan dan Modal -->
<div id="adsContainerSecondary" class="ads-container-secondary">
<span id="countdownSecondary" class="countdown-secondary"></span>
<span id="closeBtnSecondary" class="close-btn-secondary">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18.3 5.7c-.4-.4-1-.4-1.4 0L12 10.6 7.1 5.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L10.6 12l-4.9 4.9c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3L12 13.4l4.9 4.9c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12l4.9-4.9c.4-.4.4-1 0-1.4z"/>
</svg>
</span>
<!-- Iklan 300x300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:280px;height:280px;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<div class="support-message-secondary">
Kami harap dukungan Anda via iklan ini membantu kami terus menyajikan konten bermanfaat.
</div>
</div>
<div id="modalOverlaySecondary" class="modal-overlay-secondary"></div>
<div id="miniModalSecondary" class="mini-modal-secondary">
Kami harap dukungan Anda via iklan ini membantu kami terus menyajikan konten bermanfaat.
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const adsContainer = document.getElementById('adsContainerSecondary');
const closeBtn = document.getElementById('closeBtnSecondary');
const countdownEl = document.getElementById('countdownSecondary');
const miniModal = document.getElementById('miniModalSecondary');
const modalOverlay = document.getElementById('modalOverlaySecondary');
// Fungsi untuk menampilkan modal atau menutup iklan
function toggleModalOrCloseSecondary() {
if (!adsContainer || !closeBtn || !miniModal || !modalOverlay) {
console.error('Secondary ad elements not found:', { adsContainer, closeBtn, miniModal, modalOverlay });
return;
}
if (closeBtn.classList.contains('enabled')) {
// Close ad container, mini-modal, and overlay if enabled
adsContainer.style.display = 'none';
miniModal.style.display = 'none';
modalOverlay.style.display = 'none';
} else {
// Show mini-modal and overlay if not enabled
miniModal.style.display = 'block';
modalOverlay.style.display = 'block';
}
}
// Tambahkan event listener untuk close button
if (closeBtn) {
closeBtn.addEventListener('click', toggleModalOrCloseSecondary);
} else {
console.error('Close button not found:', closeBtn);
}
// Fungsi untuk menutup modal dan overlay saat diklik di luar
if (modalOverlay) {
modalOverlay.addEventListener('click', function(event) {
if (event.target === modalOverlay && miniModal.style.display === 'block') {
miniModal.style.display = 'none';
modalOverlay.style.display = 'none';
}
});
} else {
console.error('Modal overlay not found:', modalOverlay);
}
// Fungsi untuk menampilkan iklan dan memulai countdown
setTimeout(function() {
if (!adsContainer || !closeBtn || !countdownEl) {
console.error('Secondary ad elements not found:', { adsContainer, closeBtn, countdownEl });
return;
}
adsContainer.style.display = 'block';
countdownEl.style.display = 'block';
// Inisialisasi iklan AdSense
try {
(adsbygoogle = window.adsbygoogle || []).push({});
} catch (err) {
console.error('Error initializing secondary AdSense:', err);
}
// Countdown timer selama 15 detik
let timeLeft = 10;
countdownEl.textContent = `Tutup dalam ${timeLeft}s`;
const countdown = setInterval(function() {
timeLeft--;
countdownEl.textContent = `Tutup dalam ${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(countdown);
countdownEl.style.display = 'none';
closeBtn.classList.add('enabled');
if (miniModal && modalOverlay) {
miniModal.style.display = 'none';
modalOverlay.style.display = 'none';
}
}
}, 1000);
}, 5000);
});
</script>
<?php
}
}
Lelah dengan iklan? Hanya dengan IDR 833 / hari, buka konten eksklusif dan nikmati pengalaman tanpa iklan. Selengkapnya.
Lelah dengan iklan? Hanya dengan IDR 833 / hari, buka konten eksklusif dan nikmati pengalaman tanpa iklan. Selengkapnya.
Lelah dengan iklan? Hanya dengan IDR 833 / hari, buka konten eksklusif dan nikmati pengalaman tanpa iklan. Selengkapnya.
