In the reporting, I would like to see the most requested language translations. You could do the top 10, for example. This gives website owners an idea of which markets are the most important to them.
1 Like
Hi there, @user8387
You can track clicks on specific language options using 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 isHitClass(e, selector) {
return e.target && e.target.closest(selector);
}
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 eappsDispatchAnalyticsEvent(event, selector, config) {
if (isHitClass(event, selector)) {
sendEvent(config);
}
}
const languageDropdownItemSelector =
"[class*='eapps-website-translator'] [class*='dropdown-item__Wrapper-sc']";
document.addEventListener(
'click',
function (event) {
if (event.target.closest(languageDropdownItemSelector)) {
const languageName = event.target.querySelector(
"[class*='name__NameContainer-sc']"
)?.textContent;
eappsDispatchAnalyticsEvent(event, languageDropdownItemSelector, {
action: 'translation_on_click',
category: 'translation',
label: `Translation to ${languageName}`
});
}
},
true
);
</script>
Test it out and let me know if it worked