Page 1 of 1

Yuk...floating web adverts

Posted: Fri Jun 02, 2006 6:38 am
by Skittlewidth
A client of ours has gone on a marketing course and has come back thinking he knows everything and is now set to destroy his recently rebuilt website with his insistance on a dhtml "pop-up" (not a true pop up window) that swoops onto his homepage with some cheesy message or other.:evil:

Now since I have a moral objection to such tackiness on a website I've never created one before, and as a result don't know how. I've tried a few free scripts but the only way I've got them to work without breaking my css layouts or doing something unexpected is to place them at the top of the html document before any other content. I find this unacceptable on a home page as this means it is the first thing to be indexed by search engines.

My next problem is that many of them require the body onload()/window.onload() event. This website runs off a single index.php page with the appropriate sections loading in from a website depending on the query string. That means that the swoopy advert would reload everytime the user navigated to a new page.

I would need to set a session variable or something when the user clicks the close icon on this floaty div, so that the ad would not run again, but given that the close action will probably be carried out by javascript, I'm not entirely sure how to perform this.

Anyone got any experience with these things, or know how these sites with transparent flash ads, dhtml ads etc actually implement them without breaking their layouts?

Posted: Fri Jun 02, 2006 7:52 am
by Chris Corbyn
If you give the floating div a position:absolute attribute and zet the z-index higher than the rest of the content it shouldn't touch your layout.

Getting the DIV to move around the screen is a tricky (ish) one.

Code: Select all

<script type="text/javascript">
<!--

var ad;

function showAd()
{
    //Create the node
    ad = document.createElement('div');
    //style it
    ad.style.height = '100px';
    ad.style.width= '200px';
    ad.style.border = '1px solid #aaaaaa';
    ad.style.fontWeight = 'bold';
    ad.style.backgroundColor = '#ffffff';
    ad.style.position = 'absolute';
    ad.style.zIndex = 2;
    ad.style.top = '100px';
    ad.style.left = '200px';
    ad.innerHTML = '<strong><a href="somewhere">Buy this rubbish now!!</a></strong>';
    
    //Make a button to close it
    var closeButton = document.createElement('span');
    closeButton.style.color = 'red';
    closeButton.style.fontWeight = 'bold';
    closeButton.innerHTML = '[ Close ]';

    //Make the close button do something
    if (document.captureEvents) document.captureEvents(CLICK);
    closeButton.onclick = closeAd;

    //add the close button to the ad
    ad.appendChild(closeButton);
    
    //add the ad to the page
    document.getElementById('main_content').appendChild(ad);
}

function closeAd()
{
    try {
        document.getElementById('main_content').removeChild(ad);
        return true;
    } catch (e) {
        return false;
    }
}

// -->
</script>

.....


<body onload="showAd();">

<div id="main_content">

.....
Un tested - doesn't move. To make it move you need to also do a window.onscroll = moveDiv; function ;)

Posted: Fri Jun 02, 2006 7:56 am
by Chris Corbyn
As for the fact it's all in the single index.php just have the page controller handle what javascript events should be attached to each page ;) It already determines what content goes on the page so getting ti to determine other things should be easy :)

Re: Yuk...floating web adverts

Posted: Fri Jun 02, 2006 8:20 am
by Roja
The best cure for (your clients) ignorance is education.
Skittlewidth wrote:I've tried a few free scripts but the only way I've got them to work without breaking my css layouts or doing something unexpected is to place them at the top of the html document before any other content. I find this unacceptable on a home page as this means it is the first thing to be indexed by search engines.
Great. Thats example one. "One way we can do this, is to have it at the top of the document, which will ruin your search engine ranking". Then demo it doing what he wanted, and show him the code, so he can see that the DHTML popup will be first, and thus, ruin his SE rating.
Skittlewidth wrote:That means that the swoopy advert would reload everytime the user navigated to a new page.
Great! Thats example two. "Another way involves us putting it on the onload event. as you can see, if we do that, every page I go to ends up with the advertisement loading."
Skittlewidth wrote:I would need to set a session variable or something when the user clicks the close icon on this floaty div, so that the ad would not run again, but given that the close action will probably be carried out by javascript, I'm not entirely sure how to perform this.
Fantastic! "We've worked hard to find a solution that doesnt show the ad after a person clicks on it. The only viable solution requires javascript, so the ten percent of users that disable javascript will continue to see the ads - even if they clicked through for us, so they probably wont return"

In a nutshell, SHOW your client the reasons why almost no major site uses that technology. Ask him to show you 5 websites in Alexa's top 1000 that use it. I really doubt there are any.

Then explain clearly, and forcefully, that you are working hard to do EXACTLY what he wants, despite it being an incredibly bad idea. Let him choose what tradeoff he is willing to accept to get what he wants.

Obtrusive ads will result in less viewers, lower SE rating, incompatibility for people with mobile browsers, disabilities, and more.

But hey, if he wants it, you'll code it - with all the warts! Best of all, by showing him ahead of time, he can't complain about any of them.

Posted: Fri Jun 02, 2006 8:43 am
by Skittlewidth
Thanks for all the suggestions so far, I'm going to try some of the code examples in a moment.

Roja - believe me I have had this conversation with my boss (complete with working/not working examples) which was passed to the client a few months ago, and it really does boil down to him being insistant on these ads. Like I said, he's just come back from a marketing course and thus he now thinks he knows whats best! So I'm just trying to see what my practical options are.

I'll let you know how I get on!