10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Disini penulis tidak akan berbagi cara bagaimana mendapatkan Matched Content Google Adsense atau cara memasang kode iklan di blog, tetapi lebih tentang cara membuatnya responsif untuk semua jenis ukuran layar perangkat saat diakses pengunjung.

Seperti diketahui, saat ini sebagian besar pengunjung sebuah website berasal dari pengguna smartphone. Jadi tak hanya template dan themenya, tapi iklan yang dipasang juga harus dioptimasi agar responsif, secara otomatis menyesuaikan ukuran dan layar perangkat.

Matched content atau konten yang sesuai adalah jenis iklan Google Adsense yang tentu sudah tidak asing lagi dikalangan blogger.

Tools dalam bentuk iklan ini diberikan Google untuk membantu para publishernya untuk meningkatkan pendapatan sekaligus page view artikel.

Tampilan dan kerja matched content Adsense sendiri lebih mirip seperti artikel terkait pada umumnya. Kelebihannya, related post matched content ini juga sudah dimonetisasi langsung oleh Google.

Jadi, selain page view meningkat, bounce race menurun, pendapatan sebuah website dan blog yang menggunakan iklan jenis ini juga dapat meningkat pendapatannya.

Cara Menyesuaikan Iklan Matched Content Responsif Sesuai Ukuran Layar

Meski kode iklan matched content sendiri dapat otomatis responsive menyesuaikan ukuran layar perangkat, para publisher Google Adsense juga diberi kebebasan untuk menyesuaikannya agar tampilannya lebih menarik.

Hal ini sudah tertera dan dapat kalian pelajari di halaman support Google berikut.

Berikut kumpulan kode unit iklan matched content yang responsif otomatis menyesuaikan ukuran layar sesuai dengan kebijakan Google Adsense.

6 Tata Letak Unit Iklan Matched Content Adsense

Penerapan dan perubahan kode iklan matched content didalam artikel ini merupakan contoh kode yang dapat diterima oleh Google Adsense.

Kalian tidak akan dianggap melanggar kebijakan program Adsense dengan mengubah kode yang iklan seperti dibawah ini.

#1. Gambar dan teks bersisian

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Gambar dan teks muncul bersisian. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type=”image_sidebyside” ke kode iklan atau gunakan kode dibawah ini untuk menggunakannya.

<script async  data-src="https://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>

#2. Gambar dan teks bersisian dengan kartu

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Gambar dan teks muncul bersisian dalam kartu. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type=”image_card_sidebyside” ke kode iklan atau gunakan kode dibawah ini untuk menggunakannya .

<script async  data-src="https://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>

#3. Gambar menumpuk diatas teks

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Gambar dan teks ini disusun menumpuk satu sama lain. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type=”image_stacked” ke kode iklan atau langsung saja copy kode berikut.

<script async  data-src="https://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="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#4. Gambar di tumpuk diatas teks dengan kartu

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Gambar dan teks ini disusun menumpuk satu sama lain di dalam kartu. Untuk memilih tata letak ini, tambahkan parameter data-matched-content-ui-type=”image_card_stacked” ke kode iklan seperti contoh berikut.

Loading...
<script async  data-src="https://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="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#5. Hanya teks

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar
Loading...

Tata letak hanya teks tanpa gambar. Tambahkan parameter data-matched-content-ui-type=”text” ke kode iklan seperti berikut.

<script async  data-src="https://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>

#6. Teks dengan kartu

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Untuk memilih tata letak seperti ini, tambahkan parameter data-matched-content-ui-type=”text_card” ke kode iklan seperti berikut kodenya.

<script async  data-src="https://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>

4 Cara Menentukan Jumlah Baris dan Kolom Unit Iklan Matched Content Adsense

Berikut jumlah baris dan kolom rekomendasi yang sesuai aturan Google sehingga melanggar aturan ketika diterapkan di dalam blog atau website.

Berikut 4 cara menentukan jumlah baris serta kolom unit iklan sesuai (matched content) sehingga lebih maksimal untuk meningkatkan pendapatan serta page view konten.

#1. 4×1 untuk Seluler dan Desktop

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Dengan menerapkan kode ini, unit iklan tampil menjadi empat baris dengan satu kolom ditampilkan dalam grid.

<script async  data-src="https://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-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#2. 2×2 untuk Seluler dan Desktop

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Kode ini membuat tampilan unit iklan sesuai menjadi dua baris dan dua kolom dalam tampilan grid.

<script async  data-src="https://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-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#3. 3×3 untuk Seluler dan Desktop

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Cara ini membuat iklan matched content tampil menjadi tiga baris dan tiga kolom. Mirip sekali untuk artikel terkait pada beberapa website umumnya.

<script async  data-src="https://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-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#4. 4×1 untuk Seluler dan 2×2 Desktop untuk Situs Responsif

10 Cara Modifikasi Iklan Matched Content Adsense Menjadi Responsif Sesuai Ukuran Layar

Terakhir, penerapan kode ini membuat iklan matched content tampil menjadi 4×1 baris ketika dibuka menggunakan perangkat smartphone atau mobile, sedangkan ketika diakses menggunakan desktop tampil 2×2.

Contoh penerapan ini cocok untuk situs responsif sehingga tampilan iklannya tidak berantakan.

<script async  data-src="https://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-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cara Menerapkan Kode Iklan yang Sesuai

Cara menerapkan kode diatas sangatlah mudah baik ketika dipasang di blogger ataupun blog self hosting wordpress.

Silahkan ganti dua kode berikut dengan kode iklan matched content Adsense kalian masing-masing.

data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="1234567890"

Untuk situs wordpress, kalian bisa langsung diterapkan menggunakan plugin iklan.

Sedangkan untuk blogger, sebelum diterapkan di dalam postingan artikel blog pastikan kalian parse terlebih dulu.

Sebab, jika kode iklan tersebut langsung diterapkan didalam mode HTML akan terjadi error. Kalian bisa menggunakan tools online dari Quick Escape.

Copy dan pastekan kode iklan di kotak Raw HTML code, kemudian pastekan Convert to escaped characters.

Setelah itu, copy hasil parse kode iklan tersebut dan terapkan didalam mode HTML blogspot. Tutorial pasang kode iklan di blogspot disini.

Demikian cara mudah mengatur iklan matched content Google Adsense menjadi lebih responsif dan secara otomatis bisa menyesuaikan ukuran layar pengunjung.

Sumber: Support.google.com

Populer Pekan Ini

Loading...

Rekomendasi Widiynews

Tinggalkan Balasan

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More