Timed Visibility Observer - HTML-Tag für Piwik PRO Tag Manager zur zeitgesteuerten Auslösung von Visibility Trigger Events

timed-visibility-observer.html

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

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 Element
• timing: 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 Millisekunden
• visibleElementTimingSeconds: obiger Wert in Sekunden (gerundet)
• visibleElementThresholdSeconds: Mindestdauer in Sekunden, wenn angegeben

Beispiele

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');