Ultima atualização: Janeiro 20, 2023
Os eventos comportamentais personalizados permitem-lhe rastrear informações únicas para o seu negócio. Elementos clicados e eventos URL visitados podem ser criados sem código com a extensão HubSpot Chrome.
Um evento de elemento clicado rastreia quando o clique de um visitante anônimo ou um contato do HubSpot em um elemento específico do seu site. Por exemplo, acompanhe quando um link de download de demonstração CTA grátis ou download de PDF for clicado. Os eventos com elementos clicados só podem ser criados e rastreados em páginas que tenham o Código de localização HubSpot instalado. Os eventos das URL visitadas registram quando um visitante anônimo ou visitas de contato do HubSpot acessam uma URL específica em seu site.
Observação:
- As instruções neste artigo servem para a nova ferramenta de eventos de comportamentos personalizados, que substitui a ferramenta de eventos de comportamentos anteriores. Qualquer evento criado na ferramenta antiga continuará a funcionar e você ainda pode gerenciar e analisar esses eventos na ferramenta antiga.
- Eventos antigos não podem ser migrados para a nova ferramenta de eventos. Em vez disso, é recomendável recriar os eventos antigos na nova ferramenta, pois os novos eventos personalizados fornecem mais flexibilidade com as propriedades do evento. Por exemplo, com eventos antigos você precisa criar vários eventos para acompanhar campanhas separadas, mas agora um único evento de comportamento personalizado pode rastrear várias campanhas.
Eventos de elementos visitados e clicados podem ser criados instalando e usando a extensão HubSpot Chrome para eventos simples clicados, tais como hiperligações e imagens.
Depois de ter criado os seus eventos, aprenda a analisar os eventos nas ferramentas de análise e relatórios. Também se pode criar e seguir manualmente eventos personalizados.
Criar eventos com a extensão cromada
Instale extensão de eventos para o Chrome
- Na sua conta da HubSpot, clique no ícone de configurações na barra de navegação principal.
- No menu da barra lateral esquerda, acesse Rastreamento e análises > Código de rastreamento.
-
Clique em Instalar extensão de eventos para o Chrome.
-
Clique em Download.
- Você será redirecionado à extensão do HubSpot Analytics na loja do Google Chrome. No canto superior direito, clique em Adicionar ao Chrome.
- Na caixa de diálogo, clique em Adicionar extensão.
- Assim que a extensão for instalada, ela aparecerá como uma de ícone de engrenagem laranja na barra de ferramentas do Chrome.
Criar um evento URL visitado com a extensão Chrome do evento
- Navegue para uma página web com o seu Código de localização HubSpot instalado.
- Na barra de ferramentas do seu navegador Chrome, clique noícone da roda dentada .
- Na caixa de diálogo, seleccionar Visited URL, depois clicar em Next.
- Adicione o nome do seu evento e, opcionalmente, adicione uma descrição. Clique em Próximo
- Clique em Adicionar para adicionar uma página. É possível adicionar várias páginas a um único evento.
- No campo URL da página, introduza o URL para o qual pretende localizar as visitas.
- No campo Nome, introduza um nome para a página. Este nome estará disponível dentro dos dados de propriedade do evento sob a propriedade chamada Tracking Name.
- Clique em Criar evento.
O HubSpot começará a acompanhar o evento. Aprenda como analisar o evento no HubSpot.
Criar um evento de elementos clicados com a extensão do evento Cromo
- Navegue para uma página web com o seu Código de localização HubSpot instalado.
- Na barra de ferramentas do navegador Chrome, clicar noícone da roda dentada .
- Na caixa de diálogo, seleccionar Clicked element
- Clique em Próximo.
- Adicione o nome do seu evento e, opcionalmente, adicione uma descrição. Clique em Próximo
- Para seleccionar um elemento na página a seguir, clicar em Adicionar. Seleccionar um elemento na página a seguir. Pode adicionar vários elementos clicados a um único evento.
- Clique num elemento da página para criar um evento de elementos clicados. No exemplo abaixo, o evento do elemento clicado irá seguir os cliques no link dos aspectos chave.
- Na caixa de diálogo, o selector CSS do elemento será auto-gerado. Introduza um Nome para o elemento que está a seguir. Este nome estará disponível dentro dos dados de propriedade do evento sob a propriedade chamada Tracking Name. Opcionalmente, adicionar uma descrição, depois clicar em Next.
- Para continuar a adicionar elementos adicionais ao seu evento, clique em Adicionar e seleccione outro elemento.
- Para terminar e guardar o seu evento, clique em Criar evento.
Observação: dependendo da complexidade da marcação HTML e CSS do seu site, a extensão do evento Chrome pode não conseguir detectar um seletor CSS exclusivo para um elemento. Neste caso, deve modificar o selector. Saiba mais sobre como encontrar identificadores em uma página de site.
- Depois que o evento for criado com sucesso, será exibida uma mensagem de confirmação. Clique em Ver evento no HubSpot para ver o novo evento de elementos clicados no seu painel de eventos.
O HubSpot começará então a rastrear o(s) elemento(s). Aprenda como analisar o evento no HubSpot.
Entenda e recupere os seletores de elementos
Pode identificar um elemento pelo seu HTML ID, classe HTML, ou usando um selector jQuery.
- HTML ID: introduza o ID do elemento que se pretende localizar. Por exemplo, se o seu elemento clicado estiver configurado <button id="log-in"> entraria no sistema.
- Aula de HTML: introduza o classe do elemento que se pretende localizar. Por exemplo, se seu elemento clicado estiver configurado como<button class="bigCTA">, você poderia inserir bigCTA.
- jQuery selector: introduza o jQuery selector do elemento que se pretende localizar.
ID
Para encontrar e usar a identificação de um elemento:
- Clique com o botão direito do rato na página com o elemento visado e seleccione View page source ou Inspect.
- Clique no elemento. Você deve ver o atributo de ID na linha do código (por exemplo, id="unique-element-name").
- Copiar o valor de ID e colá-lo (por exemplo, neste caso, nome único-elemento) no campo HTML ID sem as aspas. Por exemplo, para um elemento que inclui id="get-started-marketing-hub", entraria no campo "get-started-marketing-hub".
Classe
Um evento de elemento clicado pode identificar um elemento pelo seu atributo de classe.
Observação:
- quando múltiplos elementos numa página partilham a mesma classe, apenas o primeiro elemento da página contará para a conclusão do evento. Portanto, só deve utilizar a classe como identificador quando nenhum outro elemento da página partilha essa classe. Se o elemento não tiver uma classe única, recomenda-se a utilização de identificação.
- Se não for possível actualizar o código fonte de um elemento para adicionar uma classe ou ID única, recomenda-se a utilização da extensão Chrome para configurar o evento, pois o HubSpot atribuirá um identificador mais específico.
Encontrar a classe de um elemento e utilizá-lo para o evento:
- Clique com o botão direito do rato na página com o elemento visado e seleccione View page source ou Inspect.
- Clique no elemento. Você deve ver o atributo de classe na linha do código (por exemplo, class="unique-element-name").
- Copiar o valor da classe e colá-lo no campo Classe HTML sem as aspas. Por exemplo, para um elemento que inclui no campo.
- Quando um elemento tem múltiplas classes, pode usar qualquer uma das suas classes como alvo. Por exemplo, se um elemento incluir class="cta--primary cta--medium homepage-sales", poderá inserir cta--primary, cta--medium, ou homepage-sales no campo HTML Class. No entanto, garantir que nenhum outro elemento partilhe essa classe.
- Ao juntar várias classes, utilizar o seguinte formato: class1.class2.class3.
Seletor de jQuery
Você também pode usar os seletores de jQuery completo para direcionar elementos. Isso é útil se o elemento de direcionamento não tiver um ID ou classe, ou se precisar ser mais específico.
Por exemplo, pretende criar um evento de elemento clicado utilizando um selector jQuery para o elemento seguinte:
<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">Comece Agora!</a>
Em vez de usar o ID ou classe do elemento, poderia usar um selector de jQuery para apontar a propriedade href do elemento entrando o seguinte no campo jQuery selector :
[href='https://www.hubspot.com/products/marketing/get-started']
Saiba mais sobre selectores apoiados.
