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
- 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.
- 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
- 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.
- 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.
- HTML ID: digite o ID do elemento que você quer 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ê quer rastrear. Por exemplo, se seu elemento clicado estiver configurado como<button class="bigCTA">, você poderia inserir bigCTA.
- jQuery selector: digite o jQuery selector do elemento que você quer rastrear.
- 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.
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 pelo seu HTML ID, classe HTML, ou usando um seletor jQuery.
ID
Para encontrar e usar a identificação de um 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 de ID e cole-o (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", você 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 vários elementos de uma página partilham a mesma classe, apenas o primeiro elemento da página irá contar para a conclusão do evento. Portanto, você só deve usar a classe como um identificador quando nenhum outro elemento da página compartilhar essa classe. Se o elemento não tiver uma classe única, é recomendado o uso de identificação.
- Se você não conseguir atualizar o código fonte de um elemento para adicionar uma classe ou ID única, é recomendável usar a extensão Chrome para configurar o evento, pois o HubSpot irá atribuir um identificador mais específico.
Para encontrar a classe de um 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 HTML Class sem as aspas. Por exemplo, para um elemento que inclui no campo
- Quando um elemento tem múltiplas classes, você pode usar qualquer uma de suas classes como um alvo. Por exemplo, se um elemento inclui
class="cta--primary cta--medium homepage-sales", você poderia inserir cta--primary, cta--medium, ou homepage-sales no campo HTML Class. No entanto, certifique-se de que nenhum outro elemento compartilhe essa classe.
- Ao juntar várias classes, utilize o seguinte formato:
class1.class2.class3.
Seletor de jQuery
Você também pode usar os seletores de jQuery completo para direcionar elementos. Isto é útil se o elemento que você está alvejando não tem um ID ou classe, ou você precisa ser mais específico
Por exemplo, você deseja criar um evento de elemento clicado usando um seletor 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</a>
Ao invés de usar o ID ou classe do elemento, você poderia usar um seletor jQuery para direcionar a propriedade href do elemento entrando o seguinte no campo jQuery selector :
[href='https://www.hubspot.com/products/marketing/get-started']
Saiba mais sobre osselectores suportados .