Ini cukup menarik, karena selama ini kita hanya menerima style matched content apa adanya dari Adsense. Kita hanya bisa mengatur jenis dan warna font saja.
Namun hari ini kita bisa mengatur jenis dan warna font, letak gambar (di samping atau di atas judul), jumlah baris, dan jumlah kolom, atau kita bisa memutuskan untuk menampilkan matched content hanya teks saja.
Ada 6 gaya atau tipe yang disediakan Adsense untuk kita pilih, di antaranya:
1. Gambar di samping judul.
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content gambar di samping judul dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content gambar di samping judul dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
2. Gambar di samping judul dengan kartu (menggunakan kotak).
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content gambar di samping judul dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content gambar di samping judul dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
3. Gambar di atas judul.
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content gambar di atas judul dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content gambar di atas judul dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
4. Gambar di atas judul dengan kartu (menggunakan kotak).
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content gambar di atas judul dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content gambar di atas judul dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
5. Hanya teks.
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content hanya teks dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content hanya teks dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
6. Hanya teks dengan kartu (menggunakan kotak).
Spoiler:
Kode di atas menunjukkan cara membuat unit matched content hanya teks dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
Hint
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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>
Kode di atas menunjukkan cara membuat unit matched content hanya teks dengan kartu dengan 4 baris dan 1 kolom yang menampilkan total 4 item.
Anda tinggal mengatur angka pada
data-matched-content-rows-num
untuk mengatur jumlah baris item dan mengatur angka pada data-matched-content-columns-num
untuk mengatur jumlah kolom item.
Jika Anda menyimpan unit matched content di bawah postingan dengan lebar yang disesuaikan dengan lebar halaman postingan, Maka Anda bisa mengatur tampilan matched content menjadi 1 kolom 4 baris di tampilan mobile dan menjadi 4 kolom 2 baris di tampilan desktop dengan kode seperti berikut
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<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-columns-num="1,4"
data-matched-content-rows-num="4,2"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Ada beberapa batasan untuk jumlah baris dan kolom yang dapat Anda tetapkan. Total jumlah rekomendasi di unit matched content ini harus di antara 1 dan 30 item. Jika Anda mencoba menampilkan kurang dari 1 item atau lebih dari 30 item, maka unit matched content akan terlihat kosong. Anda harus teliti dalam memilih tipe dan jumlah kolom dan baris agar unit matched content tampil sesuai keinginan Anda.
Namun sayang, kustomisasi matched content ini belum tersedia untuk AMP HTML. Semoga saja segera diberlakukan untuk matched content untuk AMP HTML.
Sumber: https://support.google.com/adsense/answer/7533385