We are incredibly grateful for sharing this invaluable feedback with us. Thank you so much!
If any questions come up or any assistance is needed, we are always here for you.
Have a great day 
You’re welcome max. Hopefully it will help some others in the future.
1 Like
Hi all,
I tried many times following Damien video, but as i dont understand much about coding i was not able to figure out…
Does any one offer this configuration as a paid service? My website is www.fercomaz.com.
thanks
1 Like
Hi @Yuri 
Damien showed how to set up a data trigger that only collects data labeled “Click to WhatsApp Chat.”
Have you faced any issues with the tracking of the clicks on WhatsApp Chat button, or you just decided to check the workaround by Damien?
Hi @Max
I really wanna to track whatsapp click in my squarspace website. I’ve followed several times the tutorial here. First i added the code in head:
<script>
document.addEventListener('DOMContentLoaded', () => {
function sendAnalyticsEvent(config) {
if (typeof ga !== "undefined") {
ga('send', 'event', {
eventAction: config.action,
eventCategory: config.category,
eventLabel: config.label
});
}
Than, added the second code in footer
"<script>
document.addEventListener('DOMContentLoaded', () => {
function sendAnalyticsEvent(config)...
clicker('[class^="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
clicker('a[title="WhatsApp"]', 'Click to WhatsApp Chat');
})
}}
However Its not tracking in GA. My intention is to know the source of the click. if they came from social/organic/paid etc.
Im doing right?
1 Like
1 Like
Hi @Yuri
I have to say that, unfortunately, there is no option to track the source of the click. I am really sorry!
However, if you’d like to track the number of clicks on the chat button, please replace the 2nd part of the code with this one:
<script>
document.addEventListener("DOMContentLoaded", () => {
function sendAnalyticsEvent(config) {
if (typeof ga !== "undefined") {
ga('send', 'event', {
eventAction: config.action,
eventCategory: config.category,
eventLabel: config.label
});
}
if (typeof gtag !== "undefined") {
gtag('event', config.action, {
'event_category': config.category,
'event_label': config.label
});
}
}
const registerEventSender = (selector, label, eventTarget) => {
if (eventTarget?.closest(selector)) {
sendAnalyticsEvent({
action: 'click',
category: 'Elfsight Chat Widget',
label: label
});
}
};
document.addEventListener("click", (e) => {
registerEventSender('[class*="Bubble__BubbleComponent"]', 'Open/Close Chat Widget', e.target);
registerEventSender('button[title="WhatsApp"]', 'Click to WhatsApp Chat', e.target);
});
});
</script>
Check it out and let me know if it worked for you 
Big thanks for your effort Damien!
Love it
You are a blessing
2 Likes
Hey there and welcome to the Community @user9693
Happy to see that the solution by Damien helped you.
In case you have another questions or any assistance is needed, just drop us a line. We’ll be happy to help
-
Google Analytics for user behaviors and audience segmenting is very important, How to get it after installing scripts and widget is live:
-
Mobile Medical Excellence in Dubai: Your Trusted Doctor On Call for Home, Hotel, or Office Services
Hi user10674, and thanks for becoming part of our Community. Your question is really important, so hang in there. The Staff is really good at solving issues and will get to your concern on Monday.
Hi can you provide similar code for Click To Call widget Data Layer Click Events?
Hi there @navnit1993
If you want to track just clicks on the widget bubble and the number, please add this part of the code to your website <head>:
<script async src="https://www.googletagmanager.com/gtag/js?id=**UA-ID** "></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '**UA-ID** ');
</script>
In the code above, you need to replace UA-ID with your actual website ID for Google Analytics. If you are using Google Analytics 4, you need to use G-ID instead of UA-ID (see screenshot). This article will help you find your ID - Find your Google tag ID.
And then just add the rest of the script right before closing tag:
<script>
function eappsDispatchAnalyticsEvent(event, selector, config) {
function sendEvent(config) {
if (typeof ga !== "undefined") {
ga('send', 'event', {
eventAction: config.action,
eventCategory: config.category,
eventLabel: config.label
});
}
if (typeof gtag !== "undefined") {
gtag('event', config.action, {
'event_category': config.category,
'event_label': config.label
});
}
}
function isHitClass(e, selector) {
return e.target && e.target.closest(selector)
}
if (isHitClass(event, selector)) {
sendEvent(config);
}
}
document.addEventListener('click', function (event) {
eappsDispatchAnalyticsEvent(event, '.eapp-click-to-call-window-phone', {
action: 'click',
category: 'Click to Call Button',
label: 'Click to Call Button'
});
eappsDispatchAnalyticsEvent(event, '.eapp-click-to-call-button-component', {
action: 'click',
category: 'Click to Call Open Button',
label: 'Click to Call Open Button'
});
}, true);
</script>
However, in your personal message, you’ve mentioned that you’d like to track Google Ads conversions and the code above won’t work in this case.
Nevertheless, it’s possible to track conversions via GTM and our devs will be happy to help you with it. I’ll contact you directly and let you know what info we need to implement this feature
A post was split to a new topic: How to track clicks in WhatsApp Chat via GTM or Google Analytics
Is there a way to implement this code via GTM?
Hello there @user10724
Sure! You just need to add this code to the Custom JS section on the Appearance tab of your widget’s settings:
function sendAnalyticsEvent(config) {
if (typeof ga !== "undefined") {
ga('send', 'event', {
eventAction: config.action,
eventCategory: config.category,
eventLabel: config.label
});
}
if (typeof gtag !== "undefined") {
gtag('event', config.action, {
'event_category': config.category,
'event_label': config.label
});
}
}
function rafAsync() {
return new Promise(resolve => {
requestAnimationFrame(resolve);
});
}
function checkElement(selector) {
if (document.querySelector(selector) === null) {
return rafAsync().then(() => checkElement(selector));
} else {
return Promise.resolve(true);
}
}
checkElement('[class*="Bubble__BubbleComponent"]')
.then(() => {
const addClickEvent = (el, label) => el.addEventListener('click', () => {
sendAnalyticsEvent({
action: 'click',
category: 'Elfsight Chat Widget',
label: label
});
});
const clicker = (el, label, all = false) => {
const addClickWithLabel = (el) => addClickEvent(el, label);
if (all) {
[...document.querySelectorAll(el)].forEach(addClickWithLabel);
} else {
addClickWithLabel(document.querySelector(el));
}
};
clicker('[class*="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
clicker('[class*="DefaultButton__DefaultButtonComponent-sc"]', 'Click Start Chat Button', true);
});
Give it a try and let me know if it worked
If it is not much to ask, can you please share step by step screen shots?
No problem!
Important: Custom JS operates only upon widget installation, not in preview mode.
This code should send events right to your GTM account. Check it out and let me know if it helped
2 Likes
What is the variables which are being send? and do you know how do i set up the tracker in GTM?
2 Likes
Please let me consult with the developers on this matter. I’ll get back to you once I receive a response from them
2 Likes