Add support for play/pause event tracking

Ask the Community General Questions
1

Hi all,
I think that having some first party support for handling play/pause event in the music widget will be great!

Ideally, every kind of user tracking event will be useful but, for just a simple implementation, play should be enough

Thanks

1 Like
3

Hey there and welcome to the Community, @Smart_Noise_Team :wave:

Glad to say that it’s possible to track the clicks on this button using a Google Analytics code. . 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*="Play__Component-sc"]', {
        action: 'click',
        category: 'Elfsight Player Play Button',
        label: 'Elfsight Player Play Button'
      });
    }, true);
  </script>

Try it out and let me know how it worked :slightly_smiling_face: