Cara Pasang Iklan AdSense Pakai Tag Pemanggil Khusus

Script untuk menyisipkan iklan AdSense dengan menggunakan tag pemanggil khusus yang bisa dipasang bebas dimanapun. Bisa untuk Blogger dan WordPress.
Script Iklan AdSense Pakai Tag Pemanggil

Satu lagi nih variasi posisi penempatan iklan AdSense yang akan berguna banget, yaitu dengan menggunakan tag pemanggil khusus. Kenapa bisa berguna? Karena kamu bisa 100% bebas menentukan sendiri posisi iklannya dengan akurat. Dengan menggunakan tag pemanggil, penempatan iklan akan terasa jauh lebih presisi dibanding menggunakan script kustom lain (yang juga sudah dibagikan di blog Igniel).

Tentang Kode / Tag Pemanggil

Kode atau tag pemanggil iklan dideklarasikan menggunakan tag HTML yang disertai nama class atau id khusus. Contohnya begini:

<div class='ad'></div>

Itu cuma contoh ya. Tagnya tidak harus melulu menggunakan div dan nama class atau id-nya tidak selalu wajib ad. Tapi biar lebih gampang dan selaras dengan pembaca lain, saya akan gunakan tag di atas sebagai tag pemanggil iklan AdSense pada tutorial ini. Okay?!

Kelebihan

Jika kamu sudah menuliskan tag pemanggil di dalam artikel (dan jumlahnya banyak) tapi suatu saat ingin menghapus script iklan jenis ini, maka tag tersebut tidak akan menghancurkan tampilan artikel sama sekali. Browser akan membacanya sebagai tag HTML kosong yang tidak berisi apa-apa.

Script Iklan Pakai Kode Pemanggil

Ini dia script atau kode pasang iklan AdSense pakai tag pemanggil khusus. Bisa dipasang di Blogspot (Blogger) dan WordPress ya.

INGAT! Kita sudah sepakat untuk menggunakan class dengan nama ad, jadi semua kode di bawah menggunakan class tersebut.

1. Siapkan Iklan

Yang keren dari kode ini adalah, kamu bisa menyisipkan unit iklan AdSense yang berbeda, jadi tidak melulu 1 iklan yang sama. Misalnya kamu punya beberapa unit iklan nih di akun AdSense: banner, middle, dan parallax. Ketiganya bisa dipanggil dan ditentukan.

  1. Siapkan kode dari unit iklan yang diinginkan, lalu salin hanya pada bagian yang diberi kotak biru (lihat gambar).
    Iklan AdSense Tag Pemanggil
  2. Terus kode yang ada di kotak merah disimpan di mana? Biasanya kamu sudah memasangnya secara tidak sadar, terutama bagi yang mengaktifkan iklan otomatis. Posisinya ada di antara tag <head></head>. Kalau belum ada, tinggal pasang saja SATU KALI di atas </head>.
  3. Parse kode tersebut. Caranya gampang saja, silakan scroll halaman blog ini sampai ke area komentar, lalu gunakan fitur parse yang tersedia.
    Script Iklan Pakai Tag HTML Pemanggil
  4. Setelah di-parse, HAPUS karakter spasi yang masih tersisa sehingga semua kodenya menyatu!
  5. Lakukan berulang jika ingin menggunakan beberapa unit iklan. Satu juga boleh sih.

Simpan dulu kode ini. Nanti akan kita sisipkan pada Javascript di bawah.

2. CSS

Tambahkan sedikit kode CSS berikut untuk memberikan margin agar tidak terlalu berdempetan dengan teks yang ada di atas dan bawahnya.

Tambahkan CSS DI ATAS </style> atau ]]></b:skin>.

.ad {display: block; margin: 1.5rem 0; text-align: center}

3. Javascript

Ini dia bagian penting dan krusial dalam script pemanggil iklan AdSense pakai tag khusus ala Igniel. Jangan ubah apapun (kecuali yang diminta) untuk menghindari error.

<script>//<![CDATA[
/* ----
  + Embed Ads With Tags by igniel.com
  + Source code: https://www.igniel.com/2023/04/embed-iklan-tag-pemanggil.html
---- */
((ignielAdTag) => {
  const ad = [
    'kode iklan 1 (sudah di-parse)',
    'kode iklan 2 (sudah di-parse)',
    'kode iklan 3 (sudah di-parse)'
  ];
  const sf = (safe)  => {
    return safe
      .replaceAll(/&amp;/g, '&')
      .replaceAll(/&lt;/g, '<')
      .replaceAll(/&gt;/g, '>')
      .replaceAll(/&quot;/g, '"')
  };
  const a = document.querySelectorAll('.ad');
  if (a.length > 0) {  
    a.forEach((e) => {
      const b = e.getAttribute('data-type'),
      c = (() => {
        if (b) {return b >= (ad.length + 1) ? 0 : b - 1} else return 0;
      })(), d = sf(ad[c]); e.insertAdjacentHTML('afterbegin', d);
    });
  };
})();
//]]></script>

Perhatikan yang ditandai. Ganti per barisnya dengan kode iklan yang sudah di-parse pada langkah pertama. Contohnya seperti ini. Saya hanya menggunakan 2 unit iklan.

