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. Você também pode incluir as alterações de endereço no seu site na medição de visualizações de página.

Se quiser definir os caminhos da gtag.js, use o comando set e especifique um valor para o parâmetro page_path:

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

Exemplo:

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

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.