Panduan Komprehensif Monetisasi & Pengukuran Trafik Dracin

Panduan ini adalah dokumentasi resmi pengoperasian slot iklan dan pengukuran analitik trafik untuk seluruh pemilik dan pengelola website Dracin. Sistem monetisasi Dracin dirancang dengan prinsip mandiri, modular, dan zero-friction, sehingga Anda dapat memasang berbagai jaringan iklan populer maupun skrip analitik secara fleksibel tanpa perlu mengubah kode program inti aplikasi.

🌟 Prinsip Desain: Zero-Friction & Aman untuk Pengguna Awam

Tanpa Sentuh Logika PHP / Framework: Anda tidak perlu memahami bahasa pemrograman PHP, routing Laravel, atau komponen Livewire. Pemasangan iklan dan analitik dilakukan hanya dengan menyalin (copy-paste) kode dari penyedia iklan ke dalam berkas template parsial (partials) yang telah disediakan.
Modular 5 Slot: Titik penempatan iklan dan pelacakan telah dipisahkan secara rapi ke dalam 5 berkas khusus di folder resources/views/partials/monetization/.
Anti-Rusak Tata Letak (Non-Destructive): Setiap berkas partial dimuat menggunakan direktif Blade @includeIf. Artinya, jika berkas belum diisi atau dikosongkan, halaman website tetap tampil normal dan sempurna.
Otomatis Bersih dari Whitespace Kosong: Kontainer pembungkus banner telah dibekali kelas utilitas CSS cerdas Tailwind ([&:not(:empty)] dan penataan rata tengah responsif). Ketika belum ada iklan aktif, kontainer tidak akan memakan ruang kosong atau memunculkan kotak kosong aneh pada tampilan pengunjung.

🗺️ Arsitektur Alur Render Slot Monetisasi

Berikut peta alur render 5 slot monetisasi pada struktur halaman Dracin:

📂 Lokasi Berkas & Cara Mengedit di Server VPS

Seluruh template monetisasi berada di dalam folder: resources/views/partials/monetization/

1. Lokasi Direktori pada Server VPS Produksi

Jika Dracin Anda dipasang di server VPS menggunakan launcher resmi (Deployer), berkas berada di:

text

/var/www/dracin/current/resources/views/partials/monetization/

Daftar 5 berkas partial yang tersedia:

head-scripts.blade.php — Injeksi skrip di dalam tag <head>
body-top.blade.php — Banner leaderboard di atas navigasi header
video-top.blade.php — Banner di atas video player / detail drama
video-bottom.blade.php — Banner di bawah video player / episode selector
footer-scripts.blade.php — Injeksi skrip penutup sebelum tag </body>

2. Tiga Cara Praktis Mengedit Berkas Monetisasi

Pilihlah salah satu cara yang paling nyaman bagi Anda:

Cara A: Menggunakan SFTP / FileZilla (Paling Direkomendasikan untuk Pemula)

Buka aplikasi FileZilla di komputer Anda.
Hubungkan ke server VPS Anda menggunakan IP, user (root), password, dan port SSH Anda (misal port 22 atau 20700).
Masuk ke folder: /var/www/dracin/current/resources/views/partials/monetization/.
Klik kanan pada berkas yang ingin diisi (misalnya video-top.blade.php), pilih View/Edit (Lihat/Sunting).
Tempelkan kode iklan atau skrip pelacakan Anda, lalu simpan berkas (Ctrl + S atau simpan di editor teks Anda).
FileZilla akan menanyakan konfirmasi pengunggahan kembali ke server; klik Yes (Ya).

Cara B: Menggunakan Terminal SSH (Nano Editor)

Buka terminal atau PuTTY, lalu jalankan perintah edit langsung di server:

bash

# Contoh mengedit banner atas video:
nano /var/www/dracin/current/resources/views/partials/monetization/video-top.blade.php

Tempelkan kode iklan Anda (klik kanan untuk paste di terminal), tekan Ctrl + O lalu Enter untuk menyimpan, dan tekan Ctrl + X untuk keluar.

Cara C: Mengedit Secara Lokal Sebelum Deployment

Jika Anda mengelola source code di komputer lokal sebelum rilis atau update, cukup buka berkas tersebut di VS Code / Sublime Text / Notepad++, ubah, lakukan commit Git, dan jalankan deployment seperti biasa.

3. Izin Berkas & Pembersihan Cache Tampilan (Blade Cache)

Setelah Anda mengubah berkas template di VPS, jalankan perintah pembersihan cache tampilan agar perubahan langsung muncul seketika:

