How to add Ads to Hugo

So you have been blogging for a while and your website has a large number of visitors. You have been thinking about how to monetize your website and make some money from it. You have heard of Google Adsense and you want to integrate it into your website. This post will show you how to do it.

Prerequisite #

1. Have a google account.
2. Your website is running on Hugo. (Required for some small parts only)

Steps #

Creating an Adsense account #

1. Visit the Google Adsense site.
2. Select Sign in button at the top
3. Login with your google account.

Adding your website #

1. Click on Sites

   

2. Click on Add Sites

   

3. Enter the URL of your website

   

4. Copy the adsense code (We will be using this to integrate the url to Hugo)

Adding the adsense code to your hugo website #

1. Create a partial file in your hugo website. The file should be named adsense.html and should be placed in the layouts/partials folder.

   • The folder structure should be something like this

    - layouts
        - partials
            - google
                - adsense.html
   

   • The adsense.html should look something like this

   <script
     async
     src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=XXXXXXXXXXXX"
     crossorigin="anonymous"
   ></script>
   

2. Add the partial to your main page

   • Depending on the theme you will have to add it to different file.
   • As I am using the congo theme on hugo, I will have to add it to my extend-head.html file in layouts/partials folder.
   • It should look something like this inside the file

   {{ partial "google/ads" . }}
   

3. Deploy your website and you should see the ads link when you inspect element.

4. Click on request review
5. Now we just have to wait for google to approve the website for usage
   • After the checks are completed, we will be able to show ads on the website

What to do in the meantime? #

While waiting for the site to be reviewed, you can start to plan out where to show the ads and what kind of ads you would want to be displayed.

1. Click on the ads tab

2. Click on the edit button on the bottom right side of the image below.

3. On the right side, you will be able to edit and see how the ads will be displayed on your website. Play with the dials until you are satisfied with the result.

The ones shown here are mainly for auto ads. You can also add other types of ads.

4. Depending on whether you want ads to appear in between articles, you can choose to do this instead. To start lets click on the ads tab as shown in step 1 of this section

5. Select the by ads tab

   

6. You can select the ad unit that you want and select the ad that you wish to insert

   

7. Name the ad unit and create it.

8. Copy the HTML from the ad unit and paste it into the relevant sections of the hugo page that you want.
9. These are all the steps required for setting up ads on your hugo website.

After approval #

After approval by google, they will prompt you to upload an ads.txt file into the root directory of your webpage.

You will have to upload an ads.txt to the root directory of your website, (IE: https://example.com/ads.txt)

1. Download the ads.txt file from the adsense website by clicking on the fix button here

   

2. Upload the ads.txt to root directory of your website.

   1. For hugo, you just have to put the file into the /static folder for it to be reflected on the website.
   2. For other methods, you have to find a way to upload the file to the root of the website.

Conclusion #

I hope this guide was useful for those who want to learn more about setting up ads on your site.

If your website is not running on hugo, you can just copy and paste the relevant HTML code to your website directly instead of doing all the hugo partial steps present in this guide.

Links #

• Google Adsense
• Adding a site to Google adsense
• Ads.txt guide by Google