Cara Mengubah Dan Kustomisasi Tampilan Iklan Matched Content

How To Customize Layout of Matched Content Unit

Matched content adalah fitur dari AdSense yang berfungsi untuk menampilkan lebih banyak artikel terkait yang relevan kepada pembaca. Dengan memasang unit iklan ini, lama-lama akan meningkatkan pageview, waktu baca di blog, impresi iklan, dan ujung-ujungnya menambah penghasilan. Itulah kelebihan matched content dibanding related post pada umumnya yang dibuat menggunakan Javascript.

Ketika pertama kali memasang slot iklan matched content, kamu hanya akan dibawa pada halaman untuk mengedit tampilan kulitnya saja. Seperti pemilihan font, warna background, dan sejenisnya. Sementara untuk pengaturan layout artikelnya sendiri seperti jumlah kolom dan baris nggak ada disana. Akhirnya kebanyakan publisher cuma pakai layout default. Padahal kamu bisa kok melakukan kustomisasi tampilan iklan matched content agar gayanya lebih sesuai dengan tempate yang sedang digunakan. Dan jangan khawatir, kustomisasi ini cara legal yang sudah terdokumentasi resmi kok. Link referensinya bisa kamu cek di akhir artikel.

Parameter yang bisa digunakan untuk mengedit gaya iklan matched content ini ada 3, diantaranya:
  1. data-matched-content-ui-type: jenis tata letak (layout).
  2. data-matched-content-rows-num: jumlah baris.
  3. data-matched-content-columns-num: jumlah kolom.

1. Cara Mengganti Tata Letak (Layout) Iklan Matched Content

Kamu dapat mengubah susunan text dan gambar, misalnya kamu bisa memilih menampilkan text saja, gambar dan text berdampingan, gambar di atas text, dan sebagainya. Jumlah baris dan kolom artikel pun bisa disesuaikan sendiri. Asik kan? Untuk mengubahnya, kamu perlu parameter data-matched-content-ui-type yang ditambahkan ke dalam kode iklan. Jenis layout atau tata letak yang tersedia ada 6, yaitu:
  1. Hanya text: text.
  2. Text dengan kartu: text_card.
  3. Gambar dan text berdampingan: image_sidebyside.
  4. Gambar dan text berdampingan dengan kartu: image_card_sidebyside.
  5. Gambar di atas text: image_stacked.
  6. Gambar di atas text dengan kartu: image_card_stacked.

1.1. Hanya Text

Layout dari artikel yang ditampilkan hanya berupa tulisan / text tanpa gambar. Untuk memilihnya, tambahkan parameter data-matched-content-ui-type="text" ke kode iklan.
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Kustomisasi Tata Letak Iklan Matched Content

1.2. Text Dengan Kartu

Kartu disini maksudnya tiap satu artikel akan diberikan kotak, dan ada jarak antara satu kotak dengan lainnya. Memang agak mirip dengan tipe hanya text di nomor satu. Tapi perhatikan deh, kalau di nomer satu nggak ada kotaknya. Cuma dikasih garis sebagai pemisah artikel satu dengan lainnya. Untuk menerapkan tipe ini, tambahkan parameter data-matched-content-ui-type="text_card".
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Customize Layout Matched Content AdSense

1.3. Gambar dan Text Berdampingan

Gambar ada di sebelah kiri, dan text ada di sebelah kanan. Mereka tampil berdampingan. Parameter yang dibutuhkan: data-matched-content-ui-type="image_sidebyside".
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Menyesuaikan Unit Iklan Matched Content

1.4. Gambar dan Text Berdampingan Dengan Kartu

Hampir sama dengan nomor sebelumnya, tapi yang ini tampil dengan kartu. Kalau nggak tau apa itu kartu, baca pengertiannya di nomor 1.2. Text Dengan Kartu diatas. Parameter yang dibutuhkan: data-matched-content-ui-type="image_card_sidebyside".
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Mengubah Layout Slot Iklan Matched Content

1.5. Gambar Di Atas Text

Gambar dan text disusun bertumpuk, dimana gambar tampil lebih dulu, kemudian text ada di bawahnya. Parameter yang dibutuhkan: data-matched-content-ui-type="image_stacked".
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Ganti Tampilan Kolom Iklan Matched Content

1.6. Gambar Di Atas Text Dengan Kartu

Kurang lebih sama seperti nomor sebelumnya, tapi disimpan di dalam kartu. Belum tahu kartu? Baca pengertiannya dulu di nomor 1.4. Gambar dan Text Berdampingan Dengan Kartu. Parameter yang dibutuhkan: data-matched-content-ui-type="image_card_stacked".
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Edit Kolom Baris Matched Content AdSense

2. Menentukan Jumlah Baris dan Kolom

Parameter yang digunakan untuk mengatur jumlah baris dan kolom ini adalah data-matched-content-rows-num dan data-matched-content-columns-num. Kedua parameter ini WAJIB ditentukan bersamaan, kalau nggak, ya biasanya jadi nggak muncul iklannya.

Batasan untuk jumlah baris dan kolom ini antara 1 sampai 30. Artinya jumlah minimum adalah 1, dan jumlah maksimum adalah 30. Kalau kurang atau lebih, unit matched content akan terlihat kosong.

Jumlah baris dan kolom bisa tampil NGGAK SESUAI dengan yang sudah diatur karena lebar halaman blognya nggak cukup. Kalau kasusnya kaya gitu, Google akan secara otomatis menampilkan ukuran lain yang disesuaikan dengan lebar yang tersedia. So, pastikan kamu menggunakan template yang tepat dengan membaca tips memilih template Blogger yang baik dan benar.

2.1. Baris dan Kolom Yang Sama Untuk Tampilan Mobile dan Desktop

Jumlah baris dan kolom akan selalu sama. Misalnya ketika di desktop yang layarnya besar, jumlah kolom kesamping ada 4. Maka ketika dibuka di perangkat mobile (misalnya smartphone) yang layarnya lebih kecil, jumlah kolom akan tetap ada 4, meski tampilannya pasti berdesak-desakan. Tentukan nilai atau angka pada parameter yang dibutuhkan.
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="4" <!-- Contoh baris berjumlah 4 -->
     data-matched-content-columns-num="2" <!-- Contoh kolom berjumlah 2 -->
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2.2. Baris dan Kolom Yang Berbeda Untuk Tampilan Mobile dan Desktop

Kode yang ini kayanya lebih bagus, cocok untuk diterapkan ke template responsif karena bisa menyesuaikan dengan ukuran layar yang lebih kecil. Berikut adalah contoh tampilan grid 4x1 di mobile dan 2x2 di desktop.
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="4,2" <!-- Angka pertama untuk mobile, angka kedua untuk desktop -->
     data-matched-content-columns-num="1,2" <!-- Angka pertama untuk mobile, angka kedua untuk desktop -->
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ubah Layout Grid Kotak Iklan Matched Content Responsif

Sekian pembahasan blog Igniel mengenai cara mengubah tata letak layout iklan matched content. Tinggal disesuaikan deh dengan tampilan template blog biar lebih matching. Semoga bermanfaat dan semakin banyak earning yang mengalir. Duh formal banget sih bahasanya di artikel ini.

https://support.google.com/adsense/answer/7533385?hl=en

Artikel Terkait

22 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • Bosindogroup
    9/8/21
    Profil: https://www.blogger.com/profile/17013994236597799981
    Halo mbak. Ini saya sudah menerapkan hal2 di atas agar muncul foto. Tapi kenapa ya cuma munculnya tulisan terus
  • ImronSyah
    31/7/21
    Profil: https://www.blogger.com/profile/10204484555102586072
    Teh,,, Kalau misal pada matched content yang biasanya related post itu di ganti Postingan Terbaru bisa nggak ya??
    • Igniel
      1/8/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak bisa. Dari Google sendiri isi matched content itu adalah postingan yang berkaitan, bukan postingan terbaru.
  • Cipta Desa
    13/5/21
    Profil: https://www.blogger.com/profile/10752943343364055053
    thumbanil di blog saya kok gak muncul ya kak, hanya tulisan meskipun sudah mengikuti caranya dengan kode data-matched-content-ui-type="image_stacked"
  • Muhammad Reza
    25/2/21
    Profil: https://www.blogger.com/profile/03875569555809687067
    Apakah iklan matched konten bisa disimpan di tengah? Trus unit iklan di blog sya kadang muncul kadang gak padahal bukan iklan otomatis aj tapi simpan satu2? Solusinya mbak ,🙏
  • Pegiat Literasi.com
    29/6/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    #mbak, kalau mau buat iklannya ditaruh di relatedpost, kodenya ditaruh dimana ya? Saya pake template textrim dari mbak, saya cari kode ini: , tp gak ada.
  • Pegiat Literasi.com
    29/6/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    halo mbak...ini kode iklannya diteruh dimana kalau direlated post? saya pake template texrim.. cari kode ini tp gak ( )... Kode yang mbak kasi di atas itu diteruh dimana?
  • @TrikGue
    17/2/19
    Profil: https://www.blogger.com/profile/08731874234297226694
    Jadi lebih rapih ya mbak, tapi saya sendiri untuk di situs saya https://id.trikgue.info pake yang bawaan aja lah (responsive)
  • Azid Zainuri, S.Pd
    18/9/18
    Profil: https://www.blogger.com/profile/04057497464899163227
    sekadar share, sekarang iklan terkait tidak terpatok pada jumlah visitor, asal sering update. pengalaman saya, jumlah posting 200 dan visitor kurang dari 300 udah dapat iklan terkait. D
  • Muklis
    18/8/18
    Profil: https://www.blogger.com/profile/12083023708790117174
    Terima kasih atas tutorialnya, sangat membantu,, salam asdar[dot]id
  • Chalista Lina
    5/8/18
    Profil: https://www.blogger.com/profile/09113789991008337575
    Hei, kak saya coba tp gagal ya, kode nya itu ditaruh dimana? Contoh sama kode iklan adsense beneran itu gak sama soalnya
    • Igniel
      5/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini kode asli iklan matched content. Pasti kaya gini kodenya. Kode yang kamu dapet kaya gimana?
  • biasa aja
    26/7/18
    Profil: https://www.blogger.com/profile/00184486095371547805
    menurut pengalaman, yang ctr nya tinggi pake desain related ads yang mana ya?
    • Igniel
      26/7/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      1) Jenis text only, simpen di tengah artikel.
      2) Jenis gambar & text, simpen di bawah artikel atau di sidebar.
  • Ardianysah J. Prawira
    2/6/18
    Profil: https://www.blogger.com/profile/17188659355465337070
    Teh.. kalau ukuran Text yang ada di dalam MC itu bisa kita akalin gak tehh supaya ukurang fontnya gak gede banget gitu.. dari tadi pagi, ngubek-ngubek gak nemu jalur nya teh..
    • Igniel
      2/6/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kayanya belum bisa. Udah nyoba ngakalin pake JS juga belum mempan. Nanti coba diulik lagi.
    • Ardianysah J. Prawira
      10/6/18
      Profil: https://www.blogger.com/profile/17188659355465337070
      siap teh... nanti berkabar lewat WA atau Inbox facebook teh :D
  • Unknown
    3/3/18
    Profil: https://www.blogger.com/profile/03706931773067521585
    Saya pake amp mba. Jadi ngga bisa pake script CSE.
  • Unknown
    2/3/18
    Profil: https://www.blogger.com/profile/03706931773067521585
    Belum dapet matched content mba, trafiknya masih rendah. Hehe.

    Berapa tinggi trafiknya mba agar dapet matched?
    • Igniel
      3/3/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cukup 1000 PV perhari kayanya bisa. Salah satu blog saya ada yang segitu trafficnya dan bisa dapet.

      Coba pake related post CSE yang nggak kalah keren sama matched content -> https://www.igniel.com/2017/12/related-post-google-cse.html
  • Mang Dhepha
    1/3/18
    Profil: https://www.blogger.com/profile/13212638759938625117
    Gimana cara mindahin iklan matched content?
    Soalnya iklan matched content diblog ane nampilnya dibawah footer
    • Igniel
      1/3/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan pake matched content dari auto ads. Pake yang biasa aja.