Soluções SPAs

Conceito

SPAs (Single Page Applications) se caracterizam por concentrar varias funcionalidades de um website em uma única pagina, ou seja, ao invés de sempre redirecionar o usuário para uma página nova, apenas o conteúdo principal da página é atualizado de forma assíncrona (varias páginas ao mesmo tempo), mantendo toda a estrutura da página estática, isto gera uma serie de cuidados que devemos tomar, sobre tudo na hora de capturar as informações do website.

Para trabalharmos neste tipo de website podemos tomar os seguintes caminhos para trabalhar neles:

Trigger History Change

Google Tag Manager possui um acionador específico que é ativado quando há alguma mudança na URL da página ou quando o website possui mudanças de histórico, para trabalhar num SPA este seria o trigger adequado para substituir DOM Ready ou Window Loaded, para usar este trigger é recomendável ativar as variáveis incorporadas de histórico para poder personalizar mais os nossos acionadores:

Quando associamos o acionador History Change a uma conversão podemos notar que sempre que há uma mudança na URL do website ou no histórico é gerado o evento History que traz consigo uma série de parâmetros que podemos utilizar para criar nossos acionadores:

Podemos utilizar as variáveis incorporadas para adicionar parâmetros ao nosso trigger History Change e no caso de usarmos variáveis que não sejam incorporadas podemos criar elas, a seguir um exemplo de um trigger personalizado usando as variáveis personalizadas:

Observações:

Uma dica para identificar se um website apresenta mudanças de histórico antes mesmo de estar em chamada é que podemos injetar um container pessoal do GTM com o conversion linker e o trigger History change criados para identificar se o trigger History Change dispara.
O trigger History Change pode não funcionar dependendo de como foi feita a construção do SPA! Existem situações raras onde dependendo da maneira como o SPA foi construído ele pode não retornar nenhuma mudança de histórico, nesta situação podemos dibrar este problema utilizando soluções por código.

IIFE

Outra solução válida para trabalhar com SPAs é usar uma Immediately invoked function expressions (IIFE) para chamar uma função em loop até que conseguir os dados que precisamos.

MutationObserver (

Há mais uma alternativa para trabalhar com código em SPAs, consiste no uso do objeto MutationObserver que nos permite observar todas as mudanças que ocorrem no DOM.

MutationObserver(): Constructor que retorna uma instancia de um observador das mudanças no DOM, na prática, dentro do código acima a nova instancia de MutationObserver() se encarrega de executar uma função sempre que o DOM tenha alguma mudança nos seus elementos.
observe(): Método que nos permite configurar nosso “observer” para observar determinadas mudanças no DOM, ela precisa de 2 parâmetros para funcionar:
- target: Elemento que vamos observar, como trabalhamos com um SPA recomendo atribuir “document” para observar a página inteira.
- options: Objeto que especifica que tipo de mudança no DOM deve ser observada, no exemplo acima foi usado subtree e childlist, os dois configurados como true permitem observar os sub-elementos do target “document” junto com todos os seus descendentes.

Observações:

Quando utilizamos soluções por código para rastrear algo dentro de um SPA NUNCA devemos utilizar o eventListeners como DOMContentLoaded ou load ou seus equivalentes no GTM para acionar nossos códigos pois como explicado no início deste post um SPA se caracteriza por carregar várias páginas ao mesmo tempo ao invés de recarregar cada página individualmente.

Exemplo:

Vamos capturar o envio de um formulário dentro de uma página específica através das soluções por código neste site.

IIFE:

MutationObserver():

Referências:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

https://support.google.com/tagmanager/answer/7679322?hl=en

Page updated

Google Sites

Report abuse