possible problems when re-locating ad banner in dom by javascript?

Question

Hello :)

I am designing a layout that looks like:

== header ==
== ad banner ==
== content ==
== footer ==

however the source code order is:

== content ==
== header ==
== footer ==
== ad banner ==

the idea and goal of all that is

• load ad code in the very end so that the page doesnt get slowed down by external loaded javascripts

• seo optimize the website due to SOC

so i did the header positioned absolute and the content with a margin-top to make room for the header. that works fine so i did the same with the ad banner.

looked good but the problem is: when someone view the page with adblock enabled or the ad doesnt load (maby because theres is currently no capaign running) there is a huge ugly gap.

so i just added a function to window.onload where i re-order the source using javascript

(pseudocode: overallcontainer.insertbefore(content.firstchild,adbanner) )

in addition i do a check on the offsetheight of the ad banner div and set some padding according to it.

this works great, but my worries are that it may give problems with some ad providers.

• may there be conflicts with usage policies etc?
• may some ads stop working?
• is there a better way? how would you do it?

most providers state in their terms of service that you must not modify their code, which i clearly dont. but i mess around with the stuff around it.

Answer 1

one solution that came to my mind would be to keep the content positioned absolute, and decrese the margin-top if the offset height of the ad-div is zero (or < expeced banner height)... however this would cause the content to move up a lil bit after page load which looks weird. the javascript solution has similar behaviour because the content moves down and the banner appears, but thats okay and may even increase banner clickrate... of course the best would be to have nothing moving around but i think this is only possible if the banner is in its final source order position already before onload...