Como Configurar o Event Tracking da ActiveCampaign em seu Site

event tracking activecampaign

Entender quais páginas os seus contatos visualizam usando o Site Tracking da ActiveCampaign é uma ferramenta incrivelmente poderosa.

O Site Tracking permite que você realize ações quando uma página é visualizada; como ativar uma sequência de follow up, ou ajustar um lead score para medir engajamento.

O próximo nível do Site Tracking é o Event Tracking.

O Event Tracking é similar ao Site Tracking, mas oferece a você a flexibilidade de rastrear muito mais do que apenas uma visualização de página.

Você pode criar eventos personalizados para rastrear virtualmente qualquer comportamento online – o quanto de um vídeo alguém viu, até qual altura da página um visitante desceu, se eles clicaram em um botão, adicionaram um item ao carrinho de compra, etc.

Eventos personalizados são importantes porque muitas vezes uma visualização de página não conta a história completa.

Existem poucas coisas que não podem ser rastreadas se você sabe escrever o código.

Neste post eu quero guiar você um pouco sobre como configurar o Event Tracking para situações específicas.

Mesmo que isso não seja algo que você tenha a capacidade técnica para fazer sozinho, vai te ajudar a entender o que é possível e você poderá contratar alguém para fazer a configuração.

Vários dos nossos Consultores Certificados podem te ajudar com isso.

Neste artigo nós vamos aprender sobre…

  • Como enviar a Atividade do Formulário da ActiveCampaign para o Google Analytics
    • Usando JavaScript
    • Usando um Tag Manager
  • Enviando atividade on-site para a ActiveCampaign
    • Usando JavaScript
    • Usando um Tag Manager

Enviando a Atividade do Formulário da ActiveCampaign para o Google Analytics

Entender os pequenos eventos comportamentais que levam a uma compra é uma peça vital do quebra-cabeça do marketing digital e da automação de marketing.

Ao dividir objetivos maiores em componentes mais administráveis, você pode identificar as áreas de cada funil que estão gerando atrito para os seus usuários, e se concentrar nelas.

Essa prática ajuda você a priorizar o que funciona ou não, e a remover limitações no crescimento do seu negócio.

Para este exemplo eu vou usar esta loja e-commerce que vende posters de viagem da NASA, e usar a janela modal para oferecer aos visitantes um cupom exclusivo de 15% de desconto.

Como estou gastando dinheiro no tráfego de anúncios, eu quero saber quantos dos meus visitantes fecham a página sem converter, então não segmentarei visitantes similares no futuro.

Para estes exemplos, eu baixei um tema simples do Start Bootstrap com o qual eu vou trabalhar, e você pode pegar o projeto inteiro do meu repositório do GitHub.

Para facilitar, eu só estou usando o formulário Modal simples, que eu criei na minha conta ActiveCampaign.

Para implantar o formulário, eu já instalei o snippet de script dentro do tema.

Usando o JavaScript

Aviso: O assunto a seguir é um pouco técnico. Não fique intimidado e nem o ignore! Estamos aqui para ajudar, e você sempre pode pedir conselhos específicos em nosso fórum de Desenvolvedores.

Para rastrear nosso evento de envio de formulário usando o JavaScript, nós precisamos ficar atentos para o evento onsubmit, e quando o escutarmos, avisar o Google Analytics sobre o evento.

Nossas “ferramentas” para este projeto são um editor de código, o evento onsubmit do JavaScript, e o event tracking do Google Analytics.

Você também vai precisar se certificar de que tem acesso para editar o código na página.

Leia mais sobre o evento onsubmit.

Leia mais sobre o event tracking da ActiveCampaign.

Tudo o que você precisa fazer para rastrear o momento em que o formulário for enviado é incluir este código em qualquer lugar que o formulário exibir.

O melhor lugar para fazer isso é, provavelmente, logo antes da tag </body> de fechamento.

<!-- BEGIN: Custom JavaScript -->
<script>
var activeForms = document.getElementsByClassName('_form_11');
var myForm = activeForms[0];

myForm.addEventListener("submit", () => {
  console.log('The form was submitted');
  ga('send', {
    hitType: 'event',
    eventCategory: 'Forms',
    eventAction: 'Submit',
    eventLabel: 'Modal Form'
  });
});

</script>
<!-- END: Custom JavaScript -->

Vamos dividir cada linha deste código e explicar o que ela faz.

<!-- BEGIN: Custom JavaScript -->
<script>
var activeForms = document.getElementsByClassName('_form_11')
var myForm = activeForms[0];

Nós começamos definindo uma variável activeForms como uma matriz de todos os formulários contidos na página com a classe ._form_11.

O lugar mais fácil para obter o nome da classe é pela ferramenta inspetor CSS na tela do criador de formulários da ActiveCampaign.

activecampaign event tracking formulários

Na verdade, deve haver apenas um formulário com esse nome de classe na página.

Se houver mais de um, as coisas ficam um pouco instáveis e você poderá não ter tudo configurado da forma que quer.

Como nós só queremos o formulário único, nós definimos a variável myForm igual ao primeiro item na matriz activeForms.

myForm.addEventListener("submit", () => {
  console.log('The form was submitted');
  /* other stuff here */  
});

Em seguida, anexamos um listener de evento ao nosso formulário, para o evento “enviar”.

Quando isso acontecer, acionamos nosso retorno anônimo. Eu coloquei um log simples aqui para que você possa testar o envio do formulário antes de adicionar o código de event tracking do Google Analytics.

ga('send', {
  hitType: 'event',
  eventCategory: 'Forms',
  eventAction: 'Submit',
  eventLabel: 'Modal Form'
});

A última coisa a fazer é colocar o código do event tracking do Google Analytics. Essa versão está usando a implementação analytics.js, porque o clássico foi depreciado.

Usando um Tag Manager

O meu tag manager favorito para rastrear e gerenciar eventos é o tag manager apontar e clicar do Big Picture.

O Big Picture usa uma interface visual simples e permite que você organize seus eventos para centenas de serviços terceirizados, como a ActiveCampaign.

Eles têm uma integração nativa da ActiveCampaign e você pode escolher quais eventos você quer enviar para quais serviços.

Isso significa que podemos optar por enviar apenas um punhado dos eventos que queremos rastrear para a ActiveCampaign, ou podemos rastrear todos.

Rastrear um evento de envio de formulário com a Big Picture é simples. Crie um projeto, conecte o Google Analytics e instale o snippet de rastreamento do Big Picture no seu site.

O Big Picture vai verificar se você já tem o snippet do Google Analytics instalado no seu site. Se tiver, ele vai usar aquele snippet.

Se não tiver, então vai instalar o snippet de rastreamento do Google Analytics para você.

activecampaign event tracking integrado

A partir daí, é só uma questão de apontar e clicar! Crie uma nova ação, escolha o elemento que você quer rastrear e salve a ação.

activecampaign event tracking personalização

Personalize em quais páginas do seu site você quer que a ação envie o evento para o Google Analytics usando a correspondência de parâmetro e curinga, e está tudo pronto.

É só clicar em publicar no canto superior direito e os seus eventos começarão a ser enviados para o Google Analytics dentro de minutos.

Enviando Atividade On-Site para a ActiveCampaign

Visitar um post de blog, e ler um post de blog, ou visualizar uma página que tem um vídeo e assistir um vídeo são duas coisas completamente diferentes.

Em vez de simplesmente medir se um usuário visualiza uma página, use os eventos para medir o quão bem o seu conteúdo está sendo consumido e quando o usuário cai fora.

Neste exemplo, nós vamos enviar mensagens para um usuário tentando fazer com que ele “adote” um conteúdo.

Nós vamos dar pedacinho por pedacinho do conteúdo por um período de 2-3 semanas.

Porém, se o usuário consumir todo o conteúdo na fonte, nós vamos pular para o final da automação usando o objetivo.

Para fazer isso, precisamos configurar um evento de rolagem de página, para quando o usuário tiver rolado pelo menos 50% da página.

Usando o JavaScript:

Para enviar um evento para a ActiveCampaign (e para o Google Analytics, porque não) quando um usuário estiver em 50% da rolagem da página, nós precisamos dividir a tarefa em seções administráveis:

  • A primeira coisa que precisamos fazer é descobrir quantos pixels equivalem a 50% da rolagem.
  • Nós precisamos nos atentar para qualquer hora que o usuário rolar, e quando ele o fizer, verificar se ele passou da marca dos 50%.
  • Se ele não passou dos 50%, ignore, se ele passou, envie um evento para a ActiveCampaign.
  • Por fim, como apenas queremos disparar o evento uma vez por visita na página, precisamos evitar que o evento dispare novamente se o usuário subir e descer mais uma vez.

Primeiro, vamos descobrir quantos pixels equivalem ao meio do caminho.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
</script>

Fazemos isso pegando a altura total da rolagem e dividindo por 2. Nós armazenamos esse número em uma variável chamada de halfwayHeight, simples até aqui.

O próximo passo, é chamar uma função toda vez que a janela for rolada. Para fazer isso, vamos adicionar um listener de evento ao elemento da janela.

O listener do evento vai marcar toda vez que a janela emitir o evento “rolar” e vai chamar nossa função de retorno se ele detectar.

Para garantir que funciona, vamos colocar um log de nota no console.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
window.addEventListener("scroll", () => {
  console.log("The window was scrolled");
})
<script>

Leia mais sobre o evento “onScroll”.

Agora quando rolamos a página, nós vemos nossa nota sendo gravada várias vezes no console.

activecampaign event tracking barra de rolagem
activecampaign event tracking

Certamente não queremos enviar tantos eventos assim para a ActiveCampaign, isso seria loucura! Só queremos mandar um evento quando o usuário rolar até a metade do caminho.

Para fazer isso, vamos verificar toda vez que o usuário rolar para ver se ele chegou à metade, se passou da nossa halfwayHeight.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
window.addEventListener("scroll", () => {
  if (document.body.scrollTop > halfwayHeight) {
    console.log("scrolled past halfway");
  }
})
<script>
activecampaign event tracking barra de rolagem
activecampaign event tracking barra de rolagem

Ótimo! Estamos quase lá, mas ainda estamos disparando muitos eventos. A última coisa a se fazer é disparar o evento apenas uma vez.

Nós fazemos isso definindo a variável hasNotScrolledHalfway e configurando seu valor para true.

E então, ao rolarmos para além da metade pela primeira vez. Nós registramos no console, e atualizamos o valor para false.

Depois, nós damos entrada em nossa declaração if se hasNotScrolledHalfway também for true.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
var hasNotScrolledHalfway = true;
window.addEventListener("scroll", () => {
  // check if the scroll is past halfway
  // and the event hasn't fired yet
  if (document.body.scrollTop > halfwayHeight && hasNotScrolledHalfway) {
    // the user HAS scrolled halfway, so update the variable
    hasNotScrolledHalfway = false;
    console.log("Scrolled past halfway for the first time");
    active.track("", {})    
  }
})
<script>

Agora, quando o usuário rolar para além da metade pela primeira vez, nós vamos registrar no console, mas não mais de uma vez.

activecampaign event tracking
activecampaign event tracking codigo

Agora que cuidamos do evento de rolagem, precisamos garantir que a ActiveCampaign sabe sobre ele.

Para isso, vamos usar o Event Tracking API da ActiveCampaign. Vamos definir uma função que faz uma chamada AJAX para o endpoint do Event Tracking.

E então, quando o usuário rolar além da metade, nós chamamos essa função.

// our previous code is all above here ☝

// create a short function to fire the event tracking snippet. 
function scrolledHalfwayEvent() {


  // what we do here, is log a successful event to the console
  // or catch any errors we have
  var xhttp = new XMLHttpRequest();  
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log("Recorded halfway scroll event");
      console.log(this.responseText);
    } else {
      console.log(this.responseText)
    }
  };


  // change these to match your ActiveCampaign settings

  // your ActiveCampaign id. You can get this from your AC settings 
  var actid = ""; 

  // your event key, also in AC settings
  var eventKey = ""; 

  // Name for event you want to track.
  var event = "Scrolled Halfway" 

  var visit = {
    email: ""; // the user's email address
  }

  // get the url of the page and send it as event data
  var eventData = window.location.href;

  // build the eventString based on the variables you just edited above ☝
  var eventString = "actid=" + actid 
                    + "&key=" + eventKey 
                    + "&event=" + event 
                    + "&visit=" + encodeURIComponent(visit) 
                    + "&eventdata" + eventData;

  // send the event to the ActiveCampaign API with our event values
  xhttp.open("POST", "https://trackcmp.net/event", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(eventString);
}
</script>

Isso é um pouco difícil, então tentei comentar o código o máximo possível.

Estamos criando nossa chamada AJAX usando a função embutida XMLHttpRequest.

Se essa é a sua primeira vez trabalhando com XMLHttpRequest, não se preocupe, não tem quase nada a ver com XML.

Leia mais sobre solicitações JavaScript AJAX.

Existem alguns poucos lugares em que você precisará mudar o código com base em algumas das suas configurações de conta da ActiveCampaign.

// your ActiveCampaign id. You can get this from your AC settings 
var actid = ""; 

// your event key, also in AC settings
var eventKey = ""; 

// whatever event you want to track.
var event = "Scrolled Halfway"  

// identify the user using the visit parameter
var visit = {

  // the user's email address
  email: ""
}

Nós também queremos ter certeza de que diferenciamos quais páginas um usuário rolou além da metade.

Para fazer isso, nós vamos preencher os dados do evento com uma linha da url da página atual. Isso vai nos permitir filtrar o valor do evento dentro da ActiveCampaign.

var eventData = window.location.href;

Ainda está me acompanhando?

Ótimo! Estamos quase acabando.

Tudo o que falta é chamar nosso novo scrolledHalfwayEvent() de dentro do nosso listener de evento (quando o usuário rolar a metade pela primeira vez).

<script>
var halfwayHeight = document.body.scrollHeight / 2;
var hasNotScrolledHalfway = true;
window.addEventListener("scroll", () => {
  // check if the scroll is past halfway
  // and the event hasn't fired yet
  if (document.body.scrollTop > halfwayHeight && hasNotScrolledHalfway) {
    // the user HAS scrolled halfway, so update the variable
    hasNotScrolledHalfway = false;

    // call our scrolledHalfwayEvent function to track the event
    scrolledHalfwayEvent();
  }
})

// we define our scrolledHalfwayEvent() function down here👇

É isso! Agora você está registrando eventos de rolagem de página para a ActiveCampaign!

Parabéns, se você chegou até aqui, você está no caminho para conseguir otimizar o que quiser no funil.

Usando Um Tag Manager

Enviar tracking events para a ActiveCampaign usando o Big Picture é bem parecido com como configuramos o tracking do Google Analytics com o Big Picture na primeira seção.

Nós só precisamos garantir que nossa conta na ActiveCampaign está configurada na seção de integrações.

activecampaign event tracking rolagem de pagina

Em vez de configurar uma ação que dispara sempre que um elemento é clicado, escolha a ação de evento “Rolagem de Página”.

A ação de evento Rolagem de Página vai disparar, por padrão, toda vez que um usuário rolar a página 25%, 50%, 75% ou 100%.

Você pode configurar a ação para apenas enviar o evento quando o usuário rolar 50% da extensão da página. Para fazer isso, mude o “Tipo” de Ação de “Todos os Eventos” para “Rolagem de 50%”.

Dê um nome ao seu evento, salve-o e publique suas mudanças.

activecampaign event tracking por pagina

Você pode ajustar em quais páginas você quer que o evento dispare, assim como os parâmetros para incluir quando você estiver enviando o evento.

Ao terminar de personalizar o seu evento no Big Picture, publique suas mudanças (canto superior direito) e os seus eventos de rolagem de página devem começar a aparecer.

Conclusão

Uma boa higiene de event tracking é importante.

Registrar a atividade da ActiveCampaign no Google Analytics assegura que você está medindo com precisão os seus gastos com anúncio, e pode calcular efetivamente o custo por lead.

Manter a ActiveCampaign informada do comportamento dos seus contatos nos seus sites ajuda você a entender efetivamente seus interesses.

Entender os interesses e objetivos dos seus contatos é crucial para saber como enviar a mensagem correta para os usuários corretos no momento correto.

Espero que essas duas formas de manter o seu event tracking organizado possam ajudar você a alcançar o resultado. Agora vá e desenvolva esse negócio! Comece o seu teste gratuito na ActiveCampaign agora.

Sites de exemplo: Remake Detroit & Space Gear Store

Um teste gratuito vale mais que mil palavras.

Comece hoje mesmo. Não precisa de cartão de crédito.