Keep On Hacking

How To Display Google Adsense Using WordPress Widgets The Right Way?

June 30, 2017

One of my friends has a moderately big WordPress news blog and the load speed was awefully slow. He had asked me to see if I can help with loading pages faster.

One of the things I found to speed up his blog was to reduce the number of HTTP requests and by deferring Javascripts.

Google Adsense ads is his primary source of income and I was shocked by the way, he used the Google Adsense code, in his blog. I told him that there is a better way to use Google Adsense code in WordPress and here I’m writing this blog post.

If you’re likely to follow along, I assume that you already have a Google adsense account and you’re familiar with WordPress widgets.

Let us say, you have the following code from Google Adsense dashboard.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250_sidebar -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1XXXXXXXXXXXXXXX"
     data-ad-slot="4XXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

GitHub gist

The adsbygoogle.js is a common Javascript file that is required on all the pages where you want to display the ads. So this should be made to load only once on the web page.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

GitHub gist

Rather than using the <script> tag directly, we must use WordPress’s wp_enqueue_script function to include scripts on the page.

<?php

// Add the following snippet to your functions.php file.
function my_google_adsense() {
	wp_enqueue_script( 'my-google-adsense-js', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', array(), false, false );
}

add_action( 'wp_enqueue_scripts', 'my_google_adsense' );

GitHub gist

Now that we have our Google adsense javascript enqueued, we can go ahead and use the ad snippet on WordPress widgets.

If you’re using WordPress 4.8+, remember to paste the code in “Text mode” under “Text” widgets.

// Use the following code your WordPress widget
// If you're using WordPress 4.8 or 4.8+, make sure to switch to Text mode in Text widgets.
<!-- 300x250_sidebar -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1XXXXXXXXXXXXXXX"
     data-ad-slot="4XXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

google adsense wordpress text widget google adsense wordpress text code google adsense wordpress ad

GitHub gist

Tada! We have set up everything for our Adsense script to start serving ads. In addition to this, we could defer loading the script, so that we can avoid the ‘Render blocking Javascript’ issue. Google has developed an online tool - Google PageSpeed Insights that will help you identify other such issues in your website.

function add_async_attribute( $tag, $handle ) {
	if ( 'my-google-adsense-js' !== $handle) {
		return $tag;
	} else {
		return str_replace(' src', ' async="async" src', $tag);
	}
}

apply_filters( 'script_loader_tag', 'add_async_attribute' );

GitHub gist

Learn more about the differences between “defer” and “async” attributes here.


Written by Daniel who lives and works in the beautiful city of Salem training dogs. You should follow me on Twitter

© 2020, Built with ❤️+ Gatsby