Tidio: Difference between revisions

From Growth Agency Wiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:
Tidio has an API for tracking.
Tidio has an API for tracking.


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


To use this, create a custom HTML tag In tag manaer and trigger it on any pages tidio runs on.
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:
Add this script to the custom HTML:
Line 17: Line 17:
}
}
if (window.tidioChatApi) {
if (window.tidioChatApi) {
window.tidioChatApi.on('ready', function(){ tidioDataLayerEvent('ready') });
window.tidioChatApi.on('open', function(){ tidioDataLayerEvent('opened') });
window.tidioChatApi.on('open', function(){ tidioDataLayerEvent('opened') });
window.tidioChatApi.on('close', function(){ tidioDataLayerEvent('closed') });
window.tidioChatApi.on('close', function(){ tidioDataLayerEvent('closed') });
window.tidioChatApi.on('messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
window.tidioChatApi.on('messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
window.tidioChatApi.on('messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
window.tidioChatApi.on('messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
window.tidioChatApi.on('preFormFilled', function(){ tidioDataLayerEvent('messaged-form') });
window.tidioChatApi.on('preFormFilled', function(){ tidioDataLayerEvent('preform-filled') });
window.tidioChatApi.on('preFormFilled', function(){ tidioDataLayerEvent('preform-filled') });
} else {
} else {
document.addEventListener('tidioChat-open', function(){ tidioDataLayerEvent('opened') });
document.addEventListener('tidioChat-ready', function(){ tidioDataLayerEvent('ready') });
document.addEventListener('tidioChat-close', function(){ tidioDataLayerEvent('closed') });
document.addEventListener('tidioChat-close', function(){ tidioDataLayerEvent('closed') });
document.addEventListener('tidioChat-messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
document.addEventListener('tidioChat-messageFromOperator', function(){ tidioDataLayerEvent('messaged-to') });
document.addEventListener('tidioChat-messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
document.addEventListener('tidioChat-messageFromVisitor', function(){ tidioDataLayerEvent('messaged-from') });
document.addEventListener('tidioChat-preFormFilled', function(){ tidioDataLayerEvent('messaged-form') });
document.addEventListener('tidioChat-preFormFilled', function(){ tidioDataLayerEvent('preform-filled') });
}
}
})();
})();
Line 33: Line 35:
</pre>
</pre>


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


<pre>
<pre>
Line 40: Line 42:
tidio-messaged-to
tidio-messaged-to
tidio-messaged-from
tidio-messaged-from
tidio-messaged-form
tidio-preform-filled
</pre>
</pre>

Latest revision as of 10:03, 15 August 2023

Tracking In Tag Manager

Tidio has an API for tracking.

https://docs.tidio.com/docs/listeners_events

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('ready', function(){ tidioDataLayerEvent('ready') });
		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('preform-filled') });
		window.tidioChatApi.on('preFormFilled', function(){ tidioDataLayerEvent('preform-filled') });
	} else {
		document.addEventListener('tidioChat-ready', function(){ tidioDataLayerEvent('ready') });
		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('preform-filled') });
	}
})();
</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-preform-filled