Implementando o JavaScript de forma Avançada

Na maioria dos casos a instalação da tag de navegação é simples. Você precisa colar o nosso código no rodapé do site (antes do fechamento do </body>), inserir as <meta> tags referentes a cada tipo de página e identificar o visitante durante a navegação através de um ID de Cliente ou ID de Sessão. Com isto, nós passamos a receber os eventos de navegação do seu site.

Existem casos, entretanto, onde esta implementação não é viável, como em  aplicações de página única ou quando se usa o Google Tag Manager. Nestes cenários você precisa programar a sua aplicação para disparar os eventos em um período de tempo controlado por você.

Por que isto é necessário?

A implementação básica do nosso código dispara o evento de navegação assim que a página termina de carregar, similar ao método  onload() do JavaScript ou ao método .ready() do jQuery. 

Quando a navegação ou o fluxo do site são gerenciados através de requisições assíncronas, como o Ajax por exemplo, o navegador do usuário não faz redirecionamentos de página. Logo, o disparo automático não é executado e por esse motivo, não capturamos as informações de navegação do visitante em sua página.

Quem usa o Google Tag Manager também tem uma situação similar: os scripts são inseridos pelo GTM de forma assíncrona e mediante gatilhos, que podem ou não acontecer na hora do método  onload().

Para permitir a captura da navegação nestes dois cenários (Single Page ou GTM) você deve usar uma implementação diferente, onde os eventos de navegação são disparados pela sua aplicação, dentro de um prazo programado previamente e descrito no JavaScript que irá implementar.

Como disparar as tags programaticamente

Ao implementar sua página existem vários elementos que são carregados em tempos distintos. O objetivo do script abaixo é "aguardar" a execução dos scripts existentes em sua página e somente após isso, ser carregado.

Para implementar as nossas tags em cenários de fluxos assíncronos você precisa:

1. Desligar o disparo automático

Para que você gerencie o envio de eventos é preciso, primeiro, desligar o disparo automático.
Para fazê-lo você deve inserir o parâmetro  post_on_load: false na hora de carregar o nosso script, da seguinte forma:

<script type="text/javascript">   
var __kdt = __kdt || [];
__kdt.push({"public_key": "TEE973BEC88"});   
__kdt.push({"post_on_load": false});   // Envio automático desativado   
	(function() {   
		var kdt = document.createElement('script');   
		kdt.id = 'kdtjs'; kdt.type = 'text/javascript';   
		kdt.async = true;    
		kdt.src = 'https://i.k-analytix.com/k.js';   
		var s = document.getElementsByTagName('body')[0];   
		s.parentNode.insertBefore(kdt, s);   
	})(); 
</script>

2. Fazer o disparo do evento

Uma vez que a página esteja carregada você deve chamar o método  Konduto.sendEvent(), passando como parâmetros o tipo de evento e a categoria da página:

var page_category = 'home'; 
(function() {     
	var period = 300;     
	var limit = 20 * 1e3;     
	var nTry = 0;     
	var intervalID = setInterval(function() {         
		var clear = limit/period <= ++nTry;         
		if ((typeof(Konduto) !== "undefined") &&
		    (typeof(Konduto.sendEvent) !== "undefined")) {             
		Konduto.sendEvent('page', page_category); // Disparo programático de evento             
		clear = true;         
		}         
	if (clear) { 
clearInterval(intervalID); 
	}     
}, 
period); 
})(page_category);

Essa implementação não alterará a performance do seu site e será imperceptível ao visitante da sua página.

Com estes passos é possível controlar, a qualquer momento, o disparo de novos eventos de navegação e garantir assim que os dados colhidos pelo nosso coletor cheguem juntamente com os dados do pedido encaminhado para nossa API.

É importante também enviar eventos com contexto de página para que possamos ter uma visualização mais abrangente dos eventos de navegação. Para tal, utilize os códigos exemplificados abaixo:

<!-- Processo de checkout -->
	 <script type="text/javascript">   
		Konduto.sendEvent('page','checkout'); 
	</script>

 <!-- Detalhe de produto --> 
	<script type="text/javascript">   
		Konduto.sendEvent('page','product'); 
	</script> 

<!-- Página de 'Esqueci minha senha' --> 
	<script type="text/javascript">   
		Konduto.sendEvent('page','password-reset'); 
</script><br>