Use Gutenberg Reusable Blocks For AdSense

If you’ve tried to use the Google AdSense automatic ad-placement on your website you’ve probably been less than happy with the result. I certainly was. Ads appeared in the middle of text flow, disrupting the reader experience and there were overall far too many ads placed.

It’s interesting that from a search results perspective Google is only interested in 1 thing. The user experience. A poor user experience will see you drop in the Google rankings quicker than any other factor. And yet, setup Google AdSense to automatically place ads will generate what I consider to be a horrible user experience. So, I turned that off and began placing code manually.

Initially I simply created a responsive advert in Google AdSense and copied the code for a sidebar widget. I added the widget to the sidebar and left it running. It worked. Sort of. The click through rate wasn’t fabulous, but it was getting the odd one or two.

Later when the site started to generate a bit more traffic (still not massive but some standards) I decided I needed some bigger adverts actually in the content. The article was around 3000 words long with pictures too so I knew the content could cope with having a couple of in article ads.

Create Reusable Block

I created a new advert on Google Ads and called it In Article Ad. Then of course I copied the ad-code. I then returned to the article I wanted to place the article in. After that I created a new Gutenberg block within the body of the article. Finally, I set this block type to be Custom HTML underneath the Formatting category of Gutenberg blocks.

Paste the Google AdSense code into that block. Then move the mouse around in the block to bring up the block border and toolbar. Click the 3 vertical dots and choose Add To Reusable Blocks.

Now you can place Google AdSense ads (or indeed any other advertising network if you use their code instead of AdSense code) anywhere within your articles that you like. And the best bit is, you’re completely in control of where that advert gets placed. Some posts will support 3 ads in the text, others will only support maybe one. You may not want any at all on some. With this method you have complete control.

Use Reusable Block In Your Post

Using the reusable block couldn’t be simpler. When you added it to Reusable Blocks you would have been asked for a bit of information about the block, most notably the name you want it to be known by. If you name it something sensible like AdSense In Article Ad Block then you’ll be able to find it easily to insert it into your posts. To add it to your post, just click the + Icon in the right place in your article and scroll the resulting popup menu to find Reusable Blocks. Under there you should find your reusable block which you can just click on and it’ll be added.

The reusable block should preview correctly too – though if Google AdSense determines there’s no advert to send you then the space will be left blank.

Modifying A Reusable Block

You can change a Reusable block by clicking the Manage All Reusable Blocks link in the popup menu when adding a reusable block to your post. You can also modify reusable blocks by clicking the 3 dots in the top right hand corner of the WordPress editor screen. You’ll find these dots next to the Publish button. Towards the bottom of the popup menu you’ll see Manage All Reusable Blocks too.

Clicking either of those options will take you to a screen that looks like a normal posts screen. I guess reusable blocks are just a custom post type. Nevertheless, choose the reusable block that you want to modify and go ahead and modify it to your hearts content.

Bear in mind, the changes will be reflected throughout your site – anywhere that you’ve selected to use a Reusable Block.

This is very powerful. If you decide to change advertising provider for example, then you only need to change ONE reusable block. All your AdSense ads will be replaced by the new advertising network provider.

If you don’t want any particular Reusable Block to be changed in the future, you can insert it as a Reusable Block and then convert it to a normal block. This is effectively a copy of the reusable block. Any future changes to the reusable block won’t be changed in this block. It’s become ‘detached’ from the source if you like.

ShortCodes and Reusable Blocks

Shortcodes run within reusable blocks with no problems provided they don’t need to inject any headers into the web page. I found that some reusable blocks didn’t work well if they relied on JavaScripts or Stylesheets being injected into the document. One potential way around this might be to use the shortcode somewhere in the page without being inside a reusable block. This would hopefully cause the javascript and stylesheet to be enqueued and subsequent reusable blocks within the page would work.

Having said that, I haven’t used any shortcodes recently where that was a problem so it’s entirely possible that WordPress have fixed it.

Other Uses For Reusable Blocks

I’ve recently also used the reusable blocks on another website to create the effect of enabling clickable buttons. Using a normal paragraph block, set the background to a colour. Put in the text you want to reuse and create a hyperlink to where-ever you need it to go. Save it as a reusable block and you’ve now got a Call To Action button you can use in any different post – or multiple places within that post.

It saves a LOT of time. And if you want to change the colours for your call to action button, it’s dead easy. Just manage the reusable block, change the paragraph background colour and all your call to actions have changed.

Reusable blocks are one of the most powerful features of Gutenberg and I wonder how many other people are actually making use of them? Let me know in the comments below!