Ingat ya, setelah di-parse, HAPUS spasi yang masih tersisa supaya menyatu semua kodenya.
const ad = [
  '&lt;ins class=&quot;adsbygoogle&quot; style=&quot;display:block&quot; data-ad-client=&quot;ca-pub-xxxx&quot; data-ad-slot=&quot;1234&quot; data-ad-format=&quot;auto&quot; data-full-width-responsive=&quot;true&quot;&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;',
  '&lt;ins class=&quot;adsbygoogle&quot; style=&quot;display:inline-block;width:300px;height:600px&quot; data-ad-client=&quot;ca-pub-xxxx&quot; data-ad-slot=&quot;5678&quot;&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;'
];

Cara Pakai

Untuk mulai memanggil iklan, gunakan tag HTML berikut. Tuliskan dimanapun kamu menginginkannya. Bisa di dalam artikel, sidebar, banner, pokoknya bebas. Penulisannya pun bisa beberapa kali alias berulang alias banyakkkk juga gak masalah kalau memang butuh banget.

<div class='ad' data-type='1'></div>

Atribut data-type menandakan unit iklan mana yang dipanggil. Di atas kan kita sudah input beberapa kode iklan yang sudah di-parse, nah....iklan yang dipanggil akan sesuai dengan posisi penulisannya.

Misalnya begini. Ini kode iklannya:

const ad = [
  'kode iklan 1 (Banner)',
  'kode iklan 2 (Middle)',
  'kode iklan 3 (Parallax)
];

Lalu kamu menulis kode HTML begini:

<div class='ad' data-type='3'></div>

Maka yang akan dipanggil adalah iklan parallax yang ditulis di posisi ke 3. Paham kan ya?

Ada beberapa kondisi juga yang bikin script ini aman dan tidak merusak tampilan.

  • Kalau kamu kelupaan tidak menuliskan atribut data-type, maka akan otomatis memanggil iklan yang urutan penulisannya paling pertama. Jadi sah-sah saja menuliskan tag HTML pemanggilnya seperti ini:
    <div class='ad'></div>
  • Begitupun jika angka di data-type lebih besar dari penulisan jumlah kode iklan, maka yang dipanggil adalah kode yang pertama.

Sudah deh, cuma gitu doang cara menyisipkan iklan menggunakan kode tag pemanggil. Yang bikin terkesan ribet adalah saat proses parse kode iklan. Padahal sih tidak ada ribet-ribetnya sama sekali. Saya buat kodenya seminimal mungkin.

16
Cara Pasang Iklan AdSense Pakai Tag Pemanggil Khusus
Cara Pasang Iklan AdSense Pakai Tag Pemanggil Khusus
Script untuk menyisipkan iklan AdSense dengan menggunakan tag pemanggil khusus yang bisa dipasang bebas dimanapun. Bisa untuk Blogger dan WordPress.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

16 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Arya Kusuma Liadi
    17 September, 2024
    Profil: https://www.blogger.com/profile/05027381155889048530
    Mba, blog saya memakai template fiksioner v4 mba igniel. Kalo pakai script ini, iklan adsense nya harus iklan otomatis atau manual ya mba?
    • Igniel
      17 September, 2024
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bebas mas. Nggak dikasih settingan default untuk pilih iklan auto / manual.
  • Ruzdani El-Mino
    30 Juni, 2023
    Profil: https://www.blogger.com/profile/03064688817933689829
    Untuk jenis iklan lain bisa gak mas? Misal seperti yllix, apakah bisa menggunakan ini?
    • Igniel
      30 Juni, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa kak, bebas. Yang penting bener saat parse kodenya.
  • SeFi
    17 Juni, 2023
    Profil: https://www.blogger.com/profile/09601931053297438077
    pasang javasriptnya dimana kak?
  • Aditya
    30 Mei, 2023
    Profil: https://www.blogger.com/profile/07949746856285208569
    Next cara membuat logo menjadi format svg dan melihat html svg nya mbak 🙏
    • Igniel
      31 Mei, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2023/05/convert-gambar-jpg-png-ke-svg.html
  • M.Zaqia Yahya
    14 Mei, 2023
    Profil: https://www.blogger.com/profile/02304068230035131366
    makasih informasinya
  • Gunawan S
    12 Mei, 2023
    Profil: https://www.blogger.com/profile/06173937886520733805
    Boleh nanya perihal template textrim ga, mbak?
    • Igniel
      13 Mei, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya silakan.
    • Anton
      15 Mei, 2023
      Profil: https://www.blogger.com/profile/08061917196568678079
      Gan, ada informasi mengakali featured image supaya muncul di RSS feed blogspot ga? Google news syaratnya feednya harus ada featured image
    • Gunawan S
      23 Mei, 2023
      Profil: https://www.blogger.com/profile/06173937886520733805
      Untuk membesarkan font theme textrim free gimana ya?

    • Igniel
      31 Mei, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Langsung dari menu Customizer. Cek dokumentasi resminya, di judul "Mengganti Warna dan Font".
      https://textrim.blogspot.com/2020/01/textrim-theme-documentation.html
    • Igniel
      13 Juni, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Memunculkan gambar (featured image) blog di RSS feed:
      https://www.igniel.com/2023/06/menampilkan-gambar-di-rss-feed.html
  • Gustavo José
    30 April, 2023
    Profil: https://www.blogger.com/profile/04061393627412452769
    Tip yang bagus, terima kasih