bash

# Masuk ke direktori rilis aktif di VPS:
cd /var/www/dracin/current

# Pastikan kepemilikan berkas tetap milik pengguna web dracin:
chown -R dracin:www-data resources/views/partials/monetization/

# Bersihkan cache tampilan Blade:
php artisan view:clear

TIP

Jika Anda menggunakan Cloudflare, buka dashboard Cloudflare dan lakukan Purge Cache -> Purge Everything jika banner baru belum muncul pada peramban pengunjung.

📐 Rincian 5 Slot Partials Monetisasi

Berikut rincian mendalam fungsi, lokasi tata letak, dan format ukuran rekomendasi untuk setiap slot:

No	Slot & Nama Berkas	Posisi Render	Rekomendasi Format & Ukuran	Karakteristik & Perilaku Pengunjung
1	Head Scripts `head-scripts.blade.php`	Di dalam elemen `<head>...</head>` (sebelum tag `<body>`)	Skrip JavaScript atau Meta Tag HTML	Dimuat sejak awal pembukaan halaman. Cocok untuk verifikasi kepemilikan domain (Google Search Console, Bing) dan skrip loader iklan otomatis (Google AdSense Auto-Ads).
2	Body Top Banner `body-top.blade.php`	Tepat di bawah pembuka `<body>`, di atas navigasi header	728x90 (Leaderboard Desktop) 320x50 atau 300x250 (Mobile)	Posisi paling atas (above-the-fold). Sangat tinggi impresi (viewability), langsung dilihat oleh pengunjung saat website pertama kali terbuka.
3	Video Top Banner `video-top.blade.php`	Tepat di atas frame pemutar video (`episode-page`) dan judul detail drama (`drama-detail`)	728x90 (Desktop) 300x250 (Medium Rectangle) 468x60 (Banner Sedang)	Titik fokus utama penonton sebelum memutar drama. Memiliki rasio klik (Click-Through Rate / CTR) yang sangat tinggi karena mata penonton tertuju ke area ini.
4	Video Bottom Banner `video-bottom.blade.php`	Tepat di bawah pemutar video atau di bawah tombol daftar episode	728x90 (Desktop) 300x250 (Persegi) Native Widget (Grid Iklan)	Area baca ketika penonton sedang mencari episode berikutnya. Sangat ideal untuk format Native Banner (iklan berpenampilan konten artikel/berita rekomendasi).
5	Footer Scripts `footer-scripts.blade.php`	Tepat sebelum penutup `</body>` (kaki halaman)	Skrip Pelacak / Iklan Layar Mengambang	Dimuat secara non-blocking di akhir. Sangat tepat untuk counter statistik Histats, Google Analytics 4, serta jaringan iklan Popunder atau Social Bar Adsterra.

💻 Contoh Kode Integrasi Siap Pakai

Berikut template kode yang dapat Anda salin dan sesuaikan langsung:

A. Kode Verifikasi Akun & Auto-Ads (Letakkan di `head-scripts.blade.php`)

Salin skrip utama akun AdSense Anda:

html

{{-- Google AdSense Auto-Ads --}}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>

Ganti ca-pub-XXXXXXXXXXXXXXXX dengan Publisher ID resmi milik Anda yang didapatkan dari dashboard Google AdSense.

B. Unit Banner Responsif (Letakkan di `body-top.blade.php` atau `video-top.blade.php`)

html

{{-- Google AdSense Responsive Display Banner --}}
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Jika Anda menginginkan banner dengan ukuran tetap di desktop:

html

<div class="hidden md:block">
    <ins class="adsbygoogle"
         style="display:inline-block;width:728px;height:90px"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="1234567890"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

2. Adsterra

Adsterra adalah jaringan iklan alternatif yang sangat ramah terhadap situs video streaming drama dan memiliki tingkat persetujuan (approval) yang cepat.

A. Iklan Popunder (Letakkan di `footer-scripts.blade.php`)

Iklan popunder akan membuka tab baru di latar belakang saat pengunjung pertama kali berinteraksi di website:

html

{{-- Adsterra Popunder Script --}}
<script type='text/javascript' src='//pl12345678.effectivecpmgate.com/ab/cd/ef/abcdef1234567890abcdef1234567890.js'></script>

B. Social Bar / In-Page Push (Letakkan di `footer-scripts.blade.php`)

Social bar memunculkan notifikasi interaktif yang ramah seluler di sudut layar tanpa merusak tampilan video:

