Ir para o conteúdo principal
Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Analytics Tools

Criar eventos comportamentais personalizados sem código (BETA)

Ultima atualização: Setembro 5, 2022

Disponível para

Marketing Hub Enterprise

Os eventos comportamentais personalizados permitem rastrear informações exclusivas para sua empresa. Eventos de elemento clicado e URL visitada podem ser criados sem código com a extensão do 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 de elemento clicado só podem ser criados e rastreados em páginas que tenham o código de rastreamento do 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.

 

Os eventos de URL visitados e elementos clicados podem ser criados instalando e usando a extensão HubSpot Chrome para eventos clicados simples, como hiperlinks e imagens.

Depois de criar seus eventos, saiba como analisar eventos nas ferramentas de análise e relatórios. Você também pode criar e rastrear manualmente eventos personalizados.

Crie eventos com a extensão do Chrome

Instale extensão de eventos para o Chrome

  • Na sua conta da HubSpot, clique no settings í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 sprocket na barra de ferramentas do Chrome.

Criar um evento de URL visitado com a extensão de eventos para o Chrome

  • Navegue até uma página web com seu código de rastreamento da HubSpot instalado.
  • Na barra de ferramentas do Chrome, clique no ícone de engrenagem.
  • Na caixa de diálogo, selecione URL visitada e clique em Próximo.

  • Adicione o nome do evento e, opcionalmente, adicione uma descrição. Clique em Próximo
  • Clique em Adicionar para adicionar uma página. Você pode adicionar várias páginas a um único evento. 
  • No campo URL da página insira o URL para o qual você deseja para rastrear as visitas.
  • No campo Nome, insira um nome para a página. Este nome estará disponível nos dados da propriedade do evento na propriedade chamada Nome de rastreamento.
  • Clique em Criar evento.

O HubSpot começará a acompanhar o evento. Saiba como analisar o evento no HubSpot.

Criar um evento de elemento clicado com a extensão de eventos para o Chrome

  • Navegue até uma página web com seu código de rastreamento da HubSpot instalado.
  • Na barra de ferramentas do Chrome, clique no sprocket icon.
  • Na caixa de diálogo, selecione Elemento clicado.

  • Clique em Próximo
  • Adicione o nome do evento e, opcionalmente, adicione uma descrição. Clique em Próximo
  • Para selecionar um elemento na página para rastrear, clique em Adicionar.  Selecione um elemento na página para rastrear. Você pode adicionar vários elementos clicados a um único evento. 
  • Clique em um elemento na página para criar um evento de elemento clicado. No exemplo abaixo, o evento de elemento clicado rastreará cliques no link dos principais aspectos.

  • Na caixa de diálogo, o seletor de CSS do elemento será gerado automaticamente. Insira um Nome para o elemento que está a acompanhar. Este nome estará disponível nos dados da propriedade do evento na propriedade chamada Nome de rastreamento. Opcionalmente, adicione uma descrição e clique em Avançar.
  • Para continuar a adicionar elementos adicionais ao seu evento, clique em Adicionar e selecione outro elemento.
  • Para concluir e salvar 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. Nesse caso, você deve modificar o seletor. 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 Exibir evento no HubSpot para visualizar o novo evento de elemento clicado em seu painel de eventos.

O HubSpot começará a acompanhar o (s) elemento(s). Saiba como analisar o evento no HubSpot

Entenda e recupere os seletores de elementos

Você pode identificar um elemento por seu ID HTML, classe HTML ou usando um seletor de jQuery.

  • ID DO HTML: insira o ID do elemento que você deseja rastrear. Por exemplo, se seu elemento clicado estiver configurado<button id="log-in">, você inseriu o login.
  • Classe HTML: insira a classe do elemento que você deseja rastrear. Por exemplo, se seu elemento clicado estiver configurado como<button class="bigCTA">, você poderia inserir bigCTA.
  • seleção de jQuery: insira o seletor de jQuery do elemento que deseja rastrear.

ID

Para localizar e usar um ID do elemento:

  • Clique com o botão direito na página com o elemento que você está direcionando e selecione Exibir origem da página ou Inspecionar.
  • Clique no elemento. Você deve ver o atributo de ID na linha do código (por exemplo, id="unique-element-name").
  • Copie o valor da ID e cole-o (por exemplo, neste caso, unique-element-name) no campo HTML ID sem as marcas de orçamento. Por exemplo, para um elemento que inclui id="get-started-marketing-hub", você inseriria get-started-marketing-hub no campo.

Classe

Um evento de elemento clicado pode identificar um elemento por seu atributo de classe. 

 

Observação:

  • quando vários elementos em uma página compartilham a mesma classe, apenas o primeiro elemento na página contará para a conclusão do evento. Portanto, você só deve usar a classe como um identificador quando nenhum outro elemento na página compartilhar essa classe. Se o elemento não tiver uma classe exclusiva, é recomendável usar o ID.
  • Se você não conseguir atualizar o código-fonte de um elemento para adicionar uma classe ou ID exclusivos, é recomendável usar a extensão do Chrome para configurar o evento, pois o HubSpot atribuirá um identificador mais específico.

 

Para encontrar uma classe do elemento e usá-la para o evento:

  • Clique com o botão direito na página com o elemento que você está direcionando e selecione Exibir origem da página ou Inspecionar.
  • Clique no elemento. Você deve ver o atributo de classe na linha do código (por exemplo, class="unique-element-name").
  • Copie o valor da classe e cole-o no campo Classe HTML sem as marcas de orçamento. Por exemplo, para um elemento que inclui no campo.  
    • Quando um elemento tem várias classes, você pode usar qualquer uma de suas classes como alvo. Por exemplo, se um elemento inclui class="cta--primary cta--medium homepage-sales", você pode inserir cta--primary, cta--medium ou homepage-sales no campo Classe HTML. No entanto, certifique-se de que nenhum outro elemento compartilhe essa classe.
    • Ao entrar em várias classes, use 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, você deseja criar um evento de elemento clicado usando um seletor jQuery para o para o seguinte elemento:

<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 a classe do elemento, você pode usar um seletor jQuery para direcionar a propriedade href do elemento inserindo o seguinte no campo do seletor jQuery:

[href='https://www.hubspot.com/products/marketing/get-started']

 

Saiba mais sobre os seletores compatíveis.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.