Wednesday, September 13, 2017

How To Add AdSense In-Feed Ads To Blogger?

How To Add AdSense In-Feed Ads To Blogger?

Link to My Blogger Tricks

How To Add AdSense In-Feed Ads To Blogger?

Posted: 12 Sep 2017 03:36 PM PDT

This tutorial will guide you with how to create Native In-feed Ad units in blogger and where to paste the In-feed ad unit code in a blogspot template to monetize your homepage and label pages.

how to add adsense in-feed ads to blogger blogs

Native In-feed ads are a new ad format that you can place inside your blogspot feed (i.e. homepage and label pages) to increase your AdSense earnings without effecting the user experience.

In-feed ads are called "native" because you can customize them easily to match the look (UI) of your blog content.

Lets learn how to add AdSense ads between posts in blogger!

What Does "Feed" Refers To In In-feed Ads?

Most publishers are confused with the word "Feed" in this newly introduced native In-Feed ads. It surely does not refer to a web syndication feed such as RSS Feeds or JSON Feeds.

blog feed in blogspot

Feed simply refers to the stream of content on your site that a user can scroll through. A blog feed is the list of items or blog posts which repeats itself one after another on homepage or category page.

The news feed on your Facebook account shows you the list of latest updates from your friends and family. Similarly the blog feed inside a blog shows the latest blog posts published on a specific category.

Best Layout Format For In-feed Ads

To decide which layout performs better on your web page, make sure to choose one that matches the look and feel of your site.

There are currently four different Layout types for In-Feed Ads:

1. Image Above

If your blog feed shows featured image on top followed by post title and post description or summary then choose this layout type for your in-feed ad unit.

image above in-feed ad

2. Image on the Side

If in case your blog feed shows featured images aligned to the left side of the content, then go for this layout.

image on the side in-feed ad

3. Title Above

If your blog feed shows headline at top of featured thumbnail and description snippet then go for "Title Above" layout.

title above  in-feed ad

4. Text Only

If you are too worried about your blog speed and you display only text on homepage and category pages instead of featured thumbnails then this ad layout best suits you.

text only  in-feed ad

Depending on the layout of a site, content listings inside a blog feed can be shown vertically, horizontally or even inside a grid layout.

Following is an example of In-feed ad on a blogspot feed page:

  in-feed ad on a blogspot blog

 

Following is an example of Text-only In-feed Ad on a mobile screen.

text only  in-feed ad unit in mobile

Example of Image Above In-feed Ad on a mobile device:

image above in-feed ad unit example

 

What are the Advantages of Using In-feed ads?

The major advantages of using In-feed ads are the following:

  1. Monetize new ad spaces: You can now show user friendly ads inside your blog feed on homepage and category pages. In-feed ads between your blog posts on index pages can surely drive you more clicks and ad impressions.
  2. Offers better user experience: They look identical to your content and blend perfectly to your layout design, thus engaging your visitors more without destroying the look and feel of your site.
  3. Increases mobile ad revenue: Due to their fluid layout, in-feed ads fit perfectly in small screen sizes thus bringing you more ad clicks on new ad spaces. Since they blend to your layout better compared to other ad units, In-feed ads could bless you with high CTR in mobile screens.

How To Create a Native In-feed Ad Unit in AdSense?

To start showing In-feed Ad units inside blogspot feed, you will first need to create this new ad unit inside your AdSense account.

Follow these easy steps:

  1. Sign in to your AdSense account.
  2. Click My ads.
  3. Click +New ad unit.
  4. Select In-feed ads. create in-feed ad unit in adsense
  5. Select a layout (out of the four available) that best matches your blog's feed layout.
  6. Give your In-feed ad unit a name so that you could track its performance later using this name/ID.
  7. Customize your In-feed Ad unit by changing the settings for font, border color, background color, Image alignment, headline position, description style, URL, button etc. Full details on this page

     how to customize in-feed ad unit

  8. Save and get code!

Now proceed to your blogger dashboard and follow the instructions discussed below.

How To Add In-Feed Ad units Between Blogger Posts?

You can easily paste the In-feed ad code in a blogger theme to show native ads between any two blog posts.

Feed inside blogspot blogs is shown only on index pages, which includes all your archive pages, category/label pages and the homepage.

To start showing In-feed Ads on a blogspot blog, follow these easy steps:

Note:This method works only for blogspot Simple themes or older which fall under the category of version 1. This method will not work for latest blogspot themes which are version = '2' and are called Contempo, Soho, Emporio, Notable themes.

Blogger has removed the b:loop tag from version 2 and uses server side scripting to populate the feed list.

You can hire our services if you want to show in-feed ads in latest blogger themes.

  1. Go To Blogger > Theme > Backup your Theme
  2. Click Edit HTML
  3. Search inside the editor (press Ctrl + F) the following code:

     paste in-feed ad unit code in blogspot template


    id='Blog1'

    or something similar to this code:

    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
  4. Collapse the <b:widget-settings> tag
  5. Scroll down to this code <b:loop values='data:posts' var='post'>
  6. Replace it with this code :

    <b:loop index='count' values='data:posts' var='post'>

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:count==1'>
    <div class='ad-label'>Advertisement</div>
    <div class='post henry'>
    PASTE ADSENSE CODE HERE
    </div>
    </b:if>

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:count==2'>
    <div class='ad-label'>Advertisement</div>
    <div class='post henry'>
    PASTE ADSENSE CODE HERE
    </div>
    </b:if>
    </b:if>

    <style>.ad-label {text-transform: uppercase;padding: 5px 0;color: #cccccc;font-size: 16px;text-align: center;margin: 0;display:none;}</style>

    </b:if>

  7. Replace "PASTE ADSENSE CODE HERE" with  your In-Feed Ad unit code provided by AdSense.  
  8. Save your theme and you are all done!

The above code will now start showing a single In-feed ad on your homepage and two In-feed ad units on your label pages and archive pages.

  • count==1 : The first ad will be displayed right after the first blog post on your blog feed.
  • count==2 : The second ad will inserted right after the second blog post container.

Customize In-Feed Ad Units in Blogspot

By default the native In-feed ad unit will show once on the homepage and twice on the label/category pages. If you want to change the number of times, In-feed ad is shown on your blogspot blog than kindly follow these easy tips:

  • To show In-feed ad after your desired post in blogspot feed, simply change the integer value in count==x
  • For example if you wish to show adsense ad right after the second and third blog post. Then simply replace count==1 with count==2 and count==2 with count==3

Do Not Format Content to Mimic In-feed Ads!

Although AdSense has given you a free hand to insert in-feed ad units inside your blog feed but publishers are not allowed to format the in-feed ad unit in a manner that it may look exactly similar to your blog content. You must keep some difference between your content and in-feed ads, in order to avoid accidental clicks which are against AdSense policy. 

FORMAT MIMICKING: Publishers may not implement Google ads in a manner that disguises the ads in any way. For instance, publishers may not format neighboring content to look similar to the ads, or make ads look like games or forum posts.

So far I have not received any warning from AdSense they way I have adopted in-feed ads on this site but one of my clients did receive a warning email from AdSense that read:

"Google AdSense: Action required to comply with AdSense program policies."

I know that really sounds terrifying, therefore to be on a safe side. I have also designed an Advertisement label that will always stick to the top of In-feed Ad units to inform the readers that they are viewing an Advertisement.

This will neither effect your user flow nor cause too much damage to your ad look and feel.

If in case you are sure that your ad looks different from your content like it does on MBT then you can surely remove that ad label by deleting the following code from the code I share above.

<div class='ad-label'>Advertisement</div>

 

How To Track the performance of In-feed ad units in AdSense?

You can easily keep an eye on how your In-feed ad units are performing by viewing your Ad units report:

in-feed ad earnings

  1. Sign in to your AdSense Account
  2. Visit Performance reports page.
  3. Click the Common Reports > Ad units .
  4. Select your In-feed ad units.
  5. See the ad impressions and clicks it has made you over last 7 days.

You can then compare the in-depth data report of ad impressions and ad clicks with other ad units to see how it is performing.

Start Showing In-feed Ads Between Blogger Posts!

If you need any further help on how to add these native In-feed ads between posts in blogspot blogs then feel free to leave your queries in the comment box below.

In my next tutorial I will guide you, how to setup In-Article ad units in blogger and how to put these AdSense ads in the middle of blogger posts. 

If in case you have missed our tutorial on how to add matched content units in Blogger then do give it a read out!

Stay tuned for a lot of more exciting tutorials! =)