Avaliação de aplicativo de página única com a gtag.js

Nesta página, descrevemos como usar a gtag.js para avaliar interações com páginas em sites cujo conteúdo é carregado dinamicamente (sem o carregamento tradicional de página inteira).

Visão geral

O aplicativo de página única (SPA, na sigla em inglês) é um aplicativo da Web ou site que carrega todos os recursos necessários para navegar por todo o conteúdo no primeiro carregamento de página. À medida que o usuário clica em links e interage com a página, o conteúdo subsequente é carregado dinamicamente. O aplicativo atualiza o URL na barra de endereço para simular a navegação tradicional nas páginas. No entanto, não é necessário fazer outra solicitação de página inteira.

A tag global do site do Google Analytics funciona bem com sites tradicionais porque o código de snippet é executado toda vez que os usuários carregam uma nova página. No entanto, para um aplicativo de página única em que o site atualiza o conteúdo da nova página dinamicamente em vez de carregamentos de página inteira, o código do snippet da gtag.js é executado apenas uma vez. Isso significa que as exibições virtuais subsequentes de página precisam ser avaliadas de forma manual, à medida que o novo conteúdo é carregado.

Avaliar as exibições virtuais de página

Quando seu aplicativo carregar o conteúdo dinamicamente e atualizar o URL na barra de endereço, o URL da página armazenado pela gtag.js também precisará ser atualizado.

Para atualizar page_path, modifique config na sua propriedade. Basta definir um valor para o parâmetro page_path:

gtag('config', GA_MEASUREMENT_ID, {'page_path': page_path});

Exemplo:

gtag('config', 'UA-1234567-89', {'page_path': '/new-page.html'});

Depois que você adicionar o novo valor de page_path, ele será usado em todos os próximos eventos enviados para essa propriedade.

Gerenciamento de vários URLs para o mesmo recurso

Alguns SPAs atualizam somente o hash do URL quando eles carregam conteúdo dinamicamente. Isso pode criar situações em que muitos caminhos de página diferentes levam ao mesmo recurso. Nesses casos, normalmente é melhor escolher um URL canônico e enviar somente o valor page_path para o Google Analytics.

Por exemplo, considere um site cuja página "Sobre" pode ser acessada com um dos URLs a seguir:

  • /about
  • /#/about
  • /home/#/about

Para evitar duplicação nos relatórios, é melhor gravar todas essas páginas usando /about para o page_path.