|
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- On Blogger dashboard, click Themes
- click icon on the Customize button
- 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.
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'/>-->