How to Add Adsense In-Article Ads to Blog Posts


You can place In-article ads, a new ad format optimized by Google Adsense, between paragraphs on your blog pages.

We have previously shared a post about Adsense in-article ad insertion codes. However, I wanted to share a different ad insertion code so that blog codes and Adsense ad codes work more regularly and in harmony.

Because the changes made in blog codes do not provide an advantage for making money, on the contrary, they affect your blog and your income significantly.

Adsense In-Article Ad Creation

Sign in to your Adsense account and click on the My Ads tab in the left menu. Then click on New ad unit and select In-article ads. After setting the title, description, background colors, and font save and copy the code.

How to Add Adsense In-Article Ads to Blog Posts

Adsense in-article ads to blog posts were previously fixed either manually to all blog posts separately or inside the post with some javascript codes. Now, with the code I will share with you, you will be able to add Adsense in-article ads wherever you want in the article.

Follow the steps below to apply Adsense and Blogger compatible in-article ad insertion code to your blog.

1- Login to your Blogger account and select Theme > Open your HTML editor page by following the Edit HTML path. Find the code below using CTRL+F.

Post Body
<data:post.body/>

Your blog's template codes may contain more than one data:post.body code. So make sure you include the in-blog ad code in the right place.

Add the following CSS code to the style <style> file of your blog site to make the ad area look more organized and compatible with your blog content.

CSS
.adsense-after-break {
    margin: 1em auto;
    padding: 1em 0;
    text-align: center;
    border: 1px dashed #cecece;
    border-width: 1px 0;
}

Add the following JavaScript code one line below the code you found.

Javascript
<b:if cond='data:view.isPost'>
<script>
// <![CDATA[
var _moreElm = document.querySelector('a[name=more]');
var _adsenseCode = '<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot=" xxxxxxxxxx"></ins>';
if (_moreElm != undefined) {
    _moreElm.insertAdjacentHTML('afterend', '<div class="adsense-after-break">' + _adsenseCode + '</div>');
    (adsbygoogle = window.adsbygoogle || []).push({});
}
// ]]>
</script>
</b:if>

Add the publisher ID and advertising ID number of the In-article ad code you have created to the places of the publisher ID ca-pub-xxxxxxxxxxxxxx and the advertising ID number xxxxxxxxxx in the javascript code above.< /p>

2- Add the following javascript code in the in-article ad code you have created in your Adsense account, one line above the </body> code of your blog.

Adsense JS
<script async="async"src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Adsense JavaScript and Page Optimization

After making sure that you have done the above operations correctly, save the page.

Adding Adsense Ads to Blog Posts

3- To add the ad code to your blog posts, add the following code to the HTML part of your blog posts.

HTML name="more"
<a name='more'></a>

Be careful to add Adsense in-article ads, usually after the first paragraph. If you want to add more than one ad code, make sure there is enough content between the first ad code and the next ad code. It would be more beneficial to add only one ad code for each post on your blog pages for Adsense in-article ads.

With this code, you can add your in-article ad code under the paragraph you want. In order for the ad code to appear in your blog posts, you must add it to all your blog posts separately. Currently, the same code is used in our blog posts.

What are the Advantages of Adsense In-Article Ads?

  1. Improving user experience: In-article ads show creatives from high-quality advertisers. Ads that look pretty good to the eye and encourage clicks.
  2. More compatible with mobile devices: Full-width in-article ads are one of the best ad units for monetizing the screen space of mobile devices.
  3. Optimized by Google: In-article ads are optimized by Google to perform well on your text pages.

How are Adsense In-Article Ads Different from Standard Ads?

Different aspects of in-article ads from standard ads:

  1. Adapts to readers' experience on the page.
  2. Uses an automatic layout suitable for layout and adapts to the reader's browsing behavior on the page.
  3. High-quality advertiser creatives are used.
Enable Colored Background If Adsense Ads Are Not Appearing

Final Thought

I shared the code for adding Adsense in-article ads to Adsense and Blogger compatible blog posts. This code will help you position your blog ads better. Send us your comments and questions about this article using the comment form.

Next Post Previous Post
No Comment
Add Comment
comment url