For Facebook, Analytics, GTM and others.
Or maybe add the possibility to assign events (onclick)
For Facebook, Analytics, GTM and others.
Or maybe add the possibility to assign events (onclick)
Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all!
Original Votes: 7
Original comment from Diego transferred from the previous Wishlist portal:
Hello folks,
Thank you for submitting this feature request and for sharing your ideas!
We will definitely consider this option for the widget future updates, and if you come up with any other suggestions - please feel free to write them in the comments here. Your feedback is a huge help for our dev team
Thank you!
Is there any update on whether we can add conversion tracking to the WhatsApp chat? It was requested some time ago but can’t see any updates on this as yet?
Hello there @user372
I am really sorry, but the conversion tracking option isn’t supported in our app. Once we receive any updates from our dev team, I’ll inform you here
Just in case, I’d like to tell you that you can track clicks via Google Analytics or GTM.
Google Analytics:
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 </body>
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, '[class*="Bubble__BubbleComponent"]', {
action: 'click',
category: 'Open or Close WhatsApp Chat Widget',
label: 'Open or Close WhatsApp Chat Widget'
});
eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp Chat']", {
action: 'click',
category: 'Click WhatsApp Chat',
label: 'Click WhatsApp Chat'
});
}, true);
</script>
Just in case, we have an article that describes how to work with each of them - Google Analytics 4 (GA4): Where to find my events.
GTM:
This code should be added 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);
});
Hi! I should place the second script in the header too, but below all?
Hi @Yuri
Oh, I am sorry for missing that! The 2nd part of the GA code should be added before closing </body>
tag
Hi there, after adding the code, the event is not appearing on my GA and GTM as per shown. Can you please help to check if the code is correct? The code is inputted into my “header”
Hi @Alex_Thng, happy to see you in our community!
I’ve checked the screenshots you provided (they were really helpful!) and this is what I’ve found:
</script>
is missing in the first part of the code, please add it here:Could you please make these corrections and let me know if it helped?