Salesmate Chat and Form Event Listener
How to track Salesmate Chat and Form Interactions with google tag manager
By utilizing Google Tag Manager or your preferred tag management system, along with the Salesmate event listener, you can effectively track and measure user interactions with the Salesmate chat widget and the submission of embedded Salesmate forms on your website. This valuable data will provide insights into how these interactions impact your website’s conversion rates and the number of Salesmate form submissions you get, including the channel contributing to the conversion.
Tracking Salesmate form submissions as conversions can greatly aid in retargeting and optimizing your advertisements. You can achieve this by firing your pixels upon Salesmate form submissions.
Whether you opt for Google Tag Manager or Piwik Pro TMS, the event listener seamlessly transmits Chatlio chat interaction events to various analytics tools, including Google Analytics (GA4), Mixpanel, PiwikPro, and more.
To begin the implementation process in GTM, create a custom HTML tag and incorporate the Salesmate event listener script. Assign a descriptive name to the tag and set it to trigger on either pageview or DOM ready.
Using the “DOM Ready” trigger is highly recommended.
The script actively listens for successful Salesmate form submissions and user interactions with the Salesmate chat widget embedded on your website. It captures relevant events and associated attributes, pushing them to the dataLayer.
The dataLayer event name assigned to all Salesmate events is “[salesmate_Event]“.
Next, establish a dataLayer variable to provide additional context for the event. The event variable is defined as follows:
[event_type] -> Indicates whether the interaction was a Salesmate “chat” or “form”.
[salesmate_action] -> This variable provides further details about the specific type of Salesmate action that occurred. Examples of these interactions include:
- Chat widget opened
- Chat widget closed
- Unread message count change
- Web form submitted
For the Salesmate form submission event, two additional dataLayer keys can be created as variables:
[salesmate_form_name] – Captures the name of the Salesmate form.
[salesmate_form_data] – Retains the Salesmate form data in an object format.
In the final stage of implementation, you will create your measurement tags, add your custom event trigger, apply the relevant variables as needed, preview your setup, and finally publish them.
<script>
//fires when salesmate chat widget is opened
window.addEventListener('SALESMATE_ON_WIDGET_SHOW', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'salesmate_Event',
'event_type': 'chat',
'salesmate_action': 'chat widget opened'
});
});
//fires when salesmate chat widget is closed
window.addEventListener('SALESMATE_ON_WIDGET_HIDE', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'salesmate_Event',
'event_type': 'chat',
'salesmate_action': 'chat widget closed'
});
} );
// fires when unread message count changes
window.addEventListener('SALESMATE_ON_WIDGET_COUNT_CHANGE', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'salesmate_Event',
'event_type': 'chat',
'salesmate_action': 'unread message count change'
});
});
//fires when salesmate form gets submitted
window.addEventListener("SM_FORM_SUBMITTED", function (e) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'salesmate_Event',
'event_type': 'form_submitted',
'salesmate_action': 'web form submitted',
'salesmate_form_name': e.detail.formName,
'salesmate_form_data': e.detail.formData
});
});
</script>
Video of how to use the listener
Related Event Listener
Unbounce Form
Chatlio
Wisepops
download the google tag manager recipe for tracking Salesmate Chat and Form Interactions
