Cara Mengubah dan Kostumisasi Tampilan Iklan AdSense Matched Content

Matched Content adalah salah satu fitur Google AdSense yang berfungsi menampilkan artikel-artikel yang relevan kepada pembaca. Fungsinya mirip dengan fitur related posts pada umumnya tetapi bisa disisipkan iklan AdSense.

Slot iklan matched content secara umum hanya memberikan pilihan untuk mengedit tampilan luarnya secara sederhana saja. Seperti memilih font, warna background, dan sejenisnya pada panel Google AdSense.

Panel Google AdSense tidak memberikan pengaturan layout artikel, seperti menentukan jumlah kolom dan baris. Padahal Anda bisa mengubah tampilan iklan Google AdSense Matched Content agar sesuai dengan tampilan antarmuka situs web Anda.

Agar Anda bisa menyesuaikan tampilan matched content, Anda bisa menambahkan kode berikut ini pada kode bawaan yang diberikan. Tentunya kustomisasi ini legal dan tersedia dokumentasinya.

Ada 3 paramenter yang bisa Anda gunakan untuk menyesuaikan matched content pada situs web Anda:

1. Mengganti jenis tata letak (layout)

   data-matched-content-ui-type

2. Mengganti jumlah baris

   data-matched-content-rows-num

3. Menganti jumlah kolom

   data-matched-content-columns-num

Cara Mengganti Tata Letak (Layout) Iklan Matched Content

Anda bisa memilih untuk menampikan teks saja, gambar dan teks, gambar di atas teks, dan format lainnya.

Untuk mengubah layout, Anda perlu menambahkan paramenter berikut pada kode iklan:

data-matched-content-ui-type

1. Hanya teks:

   text

2. Teks dengan kartu:

   text_card

3. Gambar dan teks berdampingan:

   image_sidebyside

4. Gambar dan teks berdampingan dengan kartu:

   image_card_sidebyside

5. Gambar di atas teks:

   image_stacked

6. Gambar di atas teks dengan kartu:

   image_card_stacked

Hanya Teks

Layout daftar judul artikel hanya berupa tulisan/teks tanpa gambar. Anda bisa menambahkan parameter berikut pada kode iklan:

data-matched-content-ui-type="text"

Maka, hasilnya akan seperti ini:

<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>

Teks dengan Kartu

Layout daftar judul artikel akan diberikan kotak pada masing-masing judulnya dan terdapat jarak antara kotaknya. Jika Anda memilih layout ini, tambahkan parameter berikut pada iklan:

data-matched-content-ui-type="text_card"

Hasilnya akan seperti ini:

<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>

Gambar dan Teks Berdampingan

Pada layout ini, gambar dan teks akan ditampilkan berdampingan. Gambar akan ditempatkan di sebalah kiri dan teks di sebelah kanan. Jika Anda memilih layout ini, tambahkan parameter berikut pada kode iklan:

data-matched-content-ui-type="image_sidebyside"

Hasilnya akan seperti ini:

<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>

Gambar dan Teks Berdampingan dengan Kartu

Hampir mirip dengan nomor 1.3, hanya saja masing-masing artikel akan diberikan kotak. Jika Anda memilih layout ini, tambahkan parameter berikut pada kode iklan:

data-matched-content-ui-type="image_card_sidebyside"

Hasilnya akan seperti ini:

<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>

Gambar di Atas Teks

Pada layout ini, gambar akan disusun di atas teks. Jika Anda memilih layout ini, tambahkan parameter berikut pada kode iklan:

data-matched-content-ui-type="image_stacked"

Hasilnya akan seperti ini:

<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>

Gambar di Atas Teks dengan Kartu

Hampir mirip dengan nomor 1.5, hanya saja masing-masing artikel akan diberikan kotak. Jika Anda memilih layout ini, tambahkan parameter berikut pada kode iklan:

data-matched-content-ui-type="image_card_stacked"

Hasilnya akan seperti ini:

<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>

Mengganti Jumlah Baris dan Kolom

Parameter yang digunakan untuk mengatur jumlah baris dan kolom adalah:

data-matched-content-rows-num

dan

data-matched-content-columns-num

Kedua parameter ini harus ditambahkan bersamaan, atau iklan tidak akan ditampilkan.

Anda bisa menambahkan baris dan kolom antara 1 hingga 30. Minimal 1 baris atau kolom dan maksimal 30 baris atau kolom. Jika kurang atau lebih, iklan tidak akan ditampilkan.

Pada beberapa kasus, Anda harus memperhatikan lebar halaman situs web agar iklan yang tampil sesuai dengan yang diharapkan.

Baris dan Kolom yang Sama untuk Tampilan Mobile dan Desktop

Layout ini akan menampilkan jumlah dan baris yang sama baik ketika ditampilkan pada perangkat mobile atau 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" <!-- Jika 4 baris -->
     data-matched-content-columns-num="2" <!-- Jika 2 kolom-->
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Baris dan Kolom yang Berbeda Pada Perangkat Mobile dan Desktop

Layout ini akan menampilkan jumlah dan baris yang berbeda ketika ditampilkan pada perangkat mobile atau desktop.

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>

Semoga bermanfaat :)