html

{{-- Adsterra Social Bar --}}
<script type='text/javascript' src='//pl87654321.effectivecpmgate.com/12/34/56/1234567890abcdef1234567890abcdef.js'></script>

C. Banner Standar 728x90 atau 300x250 (Letakkan di `video-top.blade.php` atau `body-top.blade.php`)

html

{{-- Adsterra Banner 728x90 (Desktop) / 300x250 (Mobile) --}}
<div class="flex justify-center items-center my-2">
    <script type="text/javascript">
        atOptions = {
            'key' : 'abcdef1234567890abcdef1234567890',
            'format' : 'iframe',
            'height' : 90,
            'width' : 728,
            'params' : {}
        };
    </script>
    <script type="text/javascript" src="//www.topcreativeformat.com/abcdef1234567890abcdef1234567890/invoke.js"></script>
</div>

D. Native Banner Widget (Letakkan di `video-bottom.blade.php`)

Native banner menampilkan susunan rekomendasi konten yang menyatu dengan daftar episode drama:

html

{{-- Adsterra Native Banner 4x1 Widget --}}
<script async="async" data-cfasync="false" src="//pl11223344.effectivecpmgate.com/99887766554433221100aabbccddeeff/invoke.js"></script>
<div id="container-99887766554433221100aabbccddeeff"></div>

3. Pengukuran Trafik & Statistik Pengunjung

A. Histats Web Counter (Letakkan di `footer-scripts.blade.php`)

Histats merupakan layanan penghitung pengunjung (hit counter) gratis yang sangat populer untuk web streaming karena menyediakan data online real-time dan ringkasan pengunjung harian yang akurat.

html

