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 de elementos clicados

Ultima atualização: Junho 30, 2021

Disponível para

Marketing Hub Enterprise

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.

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 elemento clicados podem ser criados de duas maneiras:

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

Crie eventos de elemento clicados com a extensão do Chrome

Instale extensão de eventos para o Chrome

  • Na sua conta da HubSpot, clique no ícone de configurações settingsna 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.

Erro ao criar um evento com a extensão do evento 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 ícone de engrenagem.
  • Na caixa de diálogo, selecione Elemento clicado.

    chrome-extension-create-clicked-element-event
  • Clique em Próximo. Você poderá selecionar um elemento na página para rastrear.
  • Clique em um elemento na página para a qual será criado 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 evento e 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 criar manualmente o evento ou adicionar uma tag de identificação exclusiva ao elemento.

  • 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 elemento. Saiba como analisar o evento no HubSpot.

Crie manualmente o evento usando um seletor de ID, classe ou jQuery

  • Na sua conta da HubSpot, navegue até Relatórios > Ferramentas de análise.
  • Clique em Personalizar Eventos de Comportamento.
  • No canto superior direito, clique em Criar evento.
  • No painel direito, insira um nome para seu evento e selecione Elemento clicado.

    create-custom-clicked-element-event-type
  • Clique em Próximo.
  • Selecione como você deseja identificar o elemento clicado na página. Saiba mais sobre como encontrar identificadores em uma página de site.
    • 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.
       create-custom-clicked-element-ID
  • Clique em Próximo.
  • Por padrão, o elemento clicado será rastreado em todas as páginas com o código de rastreamento da HubSpot instalado. Para rastrear apenas cliques de elemento em uma página específica, selecione uma Página específica e insira o URL da página.
  • Clique em Salvar.

Depois de criar o evento, o HubSpot começará a acompanhar o elemento. 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 seletor de jQuery.

ID

Um evento de elemento clicado pode identificar um elemento por seu atributo de ID e detectar quando ele é clicado.

Para exibir 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 ID sem as marcas de orçamento.
 

Classe

Um evento de elemento clicado pode identificar um elemento por seu atributo de classe e detectar quando ele é clicado.

  • 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 (por exemplo, neste caso, unique-element-name) no campo Classe sem as marcas de orçamento.
 

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. Saiba mais sobre os seletores compatíveis.