Rastreando Aplicações de Página-Única (SPA)/Web Progressiva (PWA)

É fácil começar a rastrear o seu aplicativo de página única (SPA) ou aplicativo Web progressivo (PWA) usando o MVMCloud Analytics. Neste guia, você verá duas formas para fazer isto.

Solução 1: Incorporar código de contêiner do Gerenciador de Tag do MVMCloud Analytics

Se você usar o Gerenciador de Tag para implementar o rastreamento do seu site, então no seu aplicativo de página única, sempre que houver uma nova página carregada, você precisará que a sua Tag do MVMCloud Analytics seja acionada para que a visualização da página seja rastreada.

Para acionar a sua tag (que chama trackPageView), você pode:

No contêiner do MVMCloud Analytics Gerenciador de Tag, navegue até Gatilhos e clique em Criar novo Gatilho;
Selecione o gatilho Mudança no histórico na seção Envolvimento do usuário;
Dê um nome ao seu gatilho, por exemplo "Mudança no histórico";
Clique em Criar novo gatilho;
Crie outro gatilho, desta vez selecionando Visualização como tipo de gatilho;
Selecione o gatilho Visualização na seção Visualização;
Dê um nome ao seu gatilho, por exemplo "Visualização de página";
Clique em Criar novo gatilho;
Em seguida, navegue até Tags e clique em Criar Nova Tag e selecione MVMCloud Analytics como tipo de Tag;
Selecione sua variável de configuração MVMCloud Analytics e defina o Tipo de Rastreamento como Visualização;
Defina o título personalizado como {{ PageTitle }} (Título de Página);
Defina o URL personalizado para {{ PageOrigin }}/{{ PageHash }} se o seu SPA (Single-Page Application) ou PWA (Progressive Web Application) tiver um URL para navegar para páginas diferentes. Caso contrário, defina-o como {{ PageUrl }};
Na opção Execute esta tag quando quaisquer dos gatilhos forem disparados, selecione os gatilhos “Mudança de histórico” e “Visualização de página” que criamos;
Use o modo de visualização/depuração para testar e garantir que seus gatilhos e tags estejam funcionando conforme o esperado;
Depois de confirmar que o gatilho e a tag estão funcionando conforme esperado, publique as alterações para que sejam implantadas no seu site.

Como acionar eventos PageView, DOMReady e WindowLoad do Gerenciador de Tag do MVMCloud Analytics usando javascript


Em seu aplicativo de página única, se você estiver usando o 'gatilho de visualização de página' para acionar uma visualização de página, poderá acionar um evento do Gerenciador de Tag {event: 'mvm.PageView'} chamando a seguinte linha em JavaScript: window._mtm.push({'event': 'mvm.PageView'});. Isso também funcionaria de forma semelhante quando você usa o 'DOM Ready Trigger' (call window._mtm.push({'event': 'DOMReady'});) ou quando você usa o 'Window Loaded Trigger' (call _mvm.push({'event': 'WindowLoad'});.

Solução 2: Incorporar o código de rastreamento manualmente

Se não estiver usando o Gerenciador de Tag, você precisará incorporar o código de rastreamento JavaScript do MVMCloud Analytics em seu site ou aplicativo da web de página única, como faria em um site clássico.

Para encontrar o seu código de rastreamento, vá em “Administração” (ícone de roda dentada) no canto superior direito da sua instância do MVMCloud Analytics, clique em “Código de Rastreamento” e ajuste-o às suas necessidades. Você pode encontrar mais informações em nossa documentação do Cliente de Rastreamento JavaScript.

Nas seções abaixo você aprenderá como configurar o rastreamento com aplicativos de página única (SPAs). Ele aborda como rastrear visualizações de páginas, redefinir variáveis, dimensões personalizadas, atualizar URLs de referência, procurar novo conteúdo e implementar mapa de calor e gravação de sessão. Um exemplo abrangente ilustra como esses elementos se integram em um ambiente SPA.

Rastreando uma nova visualização de página

O desafio começa quando você precisa acompanhar uma nova visualização de página. Um aplicativo de página única é diferente de um site normal, pois não há carregamento regular de novas páginas e o MVMCloud Analytics não consegue detectar automaticamente quando uma nova página é visualizada. Isso significa que você precisa avisar o MVMCloud Analytics sempre que o URL e o título da página forem alterados. Você pode fazer isso usando os métodos setCustomUrl e setDocumentTitle assim:


window.addEventListener('hashchange', function() {
        _paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
        _paq.push(['setDocumentTitle', 'Meu Novo Título']);
        _paq.push(['trackPageView']);
})

Redefinindo variáveis personalizadas definidas anteriormente

Se você definiu quaisquer variáveis personalizadas no escopo “página”, você precisa se certificar de excluir essas variáveis personalizadas novamente, pois elas também seriam atribuídas à nova visualização de página:

_paq.push(['deleteCustomVariables', 'page']);
_paq.push(['trackPageView']);

Observação: recomendamos que você use dimensões personalizadas em vez de variáveis personalizadas, pois elas serão descontinuadas no futuro.

_paq.push(['deleteCustomDimension', 1]);
_paq.push(['trackPageView']);

Atualizando o referenciador

Dependendo se você deseja rastrear a página anterior como um referenciador para a nova visualização de página, você deve atualizar o URL do referenciador definindo-o como o URL da página anterior:

_paq.push(['setReferrerUrl', previousPageUrl]);
_paq.push(['trackPageView']);

Informando o MVMCloud Analytics sobre novos conteúdos

Quando você mostra uma nova página, seu DOM de página única também pode mudar. Por exemplo, você pode substituir partes da sua página por novo conteúdo carregado do seu servidor via Ajax. Isso significa que você precisa instruir o MVMCloud Analytics a verificar o DOM em busca de novo conteúdo. Veremos agora vários tipos de conteúdo (vídeos e áudio, formulários, links e downloads, rastreamento de conteúdo).

Rastreamento de vídeo e áudio

Se você usa o recurso Análise de Mídia para rastrear seus vídeos e áudios, sempre que uma nova página for exibida você precisará chamar o seguinte método:

_paq.push(['MediaAnalytics::scanForMedia', documentOrElement]);

Quando você não passa nenhum parâmetro, ele irá varrer todo o DOM em busca de novas mídias. Como alternativa, você pode passar um elemento para verificar apenas uma determinada área do seu site ou aplicativo em busca de novas mídias.

Análise de Formulário

Se você usar o recurso Análise de Formulário para medir o desempenho de seus formulários online, sempre que uma nova página for exibida você precisará chamar o seguinte método:

_paq.push(['FormAnalytics::scanForForms', documentOrElement]);

Onde documentOrElement aponta para document verificar novamente todo o DOM (o padrão quando nenhum parâmetro é definido) ou você p ode passar um elemento para restringir a nova verificação a uma área específica.

Teste A/B

Se você usar o recurso de teste A/B para testar seus experimentos, sempre que uma nova página for exibida, você precisará incorporar o código js novamente antes de rastrear uma nova visualização de página, conforme explicado abaixo:


window.addEventListener('pathchange', function() {
   var _paq = window._paq = window._paq || [];
   _paq.push(['setCustomUrl', window.location.pathname]);
   _paq.push(['setDocumentTitle', document.title]);
   _paq.push(['AbTesting::create', {
      name: 'theExperimentName',
      includedTargets: [{"attribute":"url","type":"starts_with","value":"http:\/\/www.example.org","inverted":"0"}],
      excludedTargets: [],
      variations: [
         {
            name: 'original',
            activate: function (event) {
               // usually nothing needs to be done here
            }
         },
         {
            name: 'blue',
            activate: function(event) {
               // eg $('#btn').attr('style', 'color: ' + this.name + ';');
            }
         }
      ]
   }]);
   _paq.push(['trackPageView']);
});

Rastreamento de links

Supondo que você use o recurso de rastreamento de links para medir links externos e downloads , o MVMCloud Analytics precisará verificar novamente todo o DOM em busca de links recém-adicionados sempre que seu DOM for alterado. Para garantir que o MVMCloud Analytics rastreará esses links, chame este método:

_paq.push(['enableLinkTracking']);

Rastreamento de conteúdo

Se você usar o recurso de rastreamento de conteúdo, sempre que uma nova página for exibida e algumas partes do seu DOM forem alteradas, você precisará chamar este método:

_paq.push(['trackContentImpressionsWithinNode', documentOrElement]);

Onde documentOrElement aponta para document ou um elemento semelhante aos outros métodos. O MVMCloud Analytics irá então verificar a página em busca de blocos de conteúdo recém-adicionados.

Mapa de calor e gravação de sessão

Para oferecer suporte imediato a sites de página única e aplicativos da Web, o Heatmap e a gravação de sessão detectarão automaticamente uma nova visualização de página quando você chamar o método trackPageView. Isso se aplica se você ligar trackPageView várias vezes sem recarregar a página. O MVMCloud Analytics interromperá a gravação de quaisquer atividades após cada chamada trackPageView e reavaliará se deve registrar atividades para a nova página com base no novo URL.

Se você tiver um site de página única e usá-lo trackPageView para qualquer outra finalidade que não seja uma visualização de página real, é recomendável desativar o comportamento padrão usando este método e informar explicitamente o mapa de calor e a gravação de sessão quando houver uma nova visualização de página chamando os dois métodos disableAutoDetectNewPageView e setNewPageView.

Se você estiver definindo um URL personalizado no site de página única, pode ser necessário usar matchTrackerUrl() para permitir que o rastreador do MVMCloud Analytics acione corretamente mapas de calor e gravações de sessão.

Medindo aplicativos de página única: exemplo completo

Neste exemplo mostramos como tudo funciona em conjunto, assumindo que você deseja rastrear uma nova página sempre que um hash muda:


var currentUrl = location.href;
window.addEventListener('hashchange', function() {
    _paq.push(['setReferrerUrl', currentUrl]);
     currentUrl = '/' + window.location.hash.substr(1);
    _paq.push(['setCustomUrl', currentUrl]);
    _paq.push(['setDocumentTitle', 'Meu Novo Título']);

    // remova todas as variáveis personalizadas atribuídas anteriormente
    _paq.push(['deleteCustomVariables', 'page']);
    _paq.push(['AbTesting::create', {
       name: 'theExperimentName',
       includedTargets: [{"attribute":"url","type":"starts_with","value":"http:\/\/www.example.org","inverted":"0"}],
       excludedTargets: [],
       variations: [
          {
             name: 'original',
             activate: function (event) {
                // geralmente nada precisa ser feito aqui
             }
          },
          {
             name: 'blue',
             activate: function(event) {
                // ex: $('#btn').attr('style', 'color: ' + this.name + ';');
             }
          }
       ]
    }]);
    _paq.push(['trackPageView']);

    // informar o MVMCloud Analytics sobre conteúdo recém-adicionado
    var content = document.getElementById('content');
    _paq.push(['MediaAnalytics::scanForMedia', content]);
    _paq.push(['FormAnalytics::scanForForms', content]);
    _paq.push(['trackContentImpressionsWithinNode', content]);
    _paq.push(['enableLinkTracking']);
});