Ponte GTM & ponte de eventos GA4

Unir a telemetria quantitativa do Google Analytics 4 às reproduções qualitativas de sessões do MousePlayer com sincronização bidirecional do dataLayer e APIs compatíveis com GA4.

1. Arquitetura & recursos

A análise web moderna costuma sofrer com um isolamento fundamental dos dados: plataformas quantitativas (como o Google Analytics 4) mostram o que aconteceu em um site, enquanto ferramentas qualitativas de reprodução explicam por que aconteceu. A ponte GTM & GA4 do MousePlayer elimina essa lacuna criando um canal bidirecional no ambiente de execução JavaScript do navegador.

Ao ser ativado, o script de rastreamento inicializa dois módulos principais:

  • Exportador de reproduções de sessões (initGa4SessionBridge): Envia automaticamente o identificador da sessão de gravação ativa (mp_session_id) e uma URL direta de reprodução (mp_session_url) ao dataLayer do site assim que a sessão é estabelecida.
  • Receptor de eventos GA4 (initDataLayerBridge): Adiciona um listener não destrutivo ao array do dataLayer. Qualquer evento personalizado de comércio eletrônico ou comportamento enviado ao GA4 é imediatamente replicado no banco de análise do MousePlayer como evento personalizado (ce), com todos os parâmetros numéricos e de texto.

Suporte a nomes personalizados do dataLayer: Se uma aplicação usa um nome de array JavaScript personalizado no lugar do padrão dataLayer (por exemplo, xyzDataLayer), o mecanismo se adapta dinamicamente ao parâmetro gtm_datalayer_name configurado, sem alterações manuais no código.

2. Valor estratégico para a empresa

Integrar links de reprodução diretamente aos fluxos de análise da empresa oferece vantagens operacionais importantes:

Área de aplicação Impacto operacional
Otimização da taxa de conversão (CRO) Permite identificar pontos de atrito nos funis de conversão do GA4 e abrir imediatamente gravações de usuários que abandonaram carrinhos em etapas específicas do checkout.
Atribuição de receita & auditoria Transações de alto valor podem ser auditadas revisando trajetórias exatas do cursor, cliques e estados da área visível que levaram à compra.
Depuração técnica mais rápida Equipes de qualidade podem correlacionar exceções JavaScript ou logs de erros de API do GA4 diretamente com gravações visuais da tela, sem reproduzir falhas manualmente.
Resolução de solicitações de suporte Tickets com IDs de sessão permitem rever a reprodução exata da sessão do cliente, reduzindo bastante os tempos de resolução.

3. Guia de configuração do Google Tag Manager

Para capturar a URL de reprodução no Google Tag Manager e enviá-la ao Google Analytics 4, configure três componentes GTM:

Etapa 1: criar variáveis do dataLayer

No espaço de trabalho GTM, acesse Variáveis → Variáveis definidas pelo usuário e crie duas variáveis do tipo Variável da camada de dados:

  • Nome da variável: dlv - mp_session_id • Nome da variável da camada de dados: mp_session_id
  • Nome da variável: dlv - mp_session_url • Nome da variável da camada de dados: mp_session_url

Etapa 2: criar o acionador

Acesse Acionadores → Novo e selecione o tipo Evento personalizado. Configure os parâmetros:

  • Nome do evento: mp_session_ready
  • Este acionador dispara em: Todos os eventos personalizados

Etapa 3: configurar a tag de evento GA4

Crie uma tag do tipo Google Analytics: evento do GA4 para transmitir o link da sessão à propriedade GA4:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. Configurar explorações (relatórios personalizados) no GA4

Depois que a tag GTM é publicada, o GA4 recebe a URL de reprodução como parâmetro de evento. Para analisar os dados em explorações personalizadas, registre primeiro o parâmetro como dimensão personalizada.

Registrar dimensões personalizadas na administração do GA4

Na interface do Google Analytics 4, acesse Administrador → Exibição de dados → Definições personalizadas e clique em Criar dimensão personalizada:

  • Nome da dimensão: MousePlayer Session URL
  • Escopo: Evento (ou Sessão para parâmetros com escopo de sessão)
  • Parâmetro de evento: mp_session_url

Criar uma exploração para revisar sessões

Na seção Explorar do GA4, crie uma exploração de Formato livre para examinar jornadas individuais:

  • Linhas: Adicione Event name, Transaction ID (para comércio eletrônico), ou Landing page.
  • Colunas / Dimensões: Inclua a dimensão personalizada recém-criada MousePlayer Session URL.
  • Valores: Adicione Event count ou Total users.

A tabela do relatório mostra URLs diretamente clicáveis ao lado das métricas GA4, permitindo passar de valores estatísticos atípicos às reproduções visuais imediatamente.

5. Integrar URLs de reprodução aos relatórios padrão do GA4

Além das explorações, dimensões personalizadas podem entrar nos relatórios padrão do GA4 (como Aquisição de tráfego, Páginas e telas, ou Compras de comércio eletrônico) pela biblioteca de relatórios do GA4.

Alterar tabelas de relatórios padrão

  1. No GA4, abra um relatório detalhado padrão (por exemplo, Relatórios → Engajamento → Páginas e telas).
  2. Clique no ícone de lápis Personalizar relatório no canto superior direito (exige acesso administrativo).
  3. No painel direito, em Dados do relatório, clique em Dimensões.
  4. Adicione MousePlayer Session URL à lista de dimensões principais ou secundárias e defina como visível.
  5. Clique em Salvar → Salvar alterações no relatório atual.

Após salvar, quem revisar tabelas padrão de aquisição ou conversão pode adicionar MousePlayer Session URL como dimensão secundária para examinar visualmente o comportamento dos visitantes nos segmentos de tráfego padrão.

6. Referência da API JavaScript & compatibilidade GA4 / GTM

O MousePlayer oferece uma API JavaScript intuitiva e compatível com GA4 (com comandos no estilo gtag()) e um objeto global público (window.MousePlayer). Isso permite consultar URLs de sessão no console, associar IDs de clientes B2B e inserir links de reprodução em ferramentas externas de suporte ou rastreamento de erros.

1. Inserção direta da URL de reprodução (Intercom / Zendesk / pontes personalizadas)

Você pode obter a URL completa da sessão ativa no console do navegador ou em qualquer script personalizado usando window.MousePlayer.getSessionUrl():

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. Definir IDs personalizados de clientes B2B (user_id)

Para identificar clientes SaaS ou B2B conectados, passe um user_id personalizado (como ID de banco, e-mail ou UUID) na configuração inicial ou dinamicamente durante a execução, com a sintaxe GA4:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. Métodos de consulta assíncrona

Use a sintaxe padrão de callbacks do GA4 para obter metadados de sessão de forma assíncrona em scripts personalizados de gerenciamento de tags:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

Todas as marcas mencionadas pertencem aos respectivos proprietários. O MousePlayer não mantém relação comercial com esses fornecedores.