Creating better in-text ads with jQuery

I have placed ads on my sites in various ways (and locations) now. With all those attempts, I tried to avoid overly intrusive ads and wanted to always clearly mark an ad as such. What I have currently implemented actually fulfills that nicely in my view. My ads follow these principles:

  • Ad areas are underlayed in light grey to distinguish them from content.
  • Ads are marked on top with the word “ADVERTISEMENT” (By the way: On my site I implemented that with a SVG text, not an image).
  • Most ads are in the sidebar, not in the content so that reading isn’t interrupted too badly.
  • There is only one content ad. This is usually sufficient for me, since my texts are reasonably short.

The sidebar ads can be easily placed using WordPress widgets. Where it gets trickier is with the in-content ads. Searching around the internet, I found one approach: Those can be implemented in WordPress’ PHP by cutting the content into parts and inserting ads in between those. I could implement that in my site’s template, but I didn’t like the intrusive coding.

Another possibility are Google’s Auto Ads. Google places ads based on performance and will insert ads automatically into your content. What I really didn’t like about this, however, was that I lost control about ad placement. For example, Google kept placing an ad right after my main headline. While that may have been an effective placement from a revenue perspective, I really hated the interruption in the page flow. But I do like the idea of having at least one ad in the text…

Here’s my (somewhat elegantly simple) solution: I place an ad after the article content into its own div and assign it the class .ad. Then, using jQuery (see code example below) I simply move that block into the text and after the fourth paragraph. And that’s it! A single line of code solves my problem. If an article has less than four paragraphs, the code actually does nothing and just leaves the ad where it is.

Noticed something? If everything worked correctly, there should have been an ad before this paragraph.

Adjust the code as you like for your own site. You may need to adjust the selectors a bit and you can even insert multiple ads with some minor modification.


Comments and Reactions