<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>