UPDATE !! Cara Memasang Dan Defer Iklan MGID Terbaru
Pada postingan terdahulu sudah saya beri penjelasan tentang cara memasang iklan MGID di blog AMP maupun Non AMP. Seiring perkembangan teknologi, MGID juga melakukan banyak inovasi dan perubahan untuk meningkatkan layanannya.
Di artikel ini, yang akan saya bahas adalah tentang cara pemasangan iklan MGID terbaru disertai dengan cara mendefer javascriptnya agar tidak memberatkan loading blog kalian.
Saya juga menyertakan atribut khusus untuk keamanan yang juga direkomendasikan dalam penerapan SEO. Atribut tersebut dinamakan Crossorigin. Mau tahu penjelasannya? Simak artikel dibawah ini.
Apa itu Attribute Crossorigin?
Sebelum kalian tahu cara pemasangan dan melakukan defer iklan MGID. Ada baiknya kalian juga mengetahui apa yang dimaksud Attribute Crossorigin
Attribute Crossorigin merupakan sebuah komponen pada bahasa HTML yang digunakan untuk memuat sebuah resources dari protokol domain eksternal didalam protokol domain milik kita sendiri. Dalam kasus defer iklan MGID ini bisa digunakan crossorigin="anonymous"
Dengan penggunaan atribut tersebut maka resources akan dimuat secara anonim tanpa mengirimkan kredensial seperti sertifikat, autentikasi HTTP Basic ataupun cookies.
Contoh penerapan atribute crossorigin="anonymous"
<script src="https://jsc.mgid.com/h/e/hendrasurya.com.1209025.js" crossorigin="anonymous" async>
</script>Pemasangan Iklan MGID di Blog AMP
Jika pada artikel yang saya tulis, tentang cara pemasangan iklan MGID di blog AMP dulu menggunakan komponen amp-ad. Maka untuk update terbaru ini kita disarankan oleh MGID menggunakan amp-embed. Namun yang menjadi masalah adalah komponen amp-embed sudah tidak lagi di support oleh pihak amp.dev.
Salah satu solusi yang bisa kita gunakan adalah tetap memakai komponen amp-ad untuk menampilkan iklan MGID di blog AMP. Silahkan pasang script berikut ini dibawah tag <head>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Contoh penulisan script iklan MGID di blog AMP dengan amp-embed
<amp-embed width="600" height="600" layout="responsive" type="mgid" data-publisher="hendrasurya.com" data-widget="1209025" data-container="M346101ScriptRootC1209025" crossorigin="anonymous"></amp-embed>Contoh penulisan script iklan MGID di blog AMP dengan amp-ad
<amp-ad width="600" height="600" layout="responsive" type="mgid" data-publisher="hendrasurya.com" data-widget="1209025" data-container="M346101ScriptRootC1209025" crossorigin="anonymous"></amp-ad>Ganti tulisan yang sudah saya tandai dengan ID milik kalian sendiri dan letakkan script tersebut ditempat yang kalian inginkan. Bisa diletakkan di sidebar atau body postingan.
Pemasangan Iklan MGID di Blog Non AMP
Pada blog Non AMP pemasangannya cukup mudah. Cukup letakkan script iklan MGID dibawah ini.
<!-- Composite Start -->
<div id="M346101ScriptRootC1209025">
</div>
<script src="https://jsc.mgid.com/h/e/hendrasurya.com.1209025.js" async>
</script>
<!-- Composite End -->Untuk tulisan Composite Start boleh dihapus dan silahkan ganti kode yang saya tandai dengan ID kalian.
Cara Defer Iklan MGID
Defer merupakan penundaan pemuatan (loading) dan download file javascript yang ditujukan untuk keperluan optimasi kecepatan website. Dalam kasus ini, yang kita lakukan adalah menunda file javascript eksternal dari MGID.
Pada kode js iklan MGID akan terlihat seperti ini https://jsc.mgid.com/h/e/hendrasurya.com.1209025.js. Kode tersebut berfungsi untuk memanggil konten iklan dari server MGID. Walaupun dimuat secara eksternal dari protokol situs kita. Namun hal ini akan berdampak pada menurunnya skor LCP dan FCP situs kita. Dengan demikian berarti situs kita menjadi lebih lambat untuk diakses.
Untuk mengatasi hal tersebut kita bisa menggunakan script khusus yang ditujukan untuk mendefer js tersebut agar dimuat lebih cepat. Kalian bisa mengcopy kode dibawah ini dan letakkan diatas tag </body>
<div id="M346101ScriptRootC1209025">
</div>
<script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://jsc.mgid.com/h/e/hendrasurya.com.1209025.js";d.setAttribute("crossorigin","anonymous"),document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Untuk kode yang saya tandai silahkan diganti sesuai ID javascript iklan MGID milik kalian sendiri. Dan jangan lupa tambahkan atribut preload dan crossorigin anonymous iklan MGID dibawah tag <head>
<link as='script' crossorigin='anonymous' href='https://jsc.mgid.com/h/e/hendrasurya.com.1209025.js' rel='preload'/>Oh yaa, jangan lupa juga sesuaikan conditional tag di situs kalian saat melakukan pemasangan script defer tersebut agar dapat berjalan dengan baik. Khusus untuk penggunaan pada situs AMP yang mengunakan amp-ad cukup tambahkan tambahkan atribut preload dan crossorigin anonymous saja.
Selamat mencoba.
Kesimpulan
Banyak yang berpendapat bahwa melakukan defer pada iklan akan mempengaruhi penghasilan dari iklan tersebut. Boleh dibilang pendapat ini bisa jadi benar. Tapi balik lagi pada tujuan kalian membuat blog itu untuk apa?, jualan iklan kah? atau artikel yang bermanfaat untuk dibaca pengunjung. Karena terlalu banyak menampilkan iklan justru akan mengganggu pembaca untuk menikmati apa yang kalian sajikan.
Tidak hanya itu saja, iklan juga akan memperlambat kecepatan situs kalian yang pasti akan berpengaruh pada performa SEO dan experience pengguna (UX). Jadi pintar-pintarlah menyesuaikan penempatan iklan pada tempat-tempat yang strategis tanpa menggangu pengunjung situs kalian. Untuk iklan seperti MGID ini memang belum secanggih Adsense yang mampu menampilkan iklan secara kontekstual dengan niche blog kalian.
Namun jika situs kalian belum diterima Adsense, tidak ada salahnya mencoba MGID ini untuk menambah penghasilan dan uang lelah dalam kalian menuangkan ide penulisan konten. Sebenarnya banyak publisher iklan yang mudah cara daftarnya dan kemungkinan diterima sangat besar, seperti PropellerAds dan Yllix. Dan lebih baiknya lagi silahkan riset dulu sebelum mendaftar di publisher tersebut.