Como escutar os eventos do Chameleon através do dataLayer no Google Tag Manager

No último post aprendemos a como instalar o Chameleon através do Google Tag Manager, caso você não tenha visto clique aqui pois é conteúdo obrigatório para esse post :D

Beleza, feito isso agora temos o Chameleon implementado dentro do Google Tag Manager total acesso a função global do Chameleon, você pode acessar esses métodos através de "chmln" para gente começar a escutar os eventos. Pois bem, os eventos serão acessados através do método "chmln.on" que irá nos disponibilizar acesso a algumas escutas em "chmln.on('tour:event')" :

• Quando um tour é iniciado;
• Quando um tour é concluído;
• Quando o usuário sai do tour no meio do processo;
• Quando uma etapa é carregada;
• Quando um botão é clicado dentro do tour que leva o usuário para próxima etapa.

Existem outras escutas e até mesmo outras ocasiões dentro do próprio "tour:event" que você pode dar uma olhada direta na documentação deles aqui, beleza?

Normalmente aconselhamos que esse tipo de escuta fique vinculado ao código fonte para não quebrar a camada de responsabilidade entre o Google Tag Manager e o Código fonte, porém, tendo em vista que a instalação por si só já estaria dentro do GTM.

Acredito que podemos unir o script de instalação com o de geração de eventos, não é algo que aconselhamos, mas se o processo estiver documentado e alinhado com teu time internamente acredito que não teria nenhum problema.

Adicionando ao script do Chameleon o disparo dos eventos personalizados

Primeiro é interessante entender o que vamos implementar:

/* Tour event listener */
chmln.on('tour:event', function(eventName, options)  {
	dataLayer.push({
		'event': eventName, //Started, Completed, Exited, Step Seen, Button Clicked
		'chameleonParams': options
	})
});

Através do método "on" iremos criar uma escuta para que toda vez que houver uma interação do usuário com um tour do Chameleon, iremos disparar uma informação para dentro do Google Tag Manager através da camada de dados.

Como vocês podem perceber o utilizaremos os argumentos automáticos para passar tanto como nome do evento como informações personalizadas:

  dataLayer.push({
    'event': eventName, /
    'chameleonParams': options
 })

Dentro do argumento "eventName" conseguimos recuperar os seguintes eventos:

• Started;
• Completed;
• Exited;
• Step Seen;
• Button Clicked.

Dentro do argumento "options", vou ser sincero na documentação do Chameleon não existe um guia de referência para o que se trata cada um dos argumentos passados em "options". Montei uma lista com as opções para cada tipo de evento, mas não da para saber ao certo o que cada um desses campos esperam.

• Started;
  • elapsed
  • step_id
  • tour_id
  • tour_name
  • tour_progress
• Step Seen;
  • tour_progress
  • components
  • copy_body
  • copy_button_next
  • delight
  • match
  • media
  • position_relative_to
  • trigger
  • elapsed
  • step_id
  • tour_id
  • tour_name
• Exited;
  • button_action_kind
  • button_id
  • button_index
  • button_text
  • button_tour_action
  • elapsed
  • step_id
  • tour_duration
  • tour_id
  • tour_name
  • tour_progress
• Completed Tour;
  • button_action_kind
  • button_id
  • button_index
  • button_text
  • button_tour_action
  • elapsed
  • step_id
  • tour_duration
  • tour_id
  • tour_name
  • tour_progress
• Button Clicked
  • button_action_kind
  • button_id
  • button_index
  • button_text
  • button_tour_action
  • elapsed
  • step_id
  • text
  • tour_id
  • tour_name
  • tour_progress

Algumas das informações que são passadas são meio que obvias, mas antes de implementar qualquer evento da uma estudada nesses parâmetros e vê o que faz sentido para vocês.

Agora vamos para a implementação :D Dentro do seu Google Tag Manager abra a TAG que você criou no último post e adicione o script que estudamos logo abaixo do método que identifica os usuários.

<script>
/* Chameleon script */
!function(d,w){var t="{{chameleonSecretKey}}",c="chmln",m="identify alias track clear set show on off custom help _data".split(" "),i=d.createElement("script");if(w[c]||(w[c]={}),!w[c].root){w[c].accountToken=t,w[c].location=w.location.href.toString(),w[c].now=new Date;for(var s=0;s<m.length;s++){!function(){var t=w[c][m[s]+"_a"]=[];w[c][m[s]]=function(){t.push(arguments);};}();}i.src="https://fast.trychameleon.com/messo/"+t+"/messo.min.js",i.async=!0,d.head.appendChild(i);}}(document,window);
  /* Identificando os usuários */
  chmln.identify({uid: {{userId}}});
  /* Tour event listener */
  chmln.on('tour:event', function(eventName, options)  {
	dataLayer.push({
		'event': eventName, //Started, Completed, Exited, Step Seen, Button Clicked
		'chameleonParams': options
	})
  });
</script>

E aí meu chapas, é só salvar a tag e correr para o abraço :D Só não esquece que para usar esses eventos personalizados para disparar tags dentro do Google Tag Manager você precisa criar esses acionadores dentro do Google Tag Manager ;)