Track How Many Users Click On Widget

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

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:

I agree, having a way to see more robust analytics, specifically clicks. would be very helpful.

@Max thanks so much for the code. I have added it to my Squarespace site with my Google tag ID, but now I’m not sure where to find the data this will generate. Do I look on Google Analytics? Or somewhere else?

Thanks!

1 Like

Hey there and welcome to the Community, @Melanie :waving_hand:

Thank you so much for the feedback!

Sure, here is an article explaining where you can find this data :slightly_smiling_face: - Google Analytics 4 (GA4): Where to find my events - Elfsight Help Center

Guys please add a click data, just like view data, it would be so helpful!

1 Like

Hi there, @Agirsaglam :waving_hand:

Thanks for pointing us in this direction! We’ll have it in mind and see for more votes from the Community.

As for now, you can track clicks using the GA code shared in this message :slightly_smiling_face:

Status Update: the feature moved to the Design stage! :tada:

We’ll keep you posted on the further progress :slight_smile:

Quick update: the feature was moved to the development! :tada:

1 Like

Hey everyone!

We’re happy to share that the Google Analytics integration is already available in the Website Translator :tada:

Find more info in this post - Website Translator: Track user interactions with your widget using Google Analytics integration