Adding Google Ads to Sphinx#

Following my recent adjustments to my blog, I wanted to give it another chance, and some people may not like it, but I’m putting up Google Ads and seeing if this can generate some income now that many of us use blockers (yes, even me). I’ll tell you how to configure it through modifying the default templates.

Assets Directory#

We need to configure directories of general files that will be at the root level of deployment and template directories, in order to ensure that the directory does not have a problematic _ prefix on GitHub Pages and be aware of the value rather than taking the default value.

html_extra_path = ['files']
templates_path = ['templates']

We create the directories {file}filesandtemplates if they haven’t been created yet.

Ads File#

A first step to include Google Ads is to include our publisher validation and this can be done by including scripts or an ad ads.txt file. It’s recommended to use the latter option to reduce script load, and it’s also preferred by Google for ad validation, especially when there are multiple providers involved.

This file needs to be at the root of our site, so we’ll make sure it’s available in the files directory, which is meant for this type of files.

Once we have approval, we’ll proceed with the script.

Script in Head#

Inside templates, we need to create a new file that will be used to modify the default behavior of the layout.html template, which is the template used by Sphinx and contains what is added between the opening and closing tags of head.

We create the file with the same name as the template we want to replace, and on its first line, it indicates that it extends that template.

We now use the associated block for extrahead to add the Google Ads script that requires it to be in the head.

For my case, it would look like this (you should change it according to your Google Adsense section).

{% extends "!layout.html" %}

{{ super() }}

{% block extrahead %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0356238418278924"
    crossorigin="anonymous"></script>
{% endblock %}

A few minutes (or hours) later, we’ll have the display of ads on our site generated with Sphinx.

Ads display on site generated with Sphinx.

Ads display on site generated with Sphinx.#

Referencias#