Application Real-Time Monitoring Service:Reportar dados de página de aplicações de página única

Ative o relatório automático de SPA

Este método funciona para a maioria das SPAs que utilizam hash de URL ( # ) como identificador de rota. O SDK escuta eventos hashchange e reporta dados de PV sempre que o hash muda. O valor do hash também serve como identificador da página quando o SDK reporta outros dados.

Defina enableSPA como true na configuração do SDK:

const config = {
  pid: '<your-pid>',
  enableSPA: true
};

const config = {
  pid: '<your-pid>',
  enableSPA: true,
  parseHash: function (hash) {
    // Example: extract the path from '#/user/profile?tab=info'
    // and return '/user/profile'
    return hash.replace(/(\?.*)?$/, '');
  }
};

Reporte dados de página manualmente

Esta abordagem é compatível com qualquer estratégia de roteamento, incluindo history e rotas personalizadas. Utilize-a quando o relatório automático baseado em hash não corresponder à sua configuração de roteamento.

Chame setPage() para atualizar o nome da página sempre que ocorrer uma alteração de rota. Cada chamada aciona um novo relatório de PV por padrão.

// Listen for route changes and report the new page name
app.on('routeChange', function (next) {
  __bl.setPage(next.name);
});

Adapte o listener de eventos ao seu roteador. Por exemplo, integre-se ao callback de alteração de rota fornecido pelo React Router, Vue Router ou Angular Router e chame __bl.setPage() com o novo nome da página.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function PageTracker() {
  const location = useLocation();

  useEffect(() => {
    // Report the pathname as the page name on each route change
    __bl.setPage(location.pathname);
  }, [location.pathname]);

  return null;
}

// Add <PageTracker /> inside your <Router> component

router.afterEach((to) => {
  __bl.setPage(to.path);
});

Escolha um método de relatório

Veja também