Activate Google Adsense Script

Guide to installing Adsense script on themes

Tutorial ini dimuat berguna untuk menunda pemuatan script adsbygoogle.js setelah semua konten dimuat sempurna, serta agar tidak ada pengulangan penulisan script tersebut.

Anda bisa memilih untuk menerapkannya atau menggunakan cara standar yang sudah ditetapkan Google Adsense.

Mengaktifkan Script Adsense

Kami sudah menyiapkan dua pilihan cara untuk mengaktifkan script Adsense pada blog Anda, menggunakan script standar atau dengan lazyAdsense, Anda bisa memilih mana yang menguntungkan untuk blog Anda.

Kode Script Standar
  1. Pada dashboard Blogger, klik Tema
  2. klik icon pada tombol Sesuaikan
  3. pilih Edit HTML, Anda akan diarahkan kehalaman pengeditan.

Kode pertama terletak sebelum tag penutuh </head>, Anda akan menemukan kode seperti di bawah ini:

<!--[ Defer Adsense script use shinsenter/defer.js ]-->
<!--<script type='deferjs' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000' crossorigin='anonymous'/>-->

Kami menambahkan fungsi defer.js pada script di atas yang berguna untuk menunda pemuatan script setelah semua konten blog dimuat, kode di atas juga berfungsi untuk menambahkan Auto Ads pada blog Anda. Silahkan aktifkan kode tersebut dengan cara menghapus tag comment <!-- --> serta mengganti ID Adsense Anda.

Kode Script LazyAdsense

Script ini akan memuat iklan setelah user melakukan scroll pertama, kelebihan dari script ini tidak akan mempengaruhi skor Pagespeed blog.

<!--[ Lazy adsense Script with auto ads ]-->
<!--<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener('scroll', function(){if (( ... )) { (function() { var ad = ... ad.setAttribute('crossorigin','anonymous'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = ... })(); lazyadsense = true; }}, true); /*]]>*/</script>-->

Kode di atas terletak sebelum tag </body>, silahkan aktifkan dan ganti ID Adsense Anda pada script tersebut.


Menambahkan Unit Iklan

Biasanya setelah menambahkan unit iklan Anda akan mendapatkan kode seperti di bawah ini:

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Karena script Adsense adsbygoogle.js sudah diaktifkan sebelumnya, maka Anda tidak perlu lagi untuk menuliskannya di setiap unit iklan yang Anda tambahkan. Anda cukup menuliskan kode seperti di bawah ini:

<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Pengguna AMP dan Cara Mengaktifkan AMP Auto Ads

Kami sudah menambahkan script amp-ad-0.1.js pada template jadi Anda bisa langsung menambahkan iklan kedalam blog.

Untuk mengaktifkan Auto Ads Anda bisa mencari kode seperti di bawah ini dalam template, letaknya ada di bagian <head>:

<!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->

Kemudian temukan kode seperti di bawah ini lalu ganti ID Adsense yang tertera dengan milik Anda.

<!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

This tutorial is useful for delaying loading of adsbygoogle.js script after all content is loaded perfectly, and so that there's no repetition of writing the script.

You can choose to apply it or use the standard method that has been set by Google Adsense.

Activate Adsense Script

We have prepared two ways to activate the Adsense script on your blog, using a standard script or with lazyAdsense, choose which one is more profitable for your blog.

Standard Script Code
  1. On Blogger dashboard, click Themes
  2. click icon on the Customize button
  3. select Edit HTML, you will be directed to the editing page.

The first code is located before the full </head> tag, you will find code like this:

<!--[ Defer Adsense script use shinsenter/defer.js ]-->
<!--<script type='deferjs' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000' crossorigin='anonymous'/>-->

We added defer.js function to the script above which is useful for delaying script loading after all blog content is loaded, the code above also serves to add Auto Ads to your blog. Activate the code by removing the comment tag <!-- --> and changing your Adsense ID.

LazyAdsense Script Code

This script will load ads after the user make first scrolls, the advantages of this script will not affect the Pagespeed score of the blog.

<!--[ Lazy adsense Script with auto ads ]-->
<!--<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener('scroll', function(){if (( ... )) { (function() { var ad = ... ad.setAttribute('crossorigin','anonymous'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = ... })(); lazyadsense = true; }}, true); /*]]>*/</script>-->

The code above is located before the </body> tag, activate and replace your Adsense ID in the script.


Adding Ad Units

Usually after adding an ad unit you will get a code like below:

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Because adsbygoogle.js script has been activated previously, you no longer need to write it in every ad unit that you add. You just need to write code like this:

<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' data-ad-format='auto' data-full-width-responsive='true'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

AMP Users and How to Activate AMP Auto Ads

We've added amp-ad-0.1.js script to the template so you can directly add ads to your blog.

To activate Auto Ads you can search code like the one below in the template, it's located in <head> section:

<!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->

Then find the code as below and replace the Adsense ID listed with yours.

<!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->