5

Tenho uma site que é one-page. Separei as telas por <div> para facilitar. Porém, se eu clicar em notícias ele vai corretamente para a tela de notícias, mas a URL não muda.

Como faço para incluir uma URL amigável para cada "seção" dos site? De forma que o Google Analytics capture corretamente a URL que o usuário estiver.

Por exemplo, se eu clicar em contato, ele desse até a seção de contato e a URL fica www.meusite.com.br/contato

Abaixo, um pouco da minha estrutura principal para o site:

<div class="fundo1">CONTEUDO</div>
<div class="fundo2">CONTEUDO</div>
<div class="fundo3">CONTEUDO</div>
<div class="fundo4">CONTEUDO</div>
<div class="fundo5">CONTEUDO</div>
7
  • O site inteiro está contido nessa página? Não tem nada carregado via Ajax nem nada desse tipo?
    – mgibsonbr
    Commented 17/09/2014 às 13:06
  • 4
    A pergunta é boa. Se não se importa, coloque os trechos de código relevantes para entendermos como você está tentando fazer isso. Você já sabe como funciona location hash e History API?
    – user7261
    Commented 17/09/2014 às 13:12
  • @Andrey Ótima sugestão essa do History API, não conhecia! Talvez com isso e mais o uso do analytics.js exista alguma solução viável. (e pensar que 10 minutos atrás eu estava seguro de que o que o AP queria era impossível... :P)
    – mgibsonbr
    Commented 17/09/2014 às 13:18
  • @mgibsonbr O History API é novo no HTML5 e não funciona em todos os browsers, mas grandes empresas como Google, Facebook e Twitter o utilizam. Relacionado com a pergunta: pt.stackoverflow.com/q/26078/7261
    – user7261
    Commented 17/09/2014 às 13:23
  • 3
    @FelipeStoker Desconsidere meu primeiro comentário. Por um instante achei que sua pergunta era sobre SEO (e se fosse, seria um tantinho mais complicado), mas se o caso é "informar o Analytics de que o usuário acessou tal conteúdo" então é bem mais tranquilo... Eu não tenho experiência em primeira mão pra dar uma resposta agora (nem estou com tempo no momento), mas mais tarde se não tiver surgido uma solução eu volto a essa pergunta.
    – mgibsonbr
    Commented 17/09/2014 às 13:35

1 Resposta 1

7

Usar hash (#) é uma solução possível.

Alterar o hash não faz o navegador disparar uma nova requisição.

Você pode alterar o hash de duas maneiras:

  1. Via links:
<a href="#noticias">Notícias</a>
  1. Via Javascript:
window.location.hash = "noticias";

É possível disparar um evento toda vez que o hash é mudado:

// usando jQuery
$(window).on("hashchange", function() {
    alert(window.location.hash);
});

Caso o usuário acesse diretamente uma URL com hash como:

https://www.seu-site.com/#noticias

O ideal é criar um evento que carrega o conteúdo solicitado:

// novamente com jQuery
$(document).on("ready", function() {
    var pagina = windows.location.hash;
    if (pagina === "#noticias") {
        // carrega "Notícias"
    }
}

Para ficar mais DRY, você pode criar uma função que carrega a página correta e dispará-la nos dois eventos (domready e hashchange):

var carregaPagina = function() {
    var pagina = windows.location.hash;
    if (pagina === "#noticias") {
        // carrega "Notícias"
    }
};

$(document).on("ready", carregaPagina);
$(window).on("hashchange", carregaPagina);

Montei um exemplo básico no JSFiddle.


Sobre o Google Analytics

Minha experiência com o Google Analytics é zero. Mas esta resposta do Stack-EN sugere informar manualmente a requisição da página no evento hashchange. Eu não testei isso, mas acredito que esta página informa exatamente como fazer isso.


Existe ainda o History API

Não vou falar muito sobre ele, pois nunca o utilizei na prática. (Seria bom alguém com experiência dar uma resposta sobre ele).

Basicamente ele fornece um meio de artificialmente manipular o histórico do navegador, em conjunto com a URL, via Javascript, sem a necessidade do uso do hash. Isso é uma funcionalidade nova do HTML5, e não irá funcionar em navegadores antigos:

inserir a descrição da imagem aqui

Links úteis

4
  • Muito obrigado @Andrey, estava lendo sua resposta e acho que o History API pode ser o mais útil. Commented 17/09/2014 às 17:11
  • Eu quero exatamente isso html5demos.com/history Commented 17/09/2014 às 19:44
  • 2
    Caso se decida usar a solução dos hashes, uma biblioteca como a SammyJS pode ajudar a não ter que fazer tudo na mão. E é bom frisar que ainda que o History API funcione, é preciso garantir que o servidor dê suporte às URLs "artificiais" criadas por ele (o próprio demo linkado acima diz: "Nota: como essas urls não são reais, recarregar a página vai cair em uma url inválida."). Pois se o usuário salvar o endereço da página nos favoritos, por exemplo, ao voltar nele ele espera encontrar a página certa - na seção certa - e isso é algo que você vai ter que dar suporte.
    – mgibsonbr
    Commented 20/09/2014 às 16:05
  • @mgibsonbr Não conhecia o Sammy.js, até incluí na resposta. E de fato há várias considerações que devem ser feitas antes de tomar a decisão de usar roteamento client side.
    – user7261
    Commented 20/09/2014 às 16:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .