Struktur på data i Plausible - noter

plausible-example-audio-custom-events

Hej Rasmus

Jeg har gjort mig lidt tanker om, hvordan strukturen kunne være i Plausible, så vi får mest muligt ud af de data, som vi får hjem.

Plausible har netop skiftet ud i deres setup. De muligheder i forhold til props har jeg prøvet at udnytte her. Dengang vi satte det op på Mindhelper-skolen.dk fik jeg puljet events på en skør måde og det gør data svære at læse.

Helt overordnet, så er min tanke at det må være eventtypen, der er den første kategorisering:

- Feedback (nogen har trykket på en tommeltot)
- Audio (noget er sket på en lydfil)
- Video (noget er sket på en video)
- Forms (noget er sket på en formular)

Og derefter kan det så kategoriseres i et niveau mere via deres nye custom properties:

- Feedback
-- Thumbs up (en bruger har trykket tommeltot op)
-- Thumbs down (en bruger har trykket tommeltot ned)
-- Message sent (en bruger har efter at have afgivet sin stemme sendt en uddybende besked)
-- Post type (er det en artikel, lektion eller andet, der er givet en tommeltot til)

- Audio
-- Startet (en lydfil er startet - der bliver noget med at sikre, at det kun sker en gang per session for den specikke lydfil)
-- 10 % completed (en lydfil er blevet afspillet 10 %)
-- 50 % completed (en lydfil er blevet afspillet 50 %)
-- 90 % completed (en lydfil er blevet afspillet 100 %)
-- Eventuel modul, som lydfilen er en del af (gør det let at se overordnet stats for et helt modul)
-- Lektion og eller artikel som lydfilen er en del af

Video
-- Startet (en lydfil er startet - der bliver noget med at sikre, at det kun sker en gang per session for den specikke lydfil)
-- 10 % completed (en lydfil er blevet afspillet 10 %)
-- 50 % completed (en lydfil er blevet afspillet 50 %)
-- 90 % completed (en lydfil er blevet afspillet 100 %)
-- Eventuel modul, som videoen er en del af (gør det let at se overordnet stats for et helt modul)
-- Lektion og eller artikel som videoen er en del af 

Forms
-- Formular-navnet / ID

Kunne det mon fungere?












// Eksempler fra Mindhelper-skolen.dk - primært som inspiration til, hvordan vi styrer tolerancen på eventet, når en lydfil kører, så den kun bliver trigget en gang
// Has been cut out and cleaned to focus on plausible-tracking. Might not be working code. Has not been tested :)

(function () {
  const audio = document.getElementsByTagName('audio');

  document.addEventListener('click', function (event) {
    for (let i = 0; i < audio.length; i++) {
      const lessonDay = audio[i].closest('.lesson-wrapper').querySelector('.lesson-day').innerHTML;
      const lessonTitle = audio[i].closest('.lesson-wrapper').querySelector('.lesson-title').innerHTML;

      var fiftyPercentFired = false;
      var ninetyPercentFired = false;
      var tenPercentFired = false;
      const TOLERANCE = 0.002

      audio[i].addEventListener('timeupdate', function () {
        if (progressionPercent >= (10 - TOLERANCE) && progressionPercent <= (10 + TOLERANCE)) {
          console.log(tenPercentFired);
          if (tenPercentFired === false) {
            plausible('10percent', { props: { type: 'Audio', module: lessonDay, lesson: lessonTitle } })
            tenPercentFired = true;
          }
        }
        if (progressionPercent >= (50 - TOLERANCE) && progressionPercent <= (50 + TOLERANCE)) {
          if (fiftyPercentFired === false) {
            plausible('50percent', { props: { type: 'Audio', module: lessonDay, lesson: lessonTitle } })
            fiftyPercentFired = true;
          }
        }
        if (progressionPercent >= (90 - TOLERANCE) && progressionPercent <= (90 + TOLERANCE)) {
          if (ninetyPercentFired === false) {
            plausible('90percent', { props: { type: 'Audio', module: lessonDay, lesson: lessonTitle } })
            ninetyPercentFired = true;
          }
        }
      });
      }
    }
  });
})();



(function () {

  /**
  / Get content from meta-tags related to the video
  */
  function getMeta(metaName) {
    const metas = document.getElementsByTagName('meta');

    for (let i = 0; i < metas.length; i++) {
      if (metas[i].getAttribute('name') === metaName) {
        return metas[i].getAttribute('content');
      }
    }

    return '';
  }
  
  // Get all video on the current page
  var videos = document.querySelectorAll('.video-responsive');

  
  videos.forEach(function (video) {
    // Hook into the iframe of the Vimeo-video
    var videoFrame = video.getElementsByTagName('iframe');
   
    // Instantiate a new Vimeo player for the iframe
    var player = new Vimeo.Player(videoFrame[0]);
    
    // Retrieve module-number and lesson-number metadata, defaulting to 100 if not present
    // Default is a bit weird with 100 .. but is applied to all videos that are not a part of a course on the site
    var modul = getMeta('acmodul') || 100;
    var lesson = getMeta('aclesson') || 100;
    var type = 'Video'

    // Initialize flags for each tracking point
    var tenPercentFired = false;
    var fiftyPercentFired = false;
    var ninetyPercentFired = false;

    
    player.on('timeupdate', function (data) {
      // Define a tolerance value to ensure we fire the event close to the target percentages
      var TOLERANCE = 0.002
      
      // Check if 10%, 50%, or 90% of the video has been watched
      // If the corresponding percentage has been reached and the event has not yet been fired
      // fire a plausible event, and set the corresponding flag to true
      // This is done for 10%, 50%, and 90% curently watched
      // TODO: Could be written a bit more flexible :)
      if (data.percent >= (0.1 - TOLERANCE) && data.percent <= (0.1 + TOLERANCE)) {
        if (tenPercentFired === false) {
          plausible('10percent', { props: { type: type, module: modul, lesson: modul + ' - ' + lesson } })
          tenPercentFired = true;
        }
      }
      if (data.percent >= (0.5 - TOLERANCE) && data.percent <= (0.5 + TOLERANCE)) {
        if (fiftyPercentFired === false) {
          plausible('50percent', { props: { type: type, module: modul, lesson: modul + ' - ' + lesson } })
          fiftyPercentFired = true;
        }
      }
      if (data.percent >= (0.9 - TOLERANCE) && data.percent <= (0.9 + TOLERANCE)) {
        if (ninetyPercentFired === false) {
          plausible('90percent', { props: { type: type, module: modul, lesson: modul + ' - ' + lesson } })
          ninetyPercentFired = true;
        }
      }
    });
  });
})();