Audio Player tracking clicks

Ask the Community General Questions
1

Is there already a way for the media player widget to track clicks on the media player? Generate a link that can be used with Google Analytics, or another way? The clicks & listens re: the media player widget is the main feature of my site I’d like to track. Still looking. Thanks!

1 Like
2

Hi @Suzanne_Malek and welcome to Community :rocket:

Could you please specify what clicks you’d like to track (clicks on Play button or maybe another widget elements)?

1 Like
3

Thanks. I would like to track at minimum clicks on the Play button, and if anything else is possible, I’d like to know. Such as duration of play, tracks played, or anything else.

Mainly I’d just like to know when someone clicks the Play button. Doesn’t seem to count as a local action on the site so it’s currently untracked.

4

Hi @Suzanne_Malek !

We are happy to tell you that you can track clicks on Play button.

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>

Where you need to replace UA-ID with your actual website ID for Google Analytics.

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>

Also, you can track clicks on these elements:

image

Here is the code you need to add right before closing </body> tag:

<script>
  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 getTrackTitle(event) {
    let el = event.target;
    let trackTitle;
    while (el || !trackTitle) {
      el = el.parentNode;
      if (el?.classList?.value.indexOf('PlaylistItem__PlaylistItemComponent-sc') > -1) {
        trackTitle = el.querySelector('[class*="PlaylistItem__Title-sc"]')?.innerHTML;
      }
    }
    return trackTitle;
  }

  document.addEventListener('click', function (event) {
    const trackTitle = getTrackTitle(event);

    sendEvent({
      action: 'click',
      category: `Elfsight Player (${trackTitle})`,
      label: `Elfsight Player (${trackTitle})`
    });
  }, true);
</script>

Please check it and let me know if it helped :slightly_smiling_face: