How do I hide certain elements on my page, based on referral traffic?

Question

More specifically, how do I hide ads? I pose this question after reading this: coding horror entry

In it, he states

As a courtesy, turn off ads for Digg, Reddit, and other popular referring URLs. This audience doesn't appreciate ads, and they're the least likely to click them anyway.

I agree with what he says. So how do I do this?

Answer 1

I'd use PHP for this, as JavaScript code to hide ads will make you look like you're hiding the ads for everyone and just gaining revenue from them (Google is smart, so they'll find you for doing something like that).

With PHP, however, you can modify the page before it reaches the user, eliminating that problem. Basically, you conditionally check where the browser came from:

<?php
  $sites = array("reddit.com", "digg.com");

  if (!in_array(parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST), $sites)) :
?>

  <div>your ads</div>

<?php else:?>

  <div>Hello reddit person</div>

<?php endif; ?>

You'll have to make your site run PHP code (it'll be dynamic) to conditionally display your ads. This code won't work, though, as reddit isn't a URL, but you get the idea; check the URL for reddit.com.

Answer 2

Well, I don't know how ads are handled on your site, but on StackOverflow it might be something akin to

function hideAds()
{
    var elems = document.getElementsByClassName( "everyonelovesstackoverflow" )
    for( var i = 0; i < elems.length; i++ ) 
          elems[ i ].parentNode.removeChild( elems[ i ] )
}
// change the logic as you like. You may need to parse document.referrer
if( document.referrer == <some referrer url> ) hideAds()