<!-- Histats.com  START  (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,XXXXXXXX,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img  src="//sstatic1.histats.com/0.gif?XXXXXXXX&101" alt="histats counter" border="0"></a></noscript>
<!-- Histats.com  END  -->

Ganti XXXXXXXX dengan ID situs Histats yang Anda peroleh dari dashboard Histats.com.

B. Google Analytics 4 (GA4) (Letakkan di `head-scripts.blade.php` atau `footer-scripts.blade.php`)

Jika Anda membutuhkan analitik mendalam perilaku penonton dari ekosistem Google:

html

{{-- Google Analytics 4 (GA4) GTag --}}
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Ganti G-XXXXXXXXXX dengan Measurement ID Google Analytics 4 milik Anda.

C. Verifikasi Kepemilikan Webmaster (Letakkan di `head-scripts.blade.php`)

Untuk memverifikasi website Anda pada Google Search Console atau Bing Webmaster Tools:

html

{{-- Tag Meta Verifikasi Webmaster --}}
<meta name="google-site-verification" content="KODE_VERIFIKASI_GOOGLE_ANDA" />
<meta name="msvalidate.01" content="KODE_VERIFIKASI_BING_ANDA" />

🛡️ Panduan Praktik Terbaik (Best Practices)

Agar website Anda menghasilkan pendapatan maksimal tanpa mengurangi kenyamanan pengunjung menonton drama:

1. Mencegah Kerusakan Tampilan di Perangkat Seluler (Mobile Responsive)

Jangan memasang tag <iframe> atau gambar dengan lebar statis (seperti width="728") tanpa pembungkus responsif. Di layar HP yang lebarnya hanya 360px - 412px, banner kaku akan memaksa peramban memunculkan bilah geser horizontal (horizontal scrollbar), sehingga layout web tampak rusak.
Selalu manfaatkan kontainer bawaan Tailwind yang sudah kami sediakan di dalam berkas partial (overflow-hidden max-w-full flex justify-center).

2. Utamakan Skrip Asinkron (`async` / `defer`)

Seluruh skrip pihak ketiga (iklan & pelacakan) wajib memiliki atribut async atau dimuat di akhir halaman (footer-scripts.blade.php).
Hal ini menjamin video drama dapat segera diputar dan poster drama dapat langsung dilihat oleh pengunjung tanpa terhenti (render-blocking) oleh server penyedia iklan.

3. Keseimbangan Antara Iklan dan Pengalaman Menonton

Hindari Menutupi Kontrol Video: Pastikan banner di video-top atau video-bottom tidak tumpang tindih (overlap) dengan tombol play, tombol volume, atau tombol fullscreen pemutar video.
Batasi Popunder: Cukup pasang 1 script popunder pada footer-scripts.blade.php. Memasang beberapa popunder secara bersamaan dapat memicu peringatan pemblokiran dari peramban modern (Chrome/Safari).
Format Native Lebih Disukai Penonton: Pada bagian bawah video (video-bottom), iklan berformat native banner (gambar mini + judul mirip episode) menghasilkan rasio klik yang jauh lebih tinggi dan terlihat profesional.

🔍 Pemecahan Masalah (Troubleshooting)

Masalah	Kemungkinan Penyebab	Langkah Solusi
Iklan / banner tidak muncul sama sekali	1. AdBlocker pada browser Anda sedang aktif. 2. Cache tampilan Blade di VPS belum dibersihkan. 3. Akun iklan masih dalam tahap review domain.	1. Nonaktifkan ekstensi AdBlock / uBlock Origin di browser Anda atau gunakan mode Incognito. 2. Jalankan `php artisan view:clear` di terminal VPS. 3. Periksa status domain di dashboard penyedia iklan (misal AdSense/Adsterra) apakah sudah berstatus Approved / Active.
Iklan muncul kotak kosong atau ruang putih	Kode script belum merender unit iklan (misal persediaan iklan / fill rate sedang 0%).	Kontainer bawaan Dracin otomatis menyembunyikan diri jika kosong berkat selector Tailwind `[&:not(:empty)]`. Pastikan kode iklan Anda terisi tag JavaScript lengkap.
Tata letak halaman meluap ke kanan (overflow) di HP	Banner memiliki ukuran lebar statis 728px tanpa penyesuaian mobile.	Gunakan unit responsif (`data-ad-format="auto"`) atau gunakan pembungkus CSS seperti `<div class="w-full max-w-full overflow-hidden flex justify-center">...</div>`.
Histats tidak bertambah angkanya	Kode script diletakkan di slot yang salah atau ID Histats keliru.	Pastikan kode Histats ditempatkan di `footer-scripts.blade.php` dan ID situs Anda sudah diganti dengan benar.

Panduan Komprehensif Monetisasi & Pengukuran Trafik Dracin

🌟 Prinsip Desain: Zero-Friction & Aman untuk Pengguna Awam

🗺️ Arsitektur Alur Render Slot Monetisasi

📂 Lokasi Berkas & Cara Mengedit di Server VPS

1. Lokasi Direktori pada Server VPS Produksi

2. Tiga Cara Praktis Mengedit Berkas Monetisasi

Cara A: Menggunakan SFTP / FileZilla (Paling Direkomendasikan untuk Pemula)

Cara B: Menggunakan Terminal SSH (Nano Editor)

Cara C: Mengedit Secara Lokal Sebelum Deployment

3. Izin Berkas & Pembersihan Cache Tampilan (Blade Cache)

📐 Rincian 5 Slot Partials Monetisasi

💻 Contoh Kode Integrasi Siap Pakai

A. Kode Verifikasi Akun & Auto-Ads (Letakkan di `head-scripts.blade.php`)

B. Unit Banner Responsif (Letakkan di `body-top.blade.php` atau `video-top.blade.php`)

C. Unit Banner Berukuran Tetap (Fixed Leaderboard 728x90)

2. Adsterra

A. Iklan Popunder (Letakkan di `footer-scripts.blade.php`)

C. Banner Standar 728x90 atau 300x250 (Letakkan di `video-top.blade.php` atau `body-top.blade.php`)

D. Native Banner Widget (Letakkan di `video-bottom.blade.php`)

3. Pengukuran Trafik & Statistik Pengunjung

A. Histats Web Counter (Letakkan di `footer-scripts.blade.php`)

B. Google Analytics 4 (GA4) (Letakkan di `head-scripts.blade.php` atau `footer-scripts.blade.php`)

C. Verifikasi Kepemilikan Webmaster (Letakkan di `head-scripts.blade.php`)

🛡️ Panduan Praktik Terbaik (Best Practices)

1. Mencegah Kerusakan Tampilan di Perangkat Seluler (Mobile Responsive)

2. Utamakan Skrip Asinkron (`async` / `defer`)

3. Keseimbangan Antara Iklan dan Pengalaman Menonton

🔍 Pemecahan Masalah (Troubleshooting)

🔗 Tautan Referensi Terkait

Panduan Komprehensif Monetisasi & Pengukuran Trafik Dracin ​

🌟 Prinsip Desain: Zero-Friction & Aman untuk Pengguna Awam ​

🗺️ Arsitektur Alur Render Slot Monetisasi ​

📂 Lokasi Berkas & Cara Mengedit di Server VPS ​

1. Lokasi Direktori pada Server VPS Produksi ​

2. Tiga Cara Praktis Mengedit Berkas Monetisasi ​

Cara A: Menggunakan SFTP / FileZilla (Paling Direkomendasikan untuk Pemula) ​

Cara B: Menggunakan Terminal SSH (Nano Editor) ​

Cara C: Mengedit Secara Lokal Sebelum Deployment ​

3. Izin Berkas & Pembersihan Cache Tampilan (Blade Cache) ​

📐 Rincian 5 Slot Partials Monetisasi ​

💻 Contoh Kode Integrasi Siap Pakai ​

1. Google AdSense ​

A. Kode Verifikasi Akun & Auto-Ads (Letakkan di head-scripts.blade.php) ​

B. Unit Banner Responsif (Letakkan di body-top.blade.php atau video-top.blade.php) ​

C. Unit Banner Berukuran Tetap (Fixed Leaderboard 728x90) ​

2. Adsterra ​

A. Iklan Popunder (Letakkan di footer-scripts.blade.php) ​

B. Social Bar / In-Page Push (Letakkan di footer-scripts.blade.php) ​

C. Banner Standar 728x90 atau 300x250 (Letakkan di video-top.blade.php atau body-top.blade.php) ​

D. Native Banner Widget (Letakkan di video-bottom.blade.php) ​

3. Pengukuran Trafik & Statistik Pengunjung ​

A. Histats Web Counter (Letakkan di footer-scripts.blade.php) ​

B. Google Analytics 4 (GA4) (Letakkan di head-scripts.blade.php atau footer-scripts.blade.php) ​

C. Verifikasi Kepemilikan Webmaster (Letakkan di head-scripts.blade.php) ​

🛡️ Panduan Praktik Terbaik (Best Practices) ​

1. Mencegah Kerusakan Tampilan di Perangkat Seluler (Mobile Responsive) ​

2. Utamakan Skrip Asinkron (async / defer) ​

3. Keseimbangan Antara Iklan dan Pengalaman Menonton ​

🔍 Pemecahan Masalah (Troubleshooting) ​

🔗 Tautan Referensi Terkait ​

Panduan Komprehensif Monetisasi & Pengukuran Trafik Dracin

🌟 Prinsip Desain: Zero-Friction & Aman untuk Pengguna Awam

🗺️ Arsitektur Alur Render Slot Monetisasi

📂 Lokasi Berkas & Cara Mengedit di Server VPS

1. Lokasi Direktori pada Server VPS Produksi

2. Tiga Cara Praktis Mengedit Berkas Monetisasi

Cara A: Menggunakan SFTP / FileZilla (Paling Direkomendasikan untuk Pemula)

Cara B: Menggunakan Terminal SSH (Nano Editor)

Cara C: Mengedit Secara Lokal Sebelum Deployment

3. Izin Berkas & Pembersihan Cache Tampilan (Blade Cache)

📐 Rincian 5 Slot Partials Monetisasi

💻 Contoh Kode Integrasi Siap Pakai

1. Google AdSense

A. Kode Verifikasi Akun & Auto-Ads (Letakkan di `head-scripts.blade.php`)

B. Unit Banner Responsif (Letakkan di `body-top.blade.php` atau `video-top.blade.php`)

C. Unit Banner Berukuran Tetap (Fixed Leaderboard 728x90)

2. Adsterra

A. Iklan Popunder (Letakkan di `footer-scripts.blade.php`)

B. Social Bar / In-Page Push (Letakkan di `footer-scripts.blade.php`)

C. Banner Standar 728x90 atau 300x250 (Letakkan di `video-top.blade.php` atau `body-top.blade.php`)

D. Native Banner Widget (Letakkan di `video-bottom.blade.php`)

3. Pengukuran Trafik & Statistik Pengunjung

A. Histats Web Counter (Letakkan di `footer-scripts.blade.php`)

B. Google Analytics 4 (GA4) (Letakkan di `head-scripts.blade.php` atau `footer-scripts.blade.php`)

C. Verifikasi Kepemilikan Webmaster (Letakkan di `head-scripts.blade.php`)

🛡️ Panduan Praktik Terbaik (Best Practices)

1. Mencegah Kerusakan Tampilan di Perangkat Seluler (Mobile Responsive)

2. Utamakan Skrip Asinkron (`async` / `defer`)

3. Keseimbangan Antara Iklan dan Pengalaman Menonton

🔍 Pemecahan Masalah (Troubleshooting)

🔗 Tautan Referensi Terkait