Ditulis oleh: Ditulis pada: 1/04/2020
Cara Agar Iklan MGID Tidak Memberatkan Loading Blog - MGID adalah salah satu jaringan periklanan yang juga bisa menjadi sumber pendapatan bagi blogger sebagai publisher seperti halnya Adsense.
Dan kabar baiknya, iklan MGID ini bisa disandingkan dengan iklan Adsense. Iklan MGID merupakan iklan native seperti unit iklan matched content Adsense dan sudah mendukung bahasa Indonesia.
Sama seperti halnya pada histats, iklan MGID juga mengganggu atau menambah loading blog meskipun js-nya sudah asynchronous. Tapi jangan khawatir, setelah saya coba ternyata iklan MGID juga bisa diakali dengan defer seperti histats sehingga tidak mengganggu loading blog.
Untuk itu, bagi Anda yang menjadi publisher MGID kini saya akan memberikan trik cara memasang kode iklan MGID agar tidak memberatkan loading blog, jika Anda memang peduli dengan kecepatan loading blog.
Biasanya kode iklan MGID seperti berikut ini sebagai contohnya.
<!-- Composite Start -->
<div id="M517355ScriptRootC778521">
<div id="M517355PreloadC778521"> Loading...
</div>
</div>
<script>
(function () { var script = document.createElement('script'); script.src = "//jsc.mgid.com/b/l/bloggue.web.id.778521.js?t=" + ((d = new Date()) ? '' + d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDate() + d.getUTCHours() : ''); script.async = true; document.body.appendChild(script); })();
</script>
<!-- Composite End -->Silahkan copy script yang saya tandai itu lalu simpan kode tersebut di notepad lalu simpan sebagai file js, misal disimpan sebagai kode-mgid.js dan hosting di Github.
Kemudian ganti kode iklan MGID menjadi seperti berikut ini sebagai contohnya.
<div id="M517355ScriptRootC778521">
<div id="M517355PreloadC778521">
Loading... </div>
</div>
<script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING kode-mgid.js SIMPAN DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Dan simpan kode berikut di bawah kode <meta charset='utf-8'/>
<link as='script' href='URL HOSTING kode-mgid.js SIMPAN DI SINI' rel='preload'/>Ganti kode URL HOSTING kode-mgid.js SIMPAN DI SINI dengan URL hosting kode-mgid.js Anda tadi.
Lakukan hal yang sama pada unit iklan lainnya jika Anda memasang iklan MGID lebih dari 1 unit. Pastikan nama js yang dihosting di Github berbeda satu sama lainnya, misal kode-mgid2.js untuk iklan kedua dan seterusnya.
Atau jika Anda ingin iklan MGID ini benar-benar tidak mengganggu loading blog, maka kita bisa menggunakan kode seperti trik lazyload Adsense. Silahkan ganti kode iklan MGID menjadi seperti berikut ini sebagai contohnya.
<div id='M517355ScriptRootC778521'>
<div id='M517355PreloadC778521'>
Loading... </div>
</div>
<script>
//<![CDATA[
var lazymgid = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazymgid === false) || (document.body.scrollTop != 0 && lazymgid === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'URL HOSTING kode-mgid.js SIMPAN DI SINI'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazymgid = true;
}
}, true);
//]]>
</script>Jika menggunakan trik lazyload ini, maka kita tidak perlu menyimpan kode yang di bawah kode <meta charset='utf-8'/>.
Untuk unit iklan kedua dan selanjutnya jika Anda memasang iklan MGID lebih dari 1 unit. Pastikan nama js yang dihosting di Github berbeda satu sama lainnya, misal kode-mgid2.js untuk iklan kedua dan seterusnya. Juga pastikan kode lazymgid seperti yang saya tandai di atas dibedakan, misalnya jadi lazymgid2, dan seterusnya seperti contoh berikut ini.
<div id='M517355ScriptRootC778535'>
<div id='M517355PreloadC778535'>
Loading... </div>
</div>
<script>
//<![CDATA[
var lazymgid2 = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazymgid2 === false) || (document.body.scrollTop != 0 && lazymgid2 === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'URL HOSTING kode-mgid.js SIMPAN DI SINI'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazymgid2 = true;
}
}, true);
//]]>
</script>Atau Anda juga bisa tanpa harus menghostingnya di Github untuk trik lazyload ini. Perhatikan kode iklan MGID berikut:
<!-- Composite Start -->
<div id="M517355ScriptRootC778521">
<div id="M517355PreloadC778521"> Loading...
</div>
</div>
<script>
(function () { var script = document.createElement('script'); script.src = "//jsc.mgid.com/b/l/bloggue.web.id.778521.js?t=" + ((d = new Date()) ? '' + d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDate() + d.getUTCHours() : ''); script.async = true; document.body.appendChild(script); })();
</script>
<!-- Composite End -->Kemudian ganti kode iklan MGID menjadi seperti berikut ini sebagai contohnya. Untuk kode script yang ditandai pada kode di atas silahkan simpan seperti kode script yang ditandai di kode di bawah ini.
<div id="M517355ScriptRootC778521">
<div id="M517355PreloadC778521">
Loading... </div>
</div>
<script>
//<![CDATA[
var lazymgid = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazymgid === false) || (document.body.scrollTop != 0 && lazymgid === false)) {
(function () { var script = document.createElement('script'); script.src = "//jsc.mgid.com/b/l/bloggue.web.id.778521.js?t=" + ((d = new Date()) ? '' + d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDate() + d.getUTCHours() : ''); script.async = true; document.body.appendChild(script); })();
lazymgid = true;
}
}, true);
//]]>
</script>Oh iya, untuk pengguna AMP, kini iklan MGID sudah mendukung AMP juga dengan <amp-ad>.
UPDATE: Saat ini kode iklan MGID menjadi lebih simple seperti berikut ini:
<!-- Composite Start -->
<div id="M517355ScriptRootC778521">
</div>
<script src="https://jsc.mgid.com/b/l/bloggue.web.id.778521.js" async></script>
<!-- Composite End -->Kode yang saya tandai merupakan kode yang dibutuhkan di langkah berikutnya.
Jadi untuk kode lazyload iklan MGID menjadi seperti berikut, jadi tidak perlu lagi hosting script iklan, tinggal gunakan JS yang sudah ada seperti yang saya tandai di atas.
<!-- Composite Start -->
<div id="ID IKLAN MGID">
</div>
<script>
//<![CDATA[
var lazymgid = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazymgid === false) || (document.body.scrollTop != 0 && lazymgid === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'JS IKLAN MGID'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazymgid = true;
}
}, true);
//]]>
</script>
<!-- Composite End -->Jika ingin menggunakan trik defer iklan MGID terbaru 2021, silahkan ikuti postingan defer JS iklan MGID.
Selamat mencoba dan semoga bermanfaat.