ashaland: How to place Google AdSense ads between blog posts in TypePad

I started my TypePad blog of practical parenting tips, Parent Hacks, in December 2005, and dutifully placed a single Google AdSense skyscraper in the left sidebar, as I had seen hundreds of other bloggers do. After an unexpectedly sudden takeoff in my blog's traffic, I figured my bright future as an AdSense publisher was all but assured. I sat back and waited for my first check.

And waited. And waited.

Technorati Tags: AdSense, Blogs, Google, Typepad, Weblogs

Something wasn't right: months later, I was still making pennies a day. Although my intention was never to turn Parent Hacks into a money-making machine, I at least wanted to recoup my hosting fees. No one was clicking my measly skyscraper, and for good reason. I had ignored (indeed, had never even searched out) all the good advice out there on AdSense ad placement, which, basically, says this:

Place the ads where your readers are already looking.

Duh. It was time for an AdSense overhaul. I had to change the placement of my ads but wanted to balance this against my existing design. The last thing I wanted was to clutter the site -- or worse, obscure the site's content.

Thanks to Darren Rowse's ProBlogger, I came across this Google-produced graphic, which summed up the basics of good AdSense ad placement (the darker the color, the "hotter" the spot).

AdSense placement

Placing ads between posts seemed the ideal solution. The ads blended in nicely with the site's text while sitting squarely in the middle of the content. Simple enough.

But after every possible Google search for the terms "Adsense between blog posts in Typepad" turned up barely a hint as to how to proceed, I knew I was in for a bigger project than I had expected.

I ended up scouring blog and forum posts about Movable Type tags and tapping TypePad's gracious customer service staff. After much tinkering, a little cursing, and a few late nights, I came up with an AdSense setup I'm happy with, and, I'm pleased to report, makes 5-10 times more money per day than my solo skyscraper. I'm sure there's room for improvement, but for now, I'm giving AdSense experimentation a rest and focusing on my site's content. (I'll never get rich on AdSense, but that was never my aim.)

Here's how I set up AdSense in Parent Hacks to balance reasonable clickthrough rate with a pleasing visual aesthetic:

AdSense between blog entries on the Parent Hacks home page. (Attempt #1: A half-banner after every second post. Attempt #2 which I document here: A medium rectangle after the first post.)
A medium rectangle perched on top of the entries in the category archive pages. (Why on top and not interspersed between posts as on the home page? Read "Big Fat Caveat" below.)
A medium rectangle under the body of each permalink (individual archive) page.

In this tutorial, I explain how to insert ads between posts. If you'd like to know how I placed AdSense code into the archive and permalink templates, let me know, and I'll gladly write it up.

Before you begin

You need to be using TypePad Pro Advanced Templates so you can fiddle with TypePad tags. HTML know-how is helpful here, but not absolutely necessary if you can deal with brackets and are good at following directions.
You also need to be a member of the Google AdSense program.
You'll be doing plenty of cutting and pasting between Google and TypePad, so using a browser that supports tabs (such as Firefox) wouldn't hurt, either.

The hack in theory: Setting the lastn and offset attributes of the <MTEntries> tag

<MTEntries> is a container tag that represents the list of posts in your page. Whenever you see a list of posts in your blog, whether on the home page or an archive page, that list begins with the <MTEntries> opening tag and ends with </MTEntries> closing tag.

The key to inserting AdSense code (or anything else) between posts is to take advantage of two attributes of the <MTEntries> tag: lastn and offset. These attributes work together to control how many posts are visible inside the <MTEntries> container.

The value of lastn determines how many posts are visible. For example:

<MTEntries lastn="2">

...

</MTEntries>

specifies that this list contains the two most recent blog entries.

The offset value, when used together with lastn, enables you to change the starting point of your entry list. For example:

<MTEntries lastn="8" offset="2">

...

</MTEntries>

specifies that this list contains eight blog entries, but skips the first two entries and starts with the third.

Imagine, then, what happens when you combine the two sets of <MTEntries> containers with a bit of Google AdSense code. For example:

<MTEntries lastn="2">

...

</MTEntries>

[insert AdSense Code here]

<MTEntries lastn="8" offset="2">

...

</MTEntries>

creates a page that displays ten blog entries. Entries 1 and 2 appear at the top of the page, followed by a Google AdSense unit, followed by entries 3-10.

The <MTEntries> tag lives in the "entry-list" module included in the Main Index template. So, to change the <MTEntries> tag in your blog, you'll need to create a duplicate of the entry-list module. In the duplicate, you'll tinker with the <MTEntries> tag as I outline below, paste in your AdSense code, save the new module, and then swap out the default entry-list module for the new-and-improved module in your Main Index template. Easy! (Really.)

BIG, FAT CAVEAT: The only problem with using the lastn attribute - and it's a biggie - is that it restricts the display to entries posted within the last 30 days. If yours is a high-frequency blog, with new posts every day or two, you're fine. But if you only post once a week, which amounts to approximately four posts every 30 days, or if you want to include AdSense ads in your archive pages, your entry list won't display fully. I got around this on the Parent Hacks category archive pages by placing my AdSense unit at the top of the entry list, avoiding lastn altogether (here's an example).

Get the hack in theory? Time to apply it to your own blog.

Step 1: Decide on your layout.

Obviously, how you want your finished page to look will determine what size AdSense unit you'll use, and how you'll alter your blog's code.

My first attempt involved placing half-banners after every second blog entry. At the time, my home page contained ten entries, so I inserted a total of three half-banners, figuring that inserting more would result in diminishing returns as they'd be too far down the page to get many clicks.

I later changed the setup to a single medium rectangle after the first blog entry. The resulting code was much simpler, and the returns were similar to the first setup. In the interest of brevity, this tutorial highlights how to build the second setup (medium rectangle between first and second post), but the concept behind both layouts is the same; choose whichever suits you.

Step 2: Generate the AdSense code you'll eventually paste into your template.

1) Log into your AdSense account and generate your ad code.

I found that 234 x 60 half banners and 300 x 250 medium rectangles fit nicely into the body of the page. I recommend choosing a color scheme that blends with the text of your blog entries (a strategy most other bloggers would agree works well).

2) Copy the AdSense code and paste it into a sticky note or plain text file so you can grab it later.

Step 3: Copy the original code for the entry-list module from the TypePad documentation.

1) Open a second tab in your browser (or a new window if you're not using a tabbed browser) and go to the Advanced Templates: Template Module page in the TypePad Knowledge Base.

This page contains all the original code for the default template modules.

2) Select the contents of the entry-list box and press Command+ C (or Ctrl + C) to copy the code into your clipboard memory.

Step 4: Create a custom entry-list module.

1) Open a third browser tab and log into your TypePad account. Access your blog's design template.

[Paranoid aside: if, like me, you're nervous about working on your live template, I strongly suggest creating a copy of your current design, fiddling with the copy, and then applying the design to your blog only when you're sure it works properly. As hacks go, this one is pretty low-risk as you're working with modules, most of which have backup copies in the TypePad documentation, but still, it's a good habit to develop.]

2) In the Edit Current Design tab, click the "Create new template module" link.

3) In the Create New Template tab that appears, name the new module "entry-list-main."

You want to name the module something other than "entry-list," as the original entry-list module also appears in the Category Archive and Date-based Archive templates. The module you're creating will only appear in the Main Index Template, hence the unique name.

4) Click inside the Template Body box and then press Command + V (Ctrl + V) to paste the original entry-list code (it's still sitting in your clipboard memory, remember?).

5) Hit the Enter key a few times to insert a bit of white space beneath the code.

(This is simply a helpful visual cue -- you'll eventually paste your AdSense code into this white space).

6) Now press Command + V (Ctrl + V) again to paste a second copy of the original entry-list code directly beneath the first set.

The module should now contain two identical sets of <MTEntries> containers.

7) Click the Save button in TypePad. (I'm a compulsive saver. Humor me.)

Step 5: Alter the <MTEntries> tags in the custom entry-list-main module.

1) In the first <MTEntries> tag, set the value of the lastn attribute.

This is the number of blog entries you want to appear before your AdSense unit. In Parent Hacks, I display a single post before my AdSense unit, so my first <MTEntries> tag looks like this:

<MTEntries lastn="1"> 

...

</MTEntries>

(In English: show only the first entry)

2) In the second <MTEntries> tag, set the values of both lastn and offset.

In this case, the value of lastn is the number of blog entries you want to appear after the AdSense unit. The value of offset should take into account the lastn value of the first <MTEntries> tag. In Parent Hacks, I wanted the home page to contain a total of ten entries. Because the first entry was already visible thanks to the first <MTEntries> container, the second <MTEntries> tag looks like this:

<MTEntries lastn="9" offset="1"> 

...

</MTEntries>

(In English: show the next nine entries, starting with the second entry)

If, instead of a single AdSense unit between the first and second post, you want to insert AdSense after say, every second post, your entry-list-main module would look something like this:

<MTEntries lastn="2"> 

...

</MTEntries>

<MTEntries lastn="2" offset="2"> 

...

</MTEntries>

<MTEntries lastn="2" offset="4"> 

...

</MTEntries>

<MTEntries lastn="2" offset="6"> 

...

</MTEntries>

<MTEntries lastn="2" offset="8"> 

...

</MTEntries>

Step 6: Insert AdSense code between the <MTEntries> containers.

1) Copy and paste the AdSense code you generated in Step 1 into the white space between the <MTEntries> containers.

If you want to display a single AdSense unit (as I do on the Parent Hacks home page), you'll only need to do this once.

<MTEntries lastn="1"> 

...

</MTEntries>

[AdSense code goes here]

<MTEntries lastn="9" offset="1"> 

...

</MTEntries>

Otherwise, paste the code between each set of <MTEntries> containers.

<MTEntries lastn="2"> 

...

</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="2"> 

...

</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="4"> 

...

</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="6"> 

...

</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="8"> 

...

</MTEntries>

2) Optional: I find the ad units look nicer with a little padding underneath, so I surround each bit of AdSense code with a <div style="padding-bottom: 20px"></div>.

3) Save!

Step 7: Include the new entry-list-main module in the Main Index template.

1) In the Select Template To Edit dropdown list, select Main Index Template, and then click the Go button.

2) In the template body, scroll down to about the middle of the page until you see the following tag:

<$MTWeblogIncludeModule module="entry-list"$>

3) Change the tag as follows:

<$MTInclude module="entry-list-main"$>

That's it! Now save and publish the template (you can publish index pages only to save time), and behold your site in all its revenue-earning glory.

If you need to go back and tweak, you only need to update and republish the entry-list-main module.

Other resources you may find useful:

Best of luck as you build your blog!

If you found this tutorial helpful, please Digg it, or bookmark it to Del.icio.us. Thanks.

Comments

I too searched for information on
"placing ads btw posts" or in posts. Hope someone also explains it for blogger.com. Everyone seems to know it except me.

Posted by: Maraze | June 03, 2006 at 04:25 PM

Very nicely done, Asha!

I like the combination of conversational tone with clear instructions. Link forthcoming.

Posted by: John T Unger | June 04, 2006 at 03:45 PM

Asha, awesome!
I can't believe how easy you made it for me, a novice to HTML, to perform what I perceived to be a very intimidating task. Look at the results right here at the Alternative Medicine Blog http://cam.typepad.com/. Here you can also check out news about alternative medicine modalities. Sound, timeless health information about Complementary and Alternative Medicine, backed by scientific studies and research. Could come in handy one day instead of hauling the kids to the doctor.

Thank you very much for the clear, concise instructions. My kids could have performed these tasks.

Beste Gesundheit, Werner

Posted by: WernerAbsenger | June 07, 2006 at 03:11 PM

Thanks for the 'step by step' how to on displaying ads between posts.

This is an issue that has been on my mind for a while.

Does it work as well for Yahoo Ads and Affiliate programs Ads?

Have a good day.

Serge
Biz:
http://www.njconcierges.com
Blog:
http://www.sergetheconcierge.com

Posted by: Serge Lescouarnec | June 08, 2006 at 08:58 AM

Hi Serge,

I don't specifically know if it works for Yahoo Publisher Network as I've never used it, but I'd imagine so.

If anyone uses this tutorial in concert with YPN ads, I'd love to hear how it went.

Posted by: Asha | June 08, 2006 at 09:09 AM

Hi Asha,
This is very useful post for Typepad users. However sometimes you are not able to see your adsense ads in your browser. Here is the article on how to avoid adsense ads from disappearing.

http://www.cheapest-computer-hardware-software.com/google-adsense.html

You will find it useful.

regards

Posted by: Krishna | June 08, 2006 at 10:17 AM

Thank you very much for writing such a clean and easy to follow tutorial :) Hopefully soon I'll be making money from it and be able to buy you a beer/pop if I ever meet you!

If you want to see how I implimented it, please visit http://chicagoconventions.typepad.com

Cheers!

James Hills

Posted by: James Hills | June 08, 2006 at 11:19 AM

Asha, great article. :)

Does anyone know of a similar article for blogger.com ?

Posted by: mapwow | June 08, 2006 at 10:32 PM

Great article! But one thing:

"If you'd like to know how I placed AdSense code into the archive and permalink templates, let me know, and I'll gladly write it up."

Please, oh, please please! Even the quick and dirty, I'm having a hard time with advanced templating despite my somewhat decent knowledge of raw HTML.

I'd forever be in your debt.

Posted by: Chris | July 30, 2006 at 12:02 AM

Thanks for the article, I just started using typepad, and this will come in handy. You make it look easy :)

Posted by: Greg | August 05, 2006 at 05:19 PM

great "how to" very easy.. but when i tried, my main page disappeared, only the side bars remained, dont know what i did wrong..any ideas?

also when's the next "how to" on permalinks and category pages coming up... looking forward to it

Posted by: neophyteblogger | September 18, 2006 at 03:19 AM

thank's for your tips,
I just placed adsense code above my primary content, an for addition, you can add some picture next to adsense code, I already proved this method give me more clicks on the adds.
http://my-first-baby.blogspot.com

Posted by: darin | October 01, 2006 at 11:20 PM