Um Aplicativo de página única (SPA) é um aplicativo ou site da web que carrega todos os recursos necessários para navegar pelo site 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 geralmente atualiza o URL na barra de endereço para emular a navegação tradicional da página, mas outra solicitação de página inteira nunca é feita.

Existem algumas maneiras de usar o DTM para aplicativos de página única e navegaremos por algumas dessas opções neste artigo.

Método 1 - Regras de chamada direta (DCR)

Acione uma Regra de chamada direta, como _satellite.track (“page view”) em tudo considerado como uma visualização de página, seja um novo DOM ou não.

Para mais informações sobre as Regras de chamada direta, consulte link.

Método 2 - Estado de push ou alteração de hash

O evento pushState ou hashchange pode ser usado com Aplicativos de página única (SPAs) em que uma página não é recarregada, mas seu conteúdo é alterado. As estruturas de desenvolvimento comuns que podem ser usadas para criar SPAs incluem Angular e Reagir. Esse tipo de evento permite criar regras baseadas em eventos sem depender dos desenvolvedores. Essas regras são disparadas quando ocorrem funções comuns em SPAs, como:

  • O caminho do URL foi alterado com base no uso do pushState da API HTML5 History.
  • O hash mudou devido ao usuário alterar as visualizações ou os locais na página.

Etapa 1: Crie uma nova Regra baseada em evento e escolha o tipo de evento como “Push State ou Hashchange”

Picture1

Etapa 2: na condição de regra, escolha critérios como “Hash” e, em seguida, especifique o parâmetro hash

picture2

Observe que, no caso de duas ou mais solicitações de imagem do SPA, as solicitações são feitas na mesma página. Portanto, é necessário limpar os valores das variáveis definidas anteriormente.

Para s.tl(), ou seja, chamadas de Rastreamento de link, isso pode ser feito por:

  • Escrever uma função JavaScript simples para limpar as variáveis da Adobe
  • Defina as variáveis linkTrackVars e linkTrackEvents se você ainda não tiver feito isso no arquivo s_code.js / App Measurement
  • Defina os valores apropriados para o conteúdo alterado, especialmente a variável pageName.
  • Depois que as variáveis estiverem definidas, chame a função tl()

Código de amostra :

s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; 
s.prop1="some value"; s.eVar1="another value"; s.events="event1"; 
s.tl(this,'o','My Link Name');

Para s.t(), ou seja, Chamadas de exibição de página, isso pode ser feito por:

Apagando quaisquer valores no objeto s que você não deseja que persista. Se você estiver usando o AppMeasurement para JavaScript, poderá chamar s.clearVars(). Se você estiver usando código H, escreva uma rotina simples para definir variáveis para uma string vazia.

Código de amostra :

s.clearVars(); 
s.pageName="New Page" 
s.prop1="some value" 
void(s.t());

Método 3 - Regra baseada em evento personalizado

O DTM também pode reagir a eventos personalizados que acontecem na página. Um evento personalizado disparado do DOM pode ser rastreado usando Regras baseadas em eventos com o tipo de evento como “Evento personalizado”.

Considere o exemplo de um SPA de Comércio Eletrônico, onde a ideia é disparar chamadas de “Visualização de página” quando a pessoa navega de uma página para outra no SPA sem carregar a nova página.

Etapa 1: crie uma nova regra baseada em Evento e escolha o tipo de evento como "Evento personalizado" e especifique o nome amigável "Custom_Page_View" para o tipo de evento acionado. “#content” é especificado no campo “Element Type or Selector”, porque é nesse campo onde o evento é despachado. Selecione a caixa de seleção “Aplicar manipulador de eventos diretamente ao elemento”, a regra não dispararia sem ela.

Picture3

Etapa 2: Na seção Analytics da regra, marque o botão de opção “s.t()”, conforme necessário, para rastrear uma “page view” neste caso de uso. 

Picture 4

Etapa 3: Insira o código no site que cria e envia o evento.

Snap1

Podemos referenciar os dados enviados através do evento usando %event.detail.pageName% na seção Analytics da regra.

Snap2

Observação: independentemente de qualquer um dos três métodos acima, talvez seja necessário suprimir o sinalizador de visualização de página inicial que a ferramenta Analytics desejará definir por padrão. Caso contrário, no exemplo acima, em que os desenvolvedores estão acionando uma regra de chamada direta ou EBR em todas as visualizações de página, você obteria DOIS marcadores na primeira página e 1 em todas as páginas subsequentes. Consulte o código de amostra para suprimir o sinalizador de visualização de página inicial da ferramenta Analytics.

  •  Adicione “return false” a qualquer bloco de código personalizado da ferramenta Analytics que seja executado nessa página.
Picture7

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online