https://joerndyck-verlag.de/js/Audienceflow-Tracking2.js?3494

1// Event-Listener: Alle Elemente suchen, die eine Animation starten, wenn sie sichtbar werden.
2// Diese Funktion muss bei "Endless Scrolling" erneut aufgerufen werden, wenn neue Inhalte geladen werden, damit diese ins Array aufgenommen werden können.
3// Der "passive" Modus wird in älteren Browsern nicht unterstützt, ein Workaround ist hier: https://www.afasterweb.com/2017/08/23/passive-event-listeners-scroll-performance/
4window.addEventListener('load', 				BuildAnimationArray, {passive: true});
5
6// Event-Listener: Untersuchen, welche dieser Elemente im ViewPort sichtbar sind.
7window.addEventListener('scroll', 				FindMeHelper, {passive: true});
8window.addEventListener('load', 				FindMeHelper, {passive: true});
9window.addEventListener('resize', 				FindMeHelper, {passive: true});
10window.addEventListener('fullscreenchange', 	FindMeHelper, {passive: true});
11window.addEventListener('click', 				FindMeHelper, {passive: true});
12
13
14BinIchSichtbar_AlleElemente = [];
15ParentIstUnsichtbar = 'Nein';
16ViewerID = Math.floor(100000 + Math.random() * 900000); // sechsstelliger anonymer Identifier
17
18
19	
20function BuildAnimationArray() {
21
22	// Hier wird ein Array aufgebaut mit den IDs jener DIVs, deren Sichtbarkeit untersucht werden soll.
23	// Dies dient dazu, nicht jedes DIV untersuchen zu müssen, sondern möglichst nur eines pro Layout/Film.
24
25
26		
27	// Alle Tags suchen, die lauten: data-audienceflow="CountMeIfVisible"
28	var AlleGefundenenElemente = document.querySelectorAll('[data-audienceflow="CountMeIfVisible"]');
29	// console.log(AlleGefundenenElemente.length + ' Tags gefunden');
30	
31	// Alle gefundenen Tags abklappern
32	for (var i = 0; i < AlleGefundenenElemente.length; i++) {
33	
34		// Untersuchen, ob das DIV überhaupt eine ID hat. Falls nicht, wird eine ID hinzugefügt.
35		if (!AlleGefundenenElemente[i].hasAttribute("id")) {
36			AlleGefundenenElemente[i].setAttribute("id", "AudienceflowID_" + i)
37		}
38
39	
40		// ID des aktuellen Elements zum Array hinzufügen
41		BinIchSichtbar_AlleElemente.push(AlleGefundenenElemente[i].id);
42		// console.log('Neu im Array: ' + AlleGefundenenElemente[i].id);
43		
44		// Das Tag wird aus dem HTML entfernt, damit es nicht erneut gefunden wird und das Array somit keine doppelten IDs enthält.
45		AlleGefundenenElemente[i].removeAttribute("data-audienceflow");
46	}
47}
48
49
50
51
52function FindMeHelper() {
53
54	// console.log('###### FindMeHelper ######');
55	// console.log('BinIchSichtbar_AlleElemente: ' + BinIchSichtbar_AlleElemente);
56
57	
58	// Array mit zu beobachtenden DIVs abklappern
59	for (var i = 0; i < BinIchSichtbar_AlleElemente.length; i++) {
60		
61
62		// Aktuelles Element holen
63		var findMe = document.getElementById(BinIchSichtbar_AlleElemente[i]);
64		// console.log('Schleife ' + findMe.id);
65	
66		// Testen, ob es sichtbar ist
67		if (isInViewport(findMe)) {
68		
69			// console.log('In viewport! ' + findMe.id);
70			
71			
72			// Testen, ob ein Parent-Element unsichtbar gemacht wurde.
73			var Child_Element = findMe;
74			var Parent_Elements = [];
75			var Class_List = [];
76			ParentIstUnsichtbar = 'Nein';
77			
78			while (Child_Element.parentNode && Child_Element.parentNode.nodeName.toLowerCase() != 'body') {
79				
80				// Nächsthöheres Element als neues Child wählen
81				Child_Element = Child_Element.parentNode;
82				
83				// List der Klassennamen holen und in ein Array werfen
84				Class_List = Child_Element.classList;
85				// console.log('Parent-Klassen ' + Class_List);
86				
87				// Array mit Klassennamen abklappern, um zu prüfen, ob der Name "hidden" vorkommt
88				for (var x = 0; x < Class_List.length; x++) {
89					
90					if (Class_List[x].indexOf("hidden") >= 0) {
91					
92						// console.log('Parent-Klasse ist unsichtbar, Abbruch.');
93						ParentIstUnsichtbar = 'Ja';
94						break; // Schleife abbrechen
95					}
96				}
97				
98				if (ParentIstUnsichtbar == 'Ja') {
99					// console.log('Parent-Element ist unsichtbar, Abbruch.');
100					break; // Schleife abbrechen
101				}
102			}
103			  
104			if (ParentIstUnsichtbar == 'Ja') {
105				continue; // weiter mit nächstem Element 
106				
107			} else {
108
109				console.log('Tatsächlich sichtbar: ' + findMe.id);
110					
111				// Dieses Array-Element entfernen, weil jede Zählung nur einmal stattfinden soll
112				// console.log('Alle Elemente vorher: ' + BinIchSichtbar_AlleElemente);
113				Position = BinIchSichtbar_AlleElemente.indexOf(findMe.id);
114				// console.log('Position: ' + Position);
115				BinIchSichtbar_AlleElemente.splice(Position, 1);
116				// console.log('Alle Elemente nachher: ' + BinIchSichtbar_AlleElemente);
117			
118				// Daten formatieren
119				Netzwerk = 'Audienceflow';
120				Kampagne = findMe.getAttribute('data-audienceflow-campaign'); // Dies meint den Buchtitel oder die Werbekampagne
121				Anzeige = findMe.getAttribute('data-audienceflow-object'); // Dies meint den Namen eines Buttons oder eines Objekts, das gezählt werden soll
122			
123				console.log('Netzwerk: ' + Netzwerk);
124				console.log('Kampagne: ' + Kampagne);
125				console.log('Name des Objekts: ' + Anzeige);
126			
127				// Zugriffe speichern
128				Tracking_URL = 'https://joerndyck-verlag.de/Werbung.lasso' + '?Netzwerk=' + Netzwerk + '&Kampagne='+ Kampagne + '&Anzeige=' + Anzeige + '&ViewerID=' + ViewerID + '&CacheBuster=' + new Date().getTime();
129				xmlhttp=new XMLHttpRequest();
130				xmlhttp.open("GET", Tracking_URL);
131				xmlhttp.send();
132				
133				break;
134			
135			}
136					
137		} 
138	}
139}
140
141
142
143
144/*!
145 * Determine if an element is in the viewport
146 * (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
147 * https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
148 * @param  {Node}    elem The element
149 * @return {Boolean}      Returns true if element is in the viewport
150 */
151 
152var BerechnungOffset = -10; // Positive Zahlen lassen die Animation starten, bevor das Objekt voll sichtbar wurde. Negative Zahlen bedeuten, dass es ein Objekt noch etwas Luft nach unten braucht, bevor die Animation startet.
153
154var isInViewport = function (elem) {
155	var distance = elem.getBoundingClientRect();
156	return (
157		distance.top >= 0 &&
158		distance.left >= 0 &&
159		distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) + BerechnungOffset &&
160		distance.right <= (window.innerWidth || document.documentElement.clientWidth)
161	);
162};