This thread is a mess. Can someone tidy up and clarify how to track whatsapp using tag manager and analytics simply please.
Sure!
- If you want to track your WhatsApp Chat widget via GTM, just add this code to the Custom JS field 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);
});
- For tracking clicks on the Start Chat button using Google Analytics, please add this part of the code to your websiteās
<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, 'button[title="WhatsApp"]', {
action: 'click',
category: 'Click WhatsApp Chat',
label: 'Click WhatsApp Chat'
});
},
true
);
</script>
Check it out and let me know how it works 
Hi Max,
this is outdated or not?
How can i track the Conversion with Google Tag manager / GA4?
Do you have a tutorial for that?
1 Like
Hi there @user12028 
If you want to track conversions, the GTM code (1st code in this thread) should work perfectly fine for you.
Check it out and let me know if it helped
Hi Max,
i added the code under custom JS.
But it still dont work for me.
By Google tag manger i created a trigger with a event called click-start-chat-button.
Do i miss something?
1 Like
For open Close it work, but not for the click on chat button
1 Like
Got you!
Iāll check it with the devs and will get back to you a bit later
Thank you for waiting @user12028
Please try to use this code instead and let me know if it worked:
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*="MessageField__MessageButtonContainer-sc"]',
'Click Start Chat Button',
true
);
});
Hi max! I just tried to implement it for Google Tag Manager and failed.
- So, i added the code to my WA Plugin in the āCustom JS Editorā and publshed it.
- I created a trigger that looks for āClick Start Chat Buttonā without the āā.
- I created a new Tag that looks for that trigger.
- I open the preview and checkl if the tag fires. I does not.
1 Like
Hi there @Patrick_Prziborsky
Could you please send me a link to the page where your widget is installed? Iāll be happy to look into this for you
Sure:
Here some screenshots from GTM. The GA4-WA_Chat is the Tag that should fire.
The other one is for clicking any other WhatsApp links on my site. It works but has nothing to do with the plugin.
1 Like
Thank you so much for such a detailed description, thatās much appreciated!
Iāll discuss it with the devs and will get back to you tomorrow
Hi Max,
I tackled the problem by utilizing ChatGPT since my JavaScript skills are practically non-existent. The only ācodeā I can write is PowerShell. 
I managed to get it running, but during debugging, it appeared that the āgtagā variable was not defined, even though my integrations in Squarespace seemed fine.
After some testing, ChatGPT provided the following code, which works. Essentially, we manually define the gtag, and the rest goes over my head.
<script>
(function() {
if (typeof gtag === 'undefined') {
window.dataLayer = window.dataLayer || [];
window.gtag = function() {
dataLayer.push(arguments);
};
gtag('js', new Date());
gtag('config', 'GTM-XXXXXXX');
}
function sendAnalyticsEvent(action, category, label) {
if (typeof gtag !== 'undefined') {
gtag('event', action, {
event_category: category,
event_label: label
});
dataLayer.push({
event: action,
event_category: category,
event_label: label
});
}
}
function addClickEvent(el, label) {
el.addEventListener('click', () => {
sendAnalyticsEvent('Click Start Chat Button', 'Elfsight Chat Widget', label);
});
}
function checkElement(selector) {
return new Promise((resolve) => {
if (document.querySelector(selector) === null) {
requestAnimationFrame(() => checkElement(selector).then(resolve));
} else {
resolve(true);
}
});
}
checkElement('[class*="MessageField__MessageButtonContainer-sc"]').then(() => {
document.querySelectorAll('[class*="MessageField__MessageButtonContainer-sc"]').forEach(el => {
addClickEvent(el, 'Click Start Chat Button');
});
});
})();
</script>
Perhaps this will be helpful to you. I would really appreciate a native integration with the plugins since conversion tracking is essential, in my opinion.
Iām still hoping for an official solution. Currently in this script, only the send button is tracked, as thatās what Iām interested in right now.
Best regards
2 Likes
Hi there @Patrick_Prziborsky
Our devs confirmed that your solution is great, as the code below was the only missing part to make it work:
window.dataLayer = window.dataLayer || [];
window.gtag = function() {
dataLayer.push(arguments);
};
gtag('js', new Date());
gtag('config', 'GTM-XXXXXXX');
Let me know if this explains things or if you have any further questions
A post was split to a new topic: How to track clicks in WhatsApp Chat using GA or GTM