<script>
  //******************************************************************************************************
  //HTML-Tag für Piwik PRO Tag Manager zur zeitgesteuerten Auslösung von Visibility Trigger Events.  
  //******************************************************************************************************

  //Hinweise siehe https://gist.github.com/mbaersch/8cc6419f3a2b16f6c8641a828460d06e 

  //Optimierung:
  //Die Funktion minimalReadingTime() kann entfernt werden, wenn feste Zeiten oder keine Mindestdauer
  //benötigt wird. Ebenso kann dieser Kommentar entfernt werden, um nicht die Ladezeit des Tag Managers 
  //zu belasten. 
  
  //******************************************************************************************************

  //Eigene Startzeit statt Wert aus dataLayer 
  window.tvo_start = window.tvo_start || Date.now();
  
  var tvo_observer = tvo_observer || new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true) {
      var minTime = parseInt(entries[0].target.getAttribute('data-tvo-mintime') || 0);
      var elTiming = (Date.now() - tvo_start);
      if (minTime <= elTiming) {
        var elRef = entries[0].target.localName || entries[0].target.tagName || entries[0].target.nodeName || ""; 
        elRef += (entries[0].target.id) ? "#" + entries[0].target.id : "" + 
                 (entries[0].target.className) ? "." + entries[0].target.className.replaceAll(' ', '.') : ""; 
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({event: "tvo.visibility", 
                               visibleElement: elRef, 
                               visibleElementTiming: elTiming, 
                               visibleElementTimingSeconds: Math.round(elTiming / 1000), 
                               visibleElementThresholdSeconds: Math.round(minTime / 1000),
                              });
        if (entries[0].target.getAttribute('data-tvo-unique')) this.unobserve(entries[0].target);  
      }
    }
  }, { threshold: [0]});

  var setElementVisibilityObserver = setElementVisibilityObserver || function(selector, timing, unique = false) {
    var o = document.querySelector(selector);
    if (!o) return false;
    if (timing) o.setAttribute('data-tvo-mintime', timing);
    if (unique === true) o.setAttribute('data-tvo-unique', '1');
    tvo_observer.observe(o);
  };
  
  //Minmale Lesezeit für Sichtbarkeit der Tag-Aufzählung am Ende des Blogbeitrags nach Ablauf der minimalen Lesezeit als Event  
  function minimalReadingTime() {
    //Hauptelement eines Blog-Contents selektieren: Bei Verwendung unbedingt ANPASSEN an eigenes Layout! 
    var txt = document.querySelector('#col_content').textContent;
    if (!txt) return 0;
    var lng = txt.split(" ").length;
    var l = lng / 300;
    //sehr schnelle 350 Worte / Minute Lesezeit oder mindestens 30 Sekunden zurückgeben
    lng = (lng == 0) ? 30 : l * 60;
    return Math.round(lng * 1000);
  }  
  
  //******************************************************************************************************
  //AB HIER ANPASSEN
  //Hier Selektoren für zu beobachtende Elemente und optional Mindestzeit als Schwellwert angeben, 
  //ab dem das Event gefeuert werden soll
  //******************************************************************************************************
  
  //Beispiele: 
  //setElementVisibilityObserver('p.nlink', minimalReadingTime(), true);
  //setElementVisibilityObserver('#footer', 2000, true);
    
</script>