Mensajes personalizados según la URL de referencia

Publicado por Nikko el dia 24 Feb 2009 - Guardado en Javascript, jQuery Leido 1,976 Veces

jQuery Fun: Greeting Your Site Referrals, un articulo donde encontraran una bonita practica en javascript para detectar desde donde provienen tus visitas y personalizar masajes o saludos sobre la base de la dirección URL de referencia. El estilo del ejemplo notaran que no es muy bonito, pero basándose en este idea pueden hacerlos mucho mas atractivos por su cuenta.

JavaScript:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
     // URLs usando expresiones regulares que quieres que detecte
   var msgs = [
   // null url : tráfico directo
   {'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
  // Mi url!
   ,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
   // Otras
   ,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
   ,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
   ,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
   ,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
   //generic pattern: to show generic message for referrers that you did not specify one for
   // URL genéricas
   ,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
   ];
   function DetectReferrer(){
      var div = $('#WelcomePlaceHolder');
      // Si no existe la capa no se muestra el mensaje
      if (!div.length) return;
      var ref = document.referrer.toLowerCase();
      var msg = findMatch(ref);
     // Si existe mensaje
      if(msg) {
     // Añade un botón para cerrar
     div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
    $('.CloseButton',div).click(function(){ div.hide() })
     });
      }
   }
   function findMatch(ref) {
      for(var i=0; i<msgs.length; i++)
     if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
    return msgs[i].msg;
      return null;
   }
   
   // Llama al detector de referrers cuando se carga en DOM
   $(DetectReferrer);
</script>

Agregamos el siguiente codigo donde mostraremos los mensajes

HTML:
<div id="WelcomePlaceHolder"></div>


Las Base del estilo que pueden utilizar como Guia, (la idea es q lo mejoren)

CSS:
/* Style your Message Div */
   #WelcomePlaceHolder{
      /* Keep hidden until called by javascript */
      display:none;
      Border:silver 2px solid;
      width:240px;
      height:125px;
      /* some space for BG image */
      padding:2px 2px 2px 100px;
      background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
      font-size:25px;
      color:#333333;
      margin:5px;
   }
   /* Style Close Button */
   A.CloseButton {
      font-size:11px;
      font-weight:bolder;
      color:black;
      border:silver 2px solid;
      text-decoration:none;
      float:right;
      padding:2px;
   }
   A.CloseButton:hover {
      border:gray 2px outset;
      text-decoration:none;
   }

Via sentidoweb
Mas info jQuery Fun: Greeting Your Site Referrals

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. Increíble lo que puede hacer jQuery... ¡¡¡ masajes personalizados !!!

    Las erratas las tenemos todos, hay veces que puede ser interesante cómo un error de este tipo produce visitas de búsquedas equivocadas.

    Podrías usar este js para dar una simpática bienvenida a alguien que venga de una search query buscando masajes... :)

    Un saludo y enhorabuena como siempre por el blog !!!

  2. extruendo - Gravatar

    extruendo

    24-02-2009

    Permalink

    Gracias tio!!



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: