How to create a user-friendly URL on a one-page

Asked

Viewed 1,548 times

5

I have a website that is one-page. I separated the screens by <div> to facilitate. However, if I click news it goes correctly to the news screen, but the URL does not change.

How do I include a user-friendly URL for each "section" of the site? So that Google Analytics correctly captures the URL you are using.

For example, if I click contact, he gave up the contact section and the URL is www.meusite.com.br/contact

Below, some of my main structure for the 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>
  • Is the entire site contained on this page? There is nothing loaded via Ajax or anything like that?

  • 4

    The question is good. If you don’t mind, put the relevant code snippets so we understand how you’re trying to do this. You already know how it works Location hash and History API?

  • @Andrey Great suggestion from History API, I didn’t know! Maybe with this and more the use of analytics.js there is some viable solution. (and to think that 10 minutes ago I was safe that what the AP wanted was impossible... : P)

  • @mgibsonbr The History API is new to HTML5 and doesn’t work in all browsers, but big companies like Google, Facebook and Twitter use it. Related to the question: http://answall.com/q/26078/7261

  • @mgibsonbr there is a part of the site that has loading via Ajax. Andrey I will update the question including some snippets of code.

  • 3

    @Felipestoker Disregard my first comment. For a moment I thought your question was about SEO (and if it was, it would be a bit more complicated), but if the case is "inform Analytics that the user has accessed such content" then it is much quieter... I don’t have firsthand experience to give an answer now (nor am I having time at the moment), but later if no solution has arisen I return to this question.

  • All right. Anyway, I edited the question and put an example of how is my structure.

Show 2 more comments

1 answer

7


Hash (#) is a possible solution.

Changing the hash does not make the browser trigger a new request.

You can change the hash in two ways:

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

It is possible to fire an event every time the hash is changed:

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

If the user directly accesses a hashed URL such as:

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

The ideal is to create an event that loads the requested content:

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

To stay more DRY, you can create a function that loads the correct page and fire it at both events (domready and hashchange):

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

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

I rode a basic example in Jsfiddle.


About Google Analytics

My experience with Google Analytics is zero. But this answer do Stack-EN suggests manually inform the page request at the event hashchange. I didn’t test it, but I believe this page informs you exactly how to do this.


There is also the History API

I’m not going to talk about it much, because I’ve never used it in practice. (It would be nice for someone with experience to give an answer about it).

Basically it provides a means to artificially manipulate the browser history, in conjunction with the URL, via Javascript, without the use of the hash. This is a new HTML5 feature, and will not work in old browsers:

inserir a descrição da imagem aqui

Useful links

  • Thank you @Andrey, I was reading your reply and I think History API might be the most useful.

  • I want exactly this http://html5demos.com/history

  • 2

    If you decide to use the hash solution, a library such as the Sammyjs can help you not have to do everything by hand. And it’s worth noting that even if the History API works, you need to make sure that the server supports the "artificial" Urls it created (the demo itself linked above says, "Note: Since these Urls are not real, reloading the page will fall into an invalid url."). Because if the user saves the page address in the bookmarks, for example, by going back to it he hopes to find the right page - in the right section - and that’s something you’ll have to support.

  • @mgibsonbr I did not know Sammy.js, until I included in the answer. And in fact there are several considerations that must be made before making the decision to use routing client side.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.