Advanced implementation of JavaScript

In most cases the installation of the navigation tag is simple. You need to paste our code into the footer of the website (before closing the </body>), insert the <meta> tags for each type of page, and identify the visitor during navigation through a Client ID or Session ID. In this way, we receive the navigation events of your website.

However, there are cases where this implementation is not feasible, as in  single-page applications or when using the Google Tag Manager. In these scenarios you need to set your application to trigger navigation events in a time period controlled by you.

Why is this necessary?

The basic implementation of our code triggers the navigation event once the page finishes loading, similar to the OnLoad() method of JavaScript or the .ready () of jQuery 

When the navigation or the flow of the site is managed through asynchronous requests, such as Ajax for example, the user's browser doesn't make page redirects. In this case, the automatic trigger does not run and therefore we do not capture the visitor's navigation information on your page.

Users of Google Tag Manager also have a similar situation: the scripts are inserted by GTM asynchronously with the use of triggers, which may or may not happen at the time of the OnLoad() method.

To enable capture of navigation in these two scenarios (Single Page or GTM) a different implementation must be used, where the navigation events are activated by its application within a time frame programmed in advance and described in the JavaScript that will be implemented.

How to activate the tags programmatically

When implementing your page, there are several elements that are loaded at different times. The goal of the script below is to "wait" for the implementation of the existing scripts in your page, to only after that, be loaded.

To implement our tags in scenarios with asynchronous flows you need to:

1. Turn off the automatic trigger

For you to manage sending events, it is necessary to first turn off the automatic trigger. To do this you must enter the parameter post_on_load: false at time of upload our script, as follows:

<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. Programing a trigger for an event

Once the page is loaded, you must call the method Konduto . sendEvent (), setting the event type and page category as parameters:

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.sendEvent) !== "undefined") {
  Konduto. sendEvent (' page ', page_category); Programmatic trigger event
  clear = true;
           }
 		 if (clear) {
		clearInterval(intervalID);
 	 }
	},
	period);
	})(page_category);

This implementation does not change the performance of your website and will be transparent to the visitor of your page.

With these steps it is possible to control, at any time, the triggering of new navigation events and thus ensure that the data collected by our collector arrive together with the data of the purchase order forwarded to our API.

It is also important to send events with page context in order for us to have a more comprehensive view of the navigation events. To do this, use the codes exemplified below:

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

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

<!-- Page of 'Forgot my password' -->
  <script type="text/javascript">
          Konduto.sendEvent('page','password-reset');
 </script><br>