jQuery: Saudar os visitantes do blogue

No outro dia andava a procurar algo irrelevante para este artigo, quando me deparei com um script à base de jQuery que saudava os visitantes conforme a sua proveniência.
Então o script é utilizado para detetar de onde vêm os visitantes do teu blogue ou website e cumprimenta-os com uma mensagem baseada na sua proveniência.
Por exemplo, quando um visitante chega aqui pesquisando algo no Google, é recebido uma mensagem personalizada como utilizador desse motor de pesquisa.

NOTA: Como mencionei, este script necessita do jQuery para funcionar, por isso este deverá estar instalado no blogue!
Caso ainda não o tenhas no blogue, podes ler aqui Como colocar jQuery num blogue.

Continuando... quando encontrei esse script, pesquisei um pouco mais porque para considerar colocar algo desse tipo aqui ou noutro blogue meu, precisava duma maneira de evitar que se tornasse uma irritação para o visitante.
E foi assim que descobri uma outro script que também saudava o visitante, embora fosse só a quem vinha dum lugar específico, mas que funcionava com um cookie, o que fazia com que o visitante só visse a saudação uma vez a cada 7 dias.

Pode-se dizer que misturei os dois scripts para criar um que servisse o que eu queria. :D
Para efeitos de teste, por enquanto somente vou colocar o script nesta página.

Se ainda não viste a mensagem, e como o script utiliza um cookie para que a saudação só apareça uma vez a cada 7 dias, clica aqui para reiniciar o cookie, recarregar a página, e puderes ver a saudação. ;)

Como personalizei o script para mim, incluí o Feedly, que é um agregador de feeds onde tenho a minha lista de locais que gosto de ler, e também o Nexus Mods porque uma das opções que tenho em mente para este script poderá ser para colocar na página onde partilho os Meus Mods porque recebo muitos visitantes através do meu perfil lá...
O código completo consiste num pouco de CSS para estilizar a mensagem e utiliza o jQuery para definir o cookie e mostrar a mensagem, neste caso, ao cimo da página.

Vou publicar a seguir o código completo com os respectivos comentários para que possam saber como e onde editar para o personalizarem se desejarem dar uma nova aparência à mensagem em si, ou se quiserem alterar os locais que vos enviam visitantes a cumprimentar com uma mensagem especifica.

Atenção: Tanto os estilos no CSS como as definições no script a seguir foram personalizados com o MEU BLOGUE em mente, é muito provável que tenhas que alterar algumas coisas para se ajustar às necessidades do teu blogue.

<style type="text/css"> /*inicio da tag style*/
#greeting { /* Define a aparência da div que contém a tua mensagem de saudação  */
	background: rgb(0,0,0); /*cor de fundo substituta para navegadores que não suportam rgba*/
	background: rgba(0,0,0,0.9); /*cor de fundo com opacidade para os navegadores modernos*/
	top: -80px; /*esconde a mensagem de saudação acima da janela do browser até que seja necessário - repara no número*/
	color: #fff; /*cor da letra da mensagem*/
	display: none; /*esconde a mensagem até que o script altere este estado*/
	font-family: Tahoma, Geneva, sans-serif; /*tipo de fonte*/
	font-size: 1em; /*tamanho da fonte*/
	height: 79px; /*altura da div que contém a mensagem -- deve ser ligeiramente inferior os número em top: xxpx*/
	position: fixed; /*posição da mensagem, neste caso fixado ao cimo da janela do navegador*/
	width: 100%; /*largura da div que contém a mensagem*/
	z-index: 999999; /* este número faz que que a mensagem se sobreponha aos outros elementos presentes na página*/
}
#greeting .msg_img { /* Define a div com a imagem que acompanha a tua mensagem  */
	width: 70px; /*largura da div da imagem*/
	height: 70px; /*altura da div da imagem*/
	display: inline-block; /*aparece num bloco alinhado com o texto*/
	margin: 0 10px; /*margem de 10px para os lados*/
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4hnyGCL5nCr_KpayRuLWysJED6bwdlP-MV3Wgj1QPIl6KPBRbEnfqan-Krr4w6Et22WWPFQVql6WE18s1zme9hrZ7qTgIINtGaJGZV818iWrQFQr5VqsAqtW3x_6LMx-tPjNwznrPzQNxJNUsbSkFDD5JVrVMl9mXLXzxWYMwNKD4Mmkrr-LBmYZUIq2/s618/wave36.gif) no-repeat 50% 50% /contain; /*a imagem propriamente dita que vai surgir ao lado da mensagem de saudação -- ATENÇÃO, o endereço da imagem neste código é o que utilizo neste exemplo mas RECOMENDO que alterem para uma vossa porque posso decidir eliminar esta imagem em qualquer momento futuro*/
} 
#greeting p { /*define como vai parecer o texto da saudação*/
	margin: 20px 0 20px 5px; /*margens do texto*/
	display: inline-block; /*aparece num bloco alinhado com a imagem*/
	vertical-align: top; /*alinhado ao cimo*/
	font-family: 'Metamorphous'; /*fonte do texto, no caso do Google Fonts: https://fonts.google.com/specimen/Metamorphous */
	font-weight: 600; /* dá um pouco de negrito à fonte*/
    line-height: 200%; /*define a distância entre as linhas de texto*/
}
#greeting .img_emo { /*span que contém um emoticon no fim do texto da saudação: <span class="img_emo">:)</span> -- caso não desejes colocar este ou outro emoticon, podes remover esta parte do CSS e a respectiva span no script abaixo*/
	width: 32px; /*largura da div do emoticon*/
	height: 32px; /*altura da div do emoji*/
	display: inline-block; /*aparece num bloco alinhado com o texto*/
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMLsbGhCNO793YJkWrCWoF-X3sdTf6OwC16_Z47tItlSXtMhILNX-FHK318FHkYuIX7uVLElqA-SKGtQYJdfks6d6ZK7B530B-J5U-7MQGlGsWLRLq1zpIptz-_ns_mlUJ2kF9Rf10IHHs3y-le4cWGapYfzIj0SPmyPBhKr_H2ob_eAxm1OLaT8cs_UQ/s45/gentleman.gif) no-repeat 50% 50% /contain; /*o emoji que vai surgir ao lado da mensagem de saudação -- ATENÇÃO, o endereço da imagem neste código é o que utilizo neste exemplo mas RECOMENDO que alterem para uma vossa porque posso decidir eliminar esta imagem em qualquer momento futuro*/
	overflow: hidden; /*esconde tudo o que sai fora das dimensões da span*/
	text-indent: -35px; /*move o texto da span [:)] para fora da mesma para o ocultar*/
	vertical-align: baseline; /*alinha a span à base em relação ao texto*/
    filter: drop-shadow(0 0 20px #fff); /*dá uma aura de luz em redor do emoji*/
}
#greeting .close-button { /*estilos do botão para fechar a mensagem de saudação*/
    cursor: pointer; /*tipo de cursor ao passar o rato*/
    font-weight: bold; /* dá um negrito ao texto*/
    margin: 5px 20px 5px 5px; /*margens do botão fechar*/
  
	position: absolute; /*posição do botão em relação à div da mensagem*/
	right: -8px; /*posição à direita*/
	bottom: -20px; /*posição em baixo*/
	z-index: 10; /*faz com que o botão se sobreponha à div da mensagem*/
	background: #fff; /*cor de fundo do botão*/
	border-radius: 4em; /*cria o redondo do botão*/
	height: 30px; /*altura do botão*/
	width: 30px; /*largura do botão*/
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*pequena sombra em redor do botão*/
}
#greeting .close-button:before { /*símbolo X do botão utilizando a FontAwesome: https://fontawesome.com/search */
  position: absolute; /*posição do símbolo */
  left: 50%; /*esquerda*/
  top: 50%; /*cimo*/
  font-family: FontAwesome; 
  content: "\f00d"; /*unicode do icone*/
  color: #000; /*cor do texto*/
  font-size: 25px;/*tamanho do texto*/
  transform: translate(-50%, -50%); /*posição na direção horizontal e/ou vertical*/
}
#greeting .close-button:hover:before { /*Estilos do símbolo ao colocar o rato em cima do botão*/
  color: #b34; /*cor do texto*/
  transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; /*transição da cor do texto*/
  transform: translate(-55%, -48%) rotate(-0.25turn); /*reposiciona na direção horizontal e/ou vertical e roda o símbolo*/
}
#greeting .close-button span { /*span que contém o texto no botão*/
	display: none; /*esconde o texto*/
}
</style> /*fecho da tag style*/

<script type="text/javascript"> /*inicio da tag script*/
/* !!!CRÉDITOS DO(S) AUTOR(ES) DO SCRIPT--NÂO RETIRAR!!!
JavaScript for the demo: Referrer Specific jQuery Greeting
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/referrer-specific-jquery-greeting/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/referrer-specific-jquery-greeting/
License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
*/
// URLs usando expressões regulares que queres que o script detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'Olá. Fico contente que ainda te lembres do meu blogue, disfruta da visita <span class="img_emo">:)</span>'}
// A url do MEU blogue para que a mensagem não apareça a quem passeia pelas páginas do mesmo, precisas alterar conforme o teu blogue!
,{'url':/^https?:\/\/([^\/]+\.)?cqapa\.blogspot\.com/,    'msg':null}
// URLs com mensagens personalizadas
,{'url':/^https?:\/\/([^\/]+\.)?google\.com/,      'msg':'Bem-vindo/a através do Google, espero que encontres o que procuras <span class="img_emo">:)</span>'}
,{'url':/^https?:\/\/([^\/]+\.)?bing\.com/,         'msg':'Bem-vindo/a através do Bing, espero que encontres o que procuras <span class="img_emo">:)</span>'}
,{'url':/^https?:\/\/([^\/]+\.)?feedly\.com/,         'msg':'Bem-vindo/a do Feedly, espero que gostes do que encontras aqui <span class="img_emo">:)</span>'}
,{'url':/^https?:\/\/([^\/]+\.)?nexusmods\.com/,      'msg':'Bem-vindo/a do Nexusmods, espero que encontres aqui o mod que procuras <span class="img_emo">:)</span>'}
//padrão genérico: para mostrar uma mensagem genérica aos visitantes para os quais não especificaste uma proveniência
// URLs genéricas
,{'url':/^https?:\/\//,               'msg':'Olá. Bem-vindo/a... Espero que encontres aqui o que procuras <span class="img_emo">:)</span>'}
];	
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;
}

$(document).ready(function() {

	//$.cookie("greeting", null); //<-- remove o comentário(//) se quiseres eliminares o cookie enquanto testares o script
	
	if($.cookie("greeting") != "off"){ //se a saudação não tiver sido mostrada ou desactivada previamente...
	
	  var referrer = document.referrer.toLowerCase(); //detecta o referenciador e converte-o em minúsculas

      var msg = findMatch(referrer);
		
			img = '<div class=\"msg_img\" />'; //esta é a div que vai conter a imagem que acompanha a tua mensagem - imagem essa que será definida no CSS           
			
			$('body').append("<div id=\"greeting\"><div class=\"close-button\"><span>Close X</span></div>" + img + "<p>" + msg + "</p></div>"); //anexa a mensagem antes do fecho da tag </body>
			$('#greeting').css( "display", "flex" ); //altera o estado da div de saudação para display: flex (e revela-a)
			$('#greeting').animate({top: '+=80'}, 1000); //anima a div #greeting para que se mova ao aparecer -- repara no número que deve coincidir com o que colocas em top: xxpx no CSS
			$.cookie("greeting", "off", { expires: 7}); //define um cookie para que a saudação não apareça uma segunda vez, ou no caso antes de passados 7 dias
		
	}
	
	$(".close-button").click(function() { //se clicarem no botão para fechar a div...
      $("#greeting").animate({top: '-=100'}, 1000); //anima a div #greeting para que se mova, no caso 100px, para fora da janela do navegador
	});	
	
});

//PLUGIN QUE CRIA O COOKIE NECESSÁRIO PARA O SCRIPT -- NÂO RETIRAR OS CRÉDITOS!!!
/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

/**
 * Create a cookie with the given name and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String name The name of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given name.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String name The name of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
  
//$(document).ready(function() {$(".reset").click(function() {$.cookie("greeting", null);});}); //<-- remove o comentário(//) se quiseres colocar um botão ou ligação para reiniciar o cookie tal como está neste artigo
</script> /*fecho da tag script*/

Mostrar Mais

Como podem reparar, o código acima está carregado de comentários para ajudar a puderem personalizar o mesmo à vossa maneira.
Algumas notas a reter: Não alterem os créditos dos scripts e tenham cuidado com as alterações que lhe façam...

Para colocar a mensagem de saudação no blogue tal como está neste artigo, basta ir ao Painel do Blogger Tema clicamos na seta do botão Personalizar e escolhemos a opção Editar HTML...
...depois procuramos pela tag </body> e LOGO ACIMA, colocamos o código da mensagem de saudação com as devidas alterações conforme seja o vosso caso, claro.

Termino este artigo, como não podia deixar de ser, com as ligações para os artigos onde achei os códigos presentes nesta mensagem de saudação:

• jQuery Fun: Greeting Your Site Referrals
• Referrer Specific jQuery Greeting
• Simple Close Button Animation by Keith Chisholm

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?