Blockchain Ads on your hugo blog, powered by Ambire

Make a buck, without google adsense

 Posted on 30 Januari, 2021  |  Vuurvoske

Prerequisites

  • Have a running gitlab page (with hugo)
  • have an understanding of opensource, blockchain and adds

Introduction

Let’s be fair. I like blogging and sharingknowledge. Such is the way opensource philosophy. But alot of time and effort goes into it. So I might aswell earn a little bit on the side for my troubles. Yesterday I was looking in my bitvavo app for crypto. And noticed that adex network had gained 90% in value in one day. This made me look up what adex network is. Turns out that basically it is an opensource blockchain (it runs on the ethereum blockhain) alternative to google’s adsense. And when i read opensource, my heart starts pounding harder ;)

So here’s for all you fellow, and future bloggers a guide on know to place adex network ads on your blog. Have fun!

rebrand ambire note: Adex will rebrand to Ambire

creating an account

  1. Go to https://www.adex.network/
  2. Click on Sign up / Login
  3. Create an account ( your problably know the drill)
  4. When you have made the account make sure you click publisher

Registering your website

! please make sure you first place either (or both) the DNS record or adex.txt !

  1. On the adex network, go to your account
  2. Copy the adex account id
  3. In your blog create in your / (root) directory a directory called .well-known.
  4. In this directory create a file called adex.txt
  5. Please the following text in this file:
adex-publisher=<the-ad-ex-id-you-just-copied>
  1. Commit, upload to make sure the file can be found on your website.
  2. Go to your registrar / cloudflare website
  3. Add the following record to your DNS records:
. TXT adex-publisher=<the-ad-ex-id-you-just-copied>

the . is your root domain i.e. vuurvoske426.dev

  1. Wait at least 30mins
  2. Go to Adex Websites
  3. Click new website
  4. Add your url, i.e: https://www.vuurvoske426.dev
  5. Optional: add more sites!
  6. When your site is registered you should see it marked green

Creating an ad slot

  1. In the dashboard, click on “Ad Slots” on the left sidebar menu, then on “New Ad Slot”
  2. Fill in the name of your ad slot, its description, your publisher website’s URL and choose the size of your ad slot. You can also set a min. CPM and adjust your ‘adult ads’ preferences.
  3. Set your fallback image preferences to be displayed when no matching ads are available for this slot. note: the crop function works really neat, so just use that instead of !#$!#! around in gimp ;)
  4. Preview your ad slot settings and save.

I created a header and a footer ad, make sure you create two with different sizes (read more in chapter "Ads not showing?!")

Implementing iframes in hugo

This took me a little while to figure out, but I managed. This involves some basic understanding of html and hugo. I’ll take you through it step by step.

Please read the "rules" in regards to ads at the chaper "Ads not showing?!"

Explanation:
First we’re going to create shortcodes for the header and footer files (i choose these names, doesn’t really matter what you choose). Next in these shortcode files we will refer to the files in the partial/ directory, which contain the iframe add code. When that’s done you can place variables which will then be rendered by hugo when your website goes through the CI/CD and hugo + pages scripts

  1. In your hugo code, go to:
/themes/layouts/shortcodes
  1. Create 2 files here:
sc_ambire_add_footer.html
sc_ambire_add_header.html
  1. To the add_footer file add the following:
{{ partial "ambire_add_footer.html" . }}
  1. To the add_header file add the following line:
{{ partial "ambire_add_footer.html" . }}
  1. Go to the partials directory:
/themes/layouts/partials
  1. Create two files here:
ambire_add_footer.html
ambire_add_header.html
  1. Go to the adex website / publisher
  2. Click on the Ad Slots in the left
  3. Next to your first add click the eye
  4. Click on integration
  5. Copy the integration code (either with the copy button or by just manually copying the code in the box)
  6. Go back to the partials folder and paste the code in the corresponding file *(i.e. footer code in footer.html, well you get the point)

This is quite a long list now. So im just gonna break one sec. This was the code part. Now it’s just placing the variables in your template and posts

  1. Go to your template file:
/themes/beautifulhugo/archetypes/default.md
  1. Place the variables like in the example underneath
    (or another place which you prefer, just don’t paste it in the — hugo yaml header — section)
---
title: {{ replace (replaceRE `^\d{4}.\d{2}.\d{2}-` "$1" .Name) "-" " " | title }}
subtitle: <some subtitle which must be replaced>
date: {{ .Date }}
tags: ["example", "tag"]
draft: false
---
{.{< sc_ambire_add_header >}} #<-- remove the dot and this comment -->

## Prerequisites

# Introduction

## Documentation:
- 

{.{< sc_ambire_add_footer >}} #<-- remove the dot and this comment -->

note: the dots are in the code snippet to prevent hugo from rendering additional ads in this blog post

  1. Hopefully you’re understanding now what is being done. By placing these variables you can implement iframes in your posts.
  2. You can place thim in your older posts aswell, although this will cost you some “manual labor”.
  3. Once you have placed the tags, use the following website to push it to git:
git add . && git commit -m "omfg thank you vuurvoske426!, here is 500 ETH just to say thank you! <3" && git push -u $(git branch | head -n 1 | cut -f2 -d " ")
  1. Go to gitlab and merge your request into master to have it build and published online
  2. Tadaaaaaa!

ps: adds will not show when checking markdown preview, they have to be built by hugo during CI/CD

Ads not showing?!

Sometimes even if you have implemented an ad slot to your website, ads may not show. Here are some possible reasons why:

- First of all, you need to make sure your website is verified - you can find more information on verification on this page.
- If your website is verified, you need to make sure you comply with the current AdEx AdView Policies. If your website is not being served via HTTPS e.g. or the website URL isn't added in the ad slot, the ad slots won't work.
- Your publisher website does not adhere to our referrer policy.
- Another possible reason is that there may currently be no available campaigns matching your ad slot. Multiple factors would affect this: ad size, minimum CPM you specified when creating the ad slot, targeting etc. There may be times when there will be no demand for your specific ad slot. 
- You can also only display 2 ads per page and they both have to be a different size, for example, you can have 1 banner which is 728x90 and another one which is 250x300 but you can’t have two ad slots that are both 250x300.
- It is also possible that ads won't show on every page refresh. As part of our recent policies, an ad will not show again if you refresh the page within 10 seconds of seeing an ad.

Documentation:

addex  opensource  ads  hugo  blockchain  ambire