Analytics on the views and clicks

Wishlist Sales Notification
1

Having the ability to check the analytics on the total views, unique views, avg notifications amount per viewer clicks and unique clicks. Really would be nice to have so I can make reports for clients and track the performance of the widget to scale it furfure or not

2 Likes
2

Hi there, @Cam_Hebeler :waving_hand:

Many thanks for the feedback!

Unfortunately, there is no way to track this stats right from the widget. However, this is a nice idea and we’ll try to think about it in the future.

As for now, we’ve got a Google Analytics code for tracking clicks. 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 in the Custom JS field on the Style tab of your widget’s settings:

function eappsDispatchAnalyticsEvent(event, selector, config, styles) {
  function sendEvent(config) {
    console.log(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, styles) {
    const shouldSendEvent = e.target && e.target.closest(selector);
    
    if (shouldSendEvent && styles) {
      const elementStyles = getComputedStyle(document.querySelector(selector));
      return Object.entries(styles).every(([property, value]) => elementStyles[property] === value);
    }
    
    return shouldSendEvent;
  }
  if (isHitClass(event, selector, styles)) {
    sendEvent(config);
  }
}
document.addEventListener('click', function (event) {
  eappsDispatchAnalyticsEvent(event, '[class*="ButtonBase__Ellipsis-sc"]', {
    action: 'click',
    category: 'Elfsight Sales Notification Widget',
    label: 'Click View Location'
  });
  
  eappsDispatchAnalyticsEvent(event, '[class*="notification__NotificationContainer-sc"]', {
    action: 'click',
    category: 'Elfsight Sales Notification Widget',
    label: 'Click Notification Link'
  }, { cursor: 'pointer' });
}, true);

Please try it out and let me know if it worked :slightly_smiling_face: