Track How Many Users Click On Widget

Wishlist Website Translator
1

It would be nice to see how many users are clicking on the widget. It’s nice to see how many views the widget gets, but how many people click on it would be nice. More specifically how many Users are selecting to change the their current language. Example would be, say we see 100,000 views in a month, but we had 10,000 clicks. Meaning 10% of Users engage with our widget.

1 Like
2

Hi there, @CopperstateFarms :waving_hand:

Thanks for sharing your idea with us! We agree that it would be great to have the click statistics right in the dashboard. If more users upvote this idea, we’ll try to consider it in the future :slightly_smiling_face:

As for now, you can track clicks using the Google Analytics code . Please add this part of the code to your website <head>:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>

In the code above, you need to replace G-ID with your actual website ID for Google Analytics. 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,
      eventTargetLanguage: config.targetLanguage
    });
  }

  if (typeof gtag !== "undefined") {
    gtag('event', config.action, {
      'event_category': config.category,
      'event_label': config.label,
      'event_target_language': config.targetLanguage
    });
  }
}

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']")?.innerText;

    eappsDispatchAnalyticsEvent(event, languageDropdownItemSelector, {
      action: 'translation_on_click',
      targetLanguage: languageName,
      category: 'translation',
      label: 'Translation on click'
    });
  }
}, true);
</script>

Please let me know if it helps and if you have any other questions :slightly_smiling_face: