Friday, September 12, 2014

Blogger's Ads Location Change after Implementing Google+ Comments

For a while, I was wondering why all of a sudden my CPC disappeared. Especially with a sudden increase in traffic, I should have statistically maintained approximately the same rate. I was only getting perhaps one click to two clicks per month so I thought maybe it was a fluke.

Then I realized that in the single post view, the ad's location changed from middle of the page between comments and post to the very end of the page (after the comments). In addition, the Google+ style comments take up more space than the default blogger comments thus pushing the ads further down.

Then I started looking into how to move the ad back to being above the comments. This actually took a little longer than I expected. The code needed is in Template > Edit HTML, not under Layout. In the Edit HTML mode, there were a lot of tags to filter through so I searched for ad. After going through a few, I found this block for posts (e.g. <!-- posts -->).

Took me a couple minutes to wrap what is going on here. I saw a section that would be near the location of where the ads were (i.e. near the bottom). I thought about moving this block, <b:if cond='data:post.includeAd'>. Then noticed it has some end statements.

Seeing <data:adCode/>, I guessed this was the specific line for the ad. I moved this up between posts and comments. I included additional parameters to mimic the original location:
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>

I am not exactly sure what <data:adStart/> is supposed to end so I left that in its original location. It is odd because adEnd is above that line and when it is not the first post. Either case, I tried the code at this point and seems to have moved it to where I want it to be. Now I just have to wait and see if the clicks return to know if it worked completely.

Here is my hacked up code block I eventually ended up with:

    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>