Please make sure to visit Your AdSense Page where you can find personalized information about your account to help you succeed with AdSense.

/adsense/community?hl=en
/adsense/community?hl=en
11/24/14
Original Poster
Ming Ly

Can I reposition AdSense ads with Javascript (for responsive purposes)?

I have a responsive blog where ads are displayed in the sidebar. On mobile devices however, the sidebar is pushed below the posts.
 
So what I'd like to do is reposition the ads and insert them into the post on mobile devices (see attached image).
 
I do this using javascript:
 
------------------------------------------------------
<div id="main">
<div id="article">
<div class="post">
<p class="intro"></p>
<p class="text"></p>
</div>
</div>
<div id="sidebar">
<div class="adbox-1"></div>
</div>
</div>
 
<script>
jQuery(document).ready(function(){
 
// AD REPOSITION
if ($(window).width() < 769) {
$('.ad-box1').insertAfter($('.intro'));
}
});
</script>
---------------------------------------------------------
 
The ads are always loaded in the sidebar, but if the screen width is below 768px, they will be moved somewhere else.
 
I wonder if this would violate AdSense terms of service?
Community content may not be verified or up-to-date. Learn more.
Recommended Answer
Was this answer helpful?
How can we improve it?
All Replies (5)
Syhussaini
11/26/14
Syhussaini
You should be good to go until you manipulate the basic code of adsense and keep the maximum ads allowed.
 
Hope this helps.
 
 
Regards,
Syed H
galeksic
11/27/14
galeksic
We are having a little discussion about this on StackExchange:

And I said:

if you would be allowed to move parsed AdSense advertisement, what could stop you to reuse it once again, or few, or several times, maybe even on another pages? That parsed ad have many parameters attached, like timestamp, coordinates on the page, etc. so I believe moving would make it invalid.

And:

even the original AdSense code with media queries won't "move" already rendered (existing) advertisement from sidebar into the post: it will request another ad from the post, for the post

But I can't provide source (and to be honest, I'm not sure AdSense Help Center will ever say .insertAfter() is allowed or not).

@Ming Ly - Please confirm - do you want me to escalate this thread and try to get answer from AdSense Pros?

@Syhussaini

You should be good to go until you manipulate the basic code of adsense and keep the maximum ads allowed.

I think we should be careful with answers and note .insertAfter() is taking code produced by "basic" code, and moving it to another position, which is a manipulation and (obviously) not original behavior of an AdSense ad.
galeksic
11/27/14
galeksic
Well, I did it again (I made one complicated thread even more complicated with my response)...

Because my arguments are not fully valid - in the meantime (after I saw this comment by nunorbatista) I realized in this case ad won't actually be parsed at position A, and then moved at position B with .insertAfter().

So I have to change opinion from "not allowed" to "I don't know":
And you already have available another, officially supported solution: CSS media queries.
11/28/14
Original Poster
Ming Ly
What if I placed .insertAfter() before the Google AdSense script? Shouldn't be any rules on how I modify my site structure if the AdSense hasn't beed loaded/doesn't exist yet.
galeksic
11/28/14
galeksic
You are free to modify you site structure as long as the original behavior and functionality of the AdSense advertisement is preserved.

As I already said, I think I made little misunderstanding here, so let we just start from the beginning, and just to see if that would be of any help.

This is the position we want:

<p class="intro"></p>
<p class="text"></p>

And I would temporarily change that to this:

<p class="intro"></p>
<p style="background:black; color:yellow;font-size:10px;">Placeholder (intro / text)</p>
<p class="text"></p>

On your home page, you have probably ten articles listed. And if there are ten placeholders, that means we can't put AdSense ad instead of placeholder, and we need to find out how to put ad only on "inside" pages.

And I'd try this (this blog is on Tumblr, https://www.tumblr.com/docs/en/custom_themes):

<p class="intro"></p>
{block:PermalinkPage}
<p style="background:black; color:yellow;font-size:10px;">Placeholder - permalink page (intro / text)</p>{/block:PermalinkPage}
<p class="text"></p>

If that works, and if that shows placeholder only on "inner" pages (and it doesn't show ten placeholders on front page, nor on archive pages, nor on any page, etc.), that is great and we can use that position for AdSense ad.

And that means we could use this method:

And it would look like this:

<div id="main">
   
<div id="article">
       
<div class="post">
           
<p class="intro"></p>
            {block:PermalinkPage}
               
<style>
               
.article-ad { display: inline-block; width: 320px; height: 50px; }
               
@media(min-width: 500px) { .article-ad { width: 336px; height: 280px; } }
               
@media(min-width: 801px) { .article-ad { display: none; } }
               
</style>
               
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
               
<!-- Article ad -->
               
<ins class="adsbygoogle article-ad"
                   
data-ad-client="ca-pub-123"
                   
data-ad-slot="789"></ins>
               
<script>
               
(adsbygoogle = window.adsbygoogle || []).push({});
               
</script>
            {/block:PermalinkPage}
           
<p class="text"></p>
       
</div>
   
</div>
   
<div id="sidebar">
       
<div class="adbox-1">
           
<style>
           
.sidebar-ad { display: inline-block; width: 300px; height: 250px; }
           
@media(max-width: 800px) { .sidebar-ad { display: none; } }
           
</style>
           
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
           
<!-- Sidebar ad -->
           
<ins class="adsbygoogle sidebar-ad"
               
data-ad-client="ca-pub-123"
               
data-ad-slot="456"></ins>
           
<script>
           
(adsbygoogle = window.adsbygoogle || []).push({});
           
</script>
       
</div>
   
</div>    
</div>

Of course you'll need to replace publisher and ad slot IDs, you must use responsive ad units (create new if existing are not responsive), and you could adjust breakpoints to match your template layout.
 
This question is locked and replying has been disabled. Still have questions? Ask the Help Community.

Badges

Some community members might have badges that indicate their identity or level of participation in a community.

 
Google Employee — Google product team members and community managers
 
Community Specialist — Google partners who help ensure the quality of community content
 
Platinum Product Expert — Community members with advanced product knowledge who help other Google users and Product Experts
 
Gold Product Expert — Community members with in-depth product knowledge who help other Google users by answering questions
 
Silver Product Expert — Community members with intermediate product knowledge who help other Google users by answering questions
 
Product Expert Alumni — Former Product Experts who are no longer members of the program
Community content may not be verified or up-to-date. Learn more.

Levels

Member levels indicate a user's level of participation in a forum. The greater the participation, the higher the level. Everyone starts at level 1 and can rise to level 10. These activities can increase your level in a forum:

  • Post an answer.
  • Having your answer selected as the best answer.
  • Having your post rated as helpful.
  • Vote up a post.
  • Correctly mark a topic or post as abuse.

Having a post marked and removed as abuse will slow a user's advance in levels.

View profile in forum?

To view this member's profile, you need to leave the current Help page.

Report abuse in forum?

This comment originated in the Google Product Forum. To report abuse, you need to leave the current Help page.

Reply in forum?

This comment originated in the Google Product Forum. To reply, you need to leave the current Help page.

false
Search
Clear search
Close search
Google apps
Main menu
Search Help Center
true
157
false