Last active
June 9, 2022 10:12
-
-
Save mbaersch/8cc6419f3a2b16f6c8641a828460d06e to your computer and use it in GitHub Desktop.
Timed Visibility Observer - HTML-Tag für Piwik PRO Tag Manager zur zeitgesteuerten Auslösung von Visibility Trigger Events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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').innerText; | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
HTML-Tag für Piwik PRO Tag Manager zur zeitgesteuerten Auslösung von Visibility Trigger Events
Schreibt Events und weitere Infos in die Datenschicht, wenn bestimmte Elemente sichtbar wird UND optional) eine Mindestdauer in Millisekunden seit dem Laden der Seite vergangen ist. Kann einmalig oder bei jeder Einblendung ausgelöst werden.
Kann als Alternative zu "einfachem" Content Tracking eingesetzt werden (siehe https://piwikpro.de/blog/content-tracking-mit-dem-piwik-pro-tag-manager-implementieren/).
Verwendung
Im Block "AB HIER ANPASSEN" unten für jedes Element, das vermessen werden soll, einen Aufruf der Funktion
setElementVisibilityObserver()
mit den folgenden Parametern einfügen:selector
: CSS-Selector für das zu beobachtende Elementtiming
: optionale Mindestdauer seit Laden der Seite in Millisekunden. Wenn angegeben, muss die Dauer vergangen sein, bevor das (ggf. einzige) Event für dieses Element ausgelöst wird.unique
: true angeben, wenn das Event nur einmal ausgelöst werden soll. Sonst werden alle Sichtbarkeits-Ereignisse in die Datenschicht geschrieben, wenn Timing-Bedingung zutrifft.Nutzung für Trigger
Mit dem jeweiligen Event mit dem Namen
tvo.visibility
, das zur Generierung von Triggern dient, werden folgende Schlüssel in die Datenschicht geschrieben:visibleElement
: Referenz aus Elementtyp, Id und Name des auslösenden Elements (für Trigger-Bedingungen)visibleElementTiming
: Dauer seit Laden der Seite bis zum Auslösen des Events in MillisekundenvisibleElementTimingSeconds
: obiger Wert in Sekunden (gerundet)visibleElementThresholdSeconds
: Mindestdauer in Sekunden, wenn angegebenBeispiele
Sichtbarkeit eines bestimmten Links am Ende einer Seite nach Ablauf der berechneten Lesezeit für die Seite:
setElementVisibilityObserver('p.nlink', minimalReadingTime(), true);
Achtung: Wenn die hier exemplarisch genutzte Funktion
minimalReadingTime()
genutzt werden soll, muss mit ziemlicher Sicherheit der Selektor für das Hauptinhalts-Element angepasst werden.Ergebnis in dataLayer nach Auslösung:
Einfache, einmalige Sichtbarkeit des Footer-Tags ohne Zeit-Schwellwert:
setElementVisibilityObserver('footer', 0, true);
Jede Sichtbarkeit eines Werbe-Elements (div) mit der Klasse "dynamic-ads":
setElementVisibilityObserver('div.dynamic-ads');