Acompanhamento de aplicativo de página única com gtag.js

Esta página descreve como usar a gtag.js para acompanhar 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ços para emular a navegação tradicional nas páginas. No entanto, nunca é necessário fazer outra solicitação de página inteira.

O snippet de acompanhamento funciona bem com sites tradicionais porque ele é executado cada vez que os usuários carregam uma nova página. No entanto, para um aplicativo de página única, no qual o site carrega o conteúdo da nova página dinamicamente em vez de carregamentos de página completos, o código do snippet gtag.js é executado apenas uma vez. Isto significa que as exibições de página subsequentes (virtuais) precisam ser acompanhadas manualmente, à medida que o novo conteúdo é carregado.

Acompanhamento de exibições virtuais de página

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

Para atualizar o page_path, modifique o comando config da sua propriedade especificando um valor para o parâmetro page_path:

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

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

Tratamento 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 apontam para o mesmo recurso. Nesses casos, normalmente é melhor escolher um URL canônico e enviar somente o valor page_path ao Google Analytics.

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

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

Para evitar a duplicação de dados nos seus relatórios, é recomendável acompanhar todas essas páginas usando /about para page_path.