Inserting an Ad Unit to Hugo Content without Shortcode

Recently I just discovered that Google AdSense now have a native in-article ad unit. This is interesting because this ad unit blend well with the content but reader will still easily tell if it’s an ad. Since Google already optimize it, we as publisher won’t need to worry too much about intrusive ads in the middle of article.

So now I want to try put it in my Hugo static site. You can actually use hugo shortcode for this, there is nothing wrong with that. But writing a simple html tag is easier than writing a shortcode in the middle of article. Not to mention, your markdown file will still valid based on CommonMark spec.

Previously I’ve been making my hugo site to wrap image with figure without Shortcode and I still have similar idea to put this ad unit.

The idea is very simple, we just need to put a special tag in our articles. Hugo actually already use this idea to generate manual article summary split by adding <!--more--> tag.

Solution

First thing to do, create a partial template, let’s name it layouts/partials/adsense-inarticle.html. Use following snippet as the template content.

<!-- in-article ad -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="{{.Site.Params.Adsense.client}}"
     data-ad-slot="{{.Site.Params.Adsense.inArticleSlot}}"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Now you can see that I use two variables in the template: .Site.Params.Adsense.client and .Site.Params.Adsense.inArticleSlot. This variables’ value can be retrieved from your Google AdSense dashboard. Create a new in-article ad unit there, and copy the value of data-ad-client and data-ad-slot. Then inside config.toml, put those values under [params.adsense] like following example.

[params.adsense]
client = "ca-pub-12345"
inArticleSlot = "12345"

In your article, assuming you’re writing it in markdown format, just put an html comment with adsense word in the middle of it. This will be our special tag to display adsense in the middle of article. We’ll use hugo function to replace this tag with actual adsense code from our partial template. Here is an example on how to put the tag inside an article.

This is the first paragraph.

This is the second paragraph.

<!--adsense-->

This is the third paragraph.

Finally, to render ad unit correctly, we need to modify our single.html template. Open layouts/_default/single.html, find where you put the {{ .Content }} and replace it with following snippet.

{{ replace .Content "<!--adsense-->" (partial "adsense-inarticle.html" .) | safeHTML }}

That’s it, try to publish it and you’ll see your ad unit in the middle of article. First time user probably have to wait about 30 minutes until the ad showed up.

Conclusion

Once again, with simple trick we can modify our Hugo generated content easily. I’ll share something else about Hugo next time. It’s been fun building a site with Hugo.