Tidio

From Growth Agency Wiki
Jump to navigation Jump to search

Tracking In Tag Manager

Tidio has an API for tracking.

https://docs.tidiochat.com/#fully-loading-tidio-chat

To use this, create a custom HTML tag In tag manager and trigger it on any pages Tidio runs on.

Add this script to the custom HTML:

<script>
(function() {
	function tidioDataLayerEvent( eventName ) {
		var dataLayer = window.dataLayer || [];
		dataLayer.push({'event' : 'tidio-' + eventName});
	}
	if (window.tidioChatApi) {
		window.tidioChatApi.on('open', function(){ tidioDataLayerEvent('opened') });
		window.tidioChatApi.on('close', function(){ tidioDataLayerEvent('closed') });
		window.tidioChatApi.on('messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
		window.tidioChatApi.on('messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
		window.tidioChatApi.on('preFormFilled', function(){ tidioDataLayerEvent('messaged-form') });
	} else {
		document.addEventListener('tidioChat-open', function(){ tidioDataLayerEvent('opened') });
		document.addEventListener('tidioChat-close', function(){ tidioDataLayerEvent('closed') });
		document.addEventListener('tidioChat-messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
		document.addEventListener('tidioChat-messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
		document.addEventListener('tidioChat-preFormFilled', function(){ tidioDataLayerEvent('messaged-form') });
	}
})();
</script>

This sets up the events in the datalayer to be used in triggers:

tidio-opened
tidio-closed
tidio-messaged-to
tidio-messaged-from
tidio-messaged-form