A little bit of extra pocket money at the beginning can with some effort turn into a solid passive income. Google AdSense is one of the many platforms to monetize your site.

Turn your passion into profit.
AdSense is a free, simple way to make money online by placing ads on your website.

In Migration to Ghost I wrote about how I migrated from my previous blogging software to Ghost but I didn't mention about the Google AdSense integration. Thanks to a brief chat on Facebook I was reminded about that and the following paragraphs describe the changes I applied.

Decision on where to place AdSense

Using advertisment on your Ghost blog site can help you to earn money online. But there are some aspects to take into consideration depending on your personal interest, the nature of your website and the expected audience.

  • Showing adverts on your site might slow down loading performance
  • Should the adverts shown on your site match with your content written?
  • Where and how many adverts would you like to display on your site?
  • What are the odds that too many ads could possible scare away your readers?
  • Are you offering other services than reading content on your site?
  • etc.

My personal choice is that I wanted to display a single advert at the end of an article. Therefore, you won't find ads in any other location of this site (as of writing).

Referring back to the FB conversation, here's the actual initiator of this article:

Any specific config you did for google ads?

Well, yes. This blog is mainly based on the default Ghost theme "Casper" and I had to add the necessary code and HTML fragments into my modified theme.

Creating a partial view

Given that Ghost themes are based on Handlebars and their flexible way of working with code fragments I created a new view in the partials folder called ads-banner.hbs.
The JavaScript code has been generated by the AdSense dashboard and I simply copied it into a <section> element as part of my partial view:

<section class="ads-banner" style="justify-content:space-between;margin:0 auto;padding:1vw 0 2vw;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive - Tech -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-<your-publisher-id-here>"
     data-ad-slot="<your-ad-unit-id-here>"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>

As per Google AdSense "This ad unit can automatically adapt its size to the space available on the page." For further reference check out Google's Get started with ad code documentation online.

Having a partial view gives a better flexibility using that snippet in various ways compared to just adding it hard-coded somewhere into the template.

Referencing the partial view

As mentioned, I decided to show adverts only after the content of an article but decided to show it before the Disqus comments. Articles or better said Stories in Ghost are displayed using the post.hbs view.

        {{/author}}
    </footer>

    {{> "ads-banner"}}

    {{!--
    If you use Disqus comments, just uncomment this block.
    The only thing you need to change is "test-apkdzgmqhj" - which
    should be replaced with your own Disqus site-id.
    --}}

    <section class="post-full-comments">
        <div id="disqus_thread"></div>

In the code above I added a Partial Expression into the post view in order to embed the partial view created previously. Of course, you can decide to add as many partial expression in your posts template and other locations of your site as you like to.

For more information about Handlebars used in Ghost I recommend that you dig deeper into the Themes documentation of Ghost.

Restart Ghost service

According to the Ghost theme structure you will need to restart Ghost each time you add or remove a file from the theme directory for it to be recognised and used.

This is done on the command line using the ghost-cli command:

$ ghost restart

I case you're running multiple instances of Ghost on the same server it might be better to explicitly stop that particular Ghost instance and start it again instead of restarting all instances, like so:

$ ghost stop [name]
$ ghost start

Using AdSense and Analytics

A combination of both Google AdSense and Google Analytics is highly recommended as it helps you to get more details on the demographics and behaviour of your site visitors. This should also help you to provide more specialised and targeted campaigns on your site by eventually excluding certain topics not matching your actual content.

Keeping an eye on the bounce rates shall give you an indicator whether visitors actually navigate around your site or just interested into a single article.

My final recommendation would be: 'Less is More'.