How to use Jekyll like a pro : Place Adsense ads on posts

In this short post i'll show you how you can place or put Adsense Ads or Ads for any other advertising network,if you prefer,inside your posts. Ad placement is a very important factor if you want to maximize your earning.By experience from many professional publishers out there, placing Ads on content area or inside posts content contribute to a noticeable increase in earning .So if you prefer to put your ads on your post content this is how you can do it.

We need to create a Jekyll Liquid tag and then use it wherever you want to place an Ad when writing your post

{% place_ads %}

The code of this tag is inspired from this gist{:rel="nofollow"} by Sverrir Sigmundarson

So lets start by creating a simple Liquid tag

Create or navigate into your Jekyll website _plugins folder then create a new Ruby file .lets name place-ads.rb

Next just paste the following code

module Jekyll class PlaceAds < Liquid::Tag

  def initialize(tag_name, text, tokens)
    super
    @text = text
  end

  def render(context)
    "#{@text}"
  end
end

end

Liquid::Template.registertag('placeads', Jekyll::PlaceAds)

This tag doesn't do anythong for now .All you need to do is modifying the render method to return your ads code

module Jekyll class PlaceAds < Liquid::Tag

  def initialize(tag_name, text, tokens)
    super
    @text = text
  end

  def render(context)
    "<div>
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxx" data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>"
  end
end

end Liquid::Template.registertag('placeads', Jekyll::PlaceAds)

You can apply your own CSS styles to the DIV so your ad will be nicely positionned,relatively to your content.

Conclusion

That's it ! you should be able now to place ads wherever you want inside your post content by just using the tag

{% palce_ads %}

References

Jekyll tags{:rel="nofollow"}

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status