We're going to be adding in a new advertising zone on the site powered by Google AdSense. We did remove a BuySellAds zone a bit ago, so it's not like we're just trying to dump on new ads until the users can't take it anymore, we try and balance being tasteful and the need for the site to generate an income.

The reason we are going to try Google AdSense is because of the amount of international (and non-English as a primary language) traffic. Ads in a non-native language are next to useless. Because Google shows ads dynamically, they can show native language ads to those people. Also, in a quick test a while ago an AdSense I had a zone fairly low on the page do pretty well. Ultimately I had to remove it because the zone was in a fluid width container and occasionally cut off content since AdSense cannot be resized.

The placement in this new design is going to be "After Title and Before Content" style - a zone known to do particularly well. We're going to make it 200x200px and float it to the right in single blog posts. The main content area will always be wider than 200x200px so we don't need to resize this chunk, it can always be staticly sized.

We go through the ad creation process in Google AdSense and pick all the options we need to. Ultimately it gives us some code we can copy and paste and put into our template where we want the ad to show up.

We finish up by thinking about how it works in a responsive environment a little bit, thinking about how we want the ad to load, and the minimum earnings for the ad in where we'll decide to keep it.

Comments

  1. joe@dev-hq.net
    Permalink to comment#

    Careful with the figures on display there – I think Google could suspend your account for showing those some of them (I might be wrong, but I seem to remember showing per-channel earnings being against the ToS). Just thought I should let you know.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.