Hi all 
I spent some hours thinking about how can I track in google analytics the WhatsApp button’s click as it’s a JS button…
Does anyone have the same problem? If so, how solved?
Thanks
1 Like
Hello @Yuri and welcome to Elfsight Community 
Our devs have prepared a Google Analytics code for you. Please add this part of the code to your website :
<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>
Where you need to replace UA-ID with your actual website ID for Google Analytics.
And then just add the rest of the script right before closing tag:
<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
});
}
}
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('.eapp-all-in-one-chat-root-layout-component')
.then(() => {
const clicker = (el, label) => {
document.querySelector(el).addEventListener('click', () => {
sendAnalyticsEvent({
action: 'click',
category: 'Elfsight Chat Widget',
label: label
})
})
}
clicker('[class^="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
clicker('a[title="WhatsApp"]', 'Click to WhatsApp Chat');
})
})
</script>
Please check it and let me know if it helped 
Hi,
I’m also interested in Yuri’s question.
It’s unclear to me if the second script should replace the original script for implementing the whatsapp widget. Or that both the scripts Max shared should be added, together with the script for adding the widget to your website.
Thanks!
Also the format is for the old universal analytics looking for a UA code and sending events in the action, category, label format. Is there a way to setup for GA4?
1 Like
Hi @user3124 and welcome to Community
You should add both scripts.
If any questions come up or any assistance is needed, please let us know. We’ll be happy to advise
1 Like
Hi @Damien_Fegan! Happy to see you with us, welcome 
I’ll discuss it with our devs and get back to you a bit later.
I’m glad to confirm that this code will also work correctly. All you need to do is to add your G-ID instead of UA-ID to the code I’ve provided previously.
Could you please try using the code and let me know if this works correctly for you?
Hi Yuri i’ve tried installing this code with tag manager and am getting no events fired in GA4. when i look at the code it is setup with the old UA event structure of event_category event_label GA4 events are event name and parameter. Is there any update on how to track events in GA4 or send conversion events to google ads.
Thank you
@Damien_Fegan thank you for your comment!
I’ve consulted our developers regarding this matter, and this is what they are saying:
It’s important to know the way you made the installation: via GTM or directly on your website, because the codes a bit differ for each type.
If you choose a direct installation, then you’re welcome to use the code provided above, it should work. However, if it has to be installed via GTM, we’ll have to alter the code a bit and install it bearing in mind a couple of peculiarities.
Please let me know which type of installation is more preferable for you
Hi Helga. The Idea would be by tag manager. We have a few clients using this and it would make it much easier to implement across the board.
Got it, @Damien_Fegan!
In this case, here’s what needs to be done:
You need to create a tag that will only contain the click script:
<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
});
}
}
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('.eapp-all-in-one-chat-root-layout-component')
.then(() => {
const clicker = (el, label) => {
document.querySelector(el).addEventListener('click', () => {
sendAnalyticsEvent({
action: 'click',
category: 'Elfsight Chat Widget',
label: label
})
})
}
clicker('[class^="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
clicker('a[title="WhatsApp"]', 'Click to WhatsApp Chat');
})
})
</script>
The tag should have a page initialization trigger, and the analytics tag should be added to the page separately.
Please let me know if it helped or if you have other questions
I copied that code into a custom html tag to trigger on every page but it would not publish due to errors in the code. see attached image
I’m so sorry that we didn’t respond sooner to your message!
Could you please send me a direct link to the website where the widget is installed?
Thank you!
Please try to use this code instead and let me know how it worked:
<script>
(function () {
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, '[class*="Bubble__BubbleComponent"]', {
action: "click",
category: "Elfsight Chat Widget",
label: "Open/Close Chat Widget"
});
eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp']", {
action: "click",
category: "Elfsight Chat Widget",
label: "Click to WhatsApp Chat"
});
},
true
);
})();
</script>
Hi Max
It worked! For your information, when you first click the chat it fires 2 outbound clicks to the data layer the first
{
pagePostType: “page”,
pagePostType2: “single-page”,
pagePostAuthor: “admin”,
event: “click”,
gtm: {
uniqueEventId: 12,
start: 1692181207572,
allowlist: undefined,
blocklist: undefined,
whitelist: undefined,
blacklist: undefined,
priorityId: undefined
},
tagTypeBlacklist: undefined,
eventModel: {
event_category: “Elfsight Chat Widget”,
event_label: “Open/Close Chat Widget”
}
}
The second
{
pagePostType: “page”,
pagePostType2: “single-page”,
pagePostAuthor: “admin”,
event: “click”,
gtm: {
uniqueEventId: 13,
start: 1692181207572,
allowlist: undefined,
blocklist: undefined,
whitelist: undefined,
blacklist: undefined,
priorityId: undefined
},
tagTypeBlacklist: undefined,
eventModel: {
event_category: “Open or Close All-in-one Widget”,
event_label: “Open or Close All-in-one Widget”
}
}
Then when you click start chat and it opens up whatsapp it fires a third, which I was able to set up a trigger for the event label “Click to WhatsApp Chat”
{
pagePostType: “page”,
pagePostType2: “single-page”,
pagePostAuthor: “admin”,
event: “click”,
gtm: {
uniqueEventId: 14,
start: 1692181207572,
allowlist: undefined,
blocklist: undefined,
whitelist: undefined,
blacklist: undefined,
priorityId: undefined
},
tagTypeBlacklist: undefined,
eventModel: {
event_category: “Elfsight Chat Widget”,
event_label: “Click to WhatsApp Chat”
}
}
Happy to hear that the code worked for you
However, I didn’t quite understand the additional info you’ve provided. Could you please elaborate on it?
I thought a video would be easier, hopefully this will help
https://vimeo.com/855010603/627acd883e
2 Likes
Thanks!
I’ve shared this video with our devs. I’ll get back to you once I receive any reply from them
You can mark it as complete as I’m able to track with what you have done.
Thank you