Hugo static site access Adsense ads

calendar 2023-05-08 · 5 min read · adsense hugo  ·
Share on: linkedin copy

The static site generated by Hugo needs to be connected with Google Adsense ads, the method is as follows:

Adsense by site

Adsense ads are divided into full site ads (By site) and unit ads (By ad unit).

If you want simple access and do not customize the type of advertisement, it is recommended to access the automatic advertisement of the whole site, don't worry, completely trust Google

Adsense by site

  • Go to the Adsense background first, and copy the code for automatically displaying ads to

    /xxx/layouts/partials/google/ads.html

xxx is the root directory of your website, ads.html is the defined file name, and the automatic advertising code is pasted inside. The advantage of putting it in this path is: in case you need to change the theme one day, the file is still there and will not be affected at all. Shaped like:

1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
2      crossorigin="anonymous"></script>

According to Google's requirements, the ad code should be placed between <head></head> tags.

So it needs to be placed in the relevant place of themes, such as the skin I use (the path of each skin is not necessarily the same, you have to think about it yourself), the path is:

 xxx/themes/hugo-clarity/layouts/partials/head.html

hugo themes header

ads is the file name of ads.html above:

1<!-- ads -->
2{{ partial "google/ads" . }}

In this way, the automatic advertisement access of the whole site is completed, and Adsense will automatically handle the rest, including what kind of advertisements are displayed on which pages and where, which is still very convenient.

Adsense by ad unit

People always like to customize, By site ads and By ad unit do not conflict. It’s okay not to fully trust Google. For example, in an article you write, you think it’s very appropriate to insert an ad in position A, but not in position B. At this time, custom unit ads come in handy. At this time, Google's algorithm for automatically assigning advertisements may not work.

  • Follow Adsense guidelines to create 4 types of custom ad units

adsense unit types

  • Create one hugo shortcodes for each ad unit

    Similar to full-site automatic advertising, put the corresponding ad unit codes in the shortcodes file. Click the icon to get the unit ad code

    get unit code

    After copying, paste it into the corresponding file, as shown in the following figure:

    hugo adsense shortcodes-adsense

  • Introduce the corresponding shotcodes in the content md file

    For example, adding an ad at the beginning of an article

    md-call-header.webp

    Add an ad at the end of the article

    md-call-footer.webp

    Of course, it can also be added in the middle of the article. The suitable position of each type of ad unit is different, and the name can be chosen according to your preference.

    In this way, the custom ad unit is also set up. Maybe others have a more convenient way, and I personally think that infrequent changes are enough.

    It’s just a bit laborious to add ads one by one. Maybe this is the fun of customization. Usually, I give an adsense-header at the beginning of the article, an adsense-footer at the end, and an adsense-emb in the middle depending on the situation. No matter how many users are unhappy, Google will not agree, and the user experience must be considered.

in-feed ads

There are thresholds and special requirements for the access of custom feed ads, which must be included in the feed, which is worth talking about separately. The so-called feed flow can be simply imagined as a for loop. For example, the homepage of this site is composed of N article introduction blocks. The information flow advertisement imitates the style of your article blocks to provide a better user experience and appear naturally when users browse. It is integrated with the appearance and style of the website, very suitable for mobile devices, like the protective color and mimicry of the biological world^_^

The following describes the access process

  • First find the template where the loop is

I found it by locating the source code of the webpage and searching for css keywords. The position of the feed flow template of each hugo theme is different. The location of hugo-clarity.

xxx/themes/hugo-clarity/layouts/partials/archive.html

  • Modify the information flow template file

hugo feed 

1      {{- range $pageindex,$pagevalue := (.Paginate $pages).Pages }}
2       {{if and ($pageindex) (modBool $pageindex 3)}}
3       <!-- ads feed -->
4       {{ partial "google/adsense-feed" . }}
5       {{end}}
6       ...Omit other code blocks here
7      {{end}}

Code explanation, access to the array after range, $pageindex, $pagevalue are index, value respectively, if judges that index is true and it is true after the modulo operation of 3. Assuming that there are 10 articles on each page, feed stream advertisements will be inserted in places 3, 6, and 9. The modBool template function is also true when the index is 0, so it must be excluded, otherwise the first thing the user sees is an advertisement, how can it be disguised🥸. Of course, users can also change 3 to other numbers to see how many ads they want to display. If there are too many ads, it will affect user experience and website performance.

As for where the adsense-feed.html template file is placed, refer to the part of Adsense by site.

To sum up, the full-site automatic advertisement and custom advertisement are used in different scenarios, and they can also be used in combination, each taking its own advantages.

Lastmod： Monday, August 28, 2023

Copyright statement:

  • All content that is not sourced is original., please do not reprint without authorization (because the typesetting is often disordered after reprinting, the content is uncontrollable, and cannot be continuously updated, etc.);
  • For non-profit purposes, to deduce any content of this blog, please give the relevant webpage address of this site in the form of 'source of original text' or 'reference link' (for the convenience of readers).

See Also:

Translations: