-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (94 loc) · 3.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<title>Viewable Time Tracker</title>
<style>
#div-gpt-div-1 {
height: 250px;
width:300px;
background-color: #f080f0;
margin-bottom: 50px;
}
#div-gpt-div-2 {
height: 250px;
width:300px;
background-color: #90d0d0;
}
</style>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
var slot1;
googletag.cmd.push(function() {
slot1 = googletag.defineSlot('/200894144/Responsive', [[300, 250], [300, 600]], 'div-gpt-ad-1620832289302-0').setTargeting("Test_Mode", "ON").addService(googletag.pubads());
googletag.enableServices();
});
</script>
</head>
<body>
<div id="div-gpt-div-1"></div>
<div id="div-gpt-div-2"></div>
<div id='div-gpt-ad-1620832289302-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1620832289302-0');
//setInterval(function(){googletag.pubads().refresh([slot1]);}, 3000);
});
</script>
</div>
<script>
var divs = document.querySelectorAll('div[id^="div-gpt"]');
var timers = {};
function isInView(elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function startViewTimer(id) {
timers[id] = {
viewTime: 0,
intervalID: setInterval(function() {
if (isInView(document.getElementById(id))) {
timers[id].viewTime += 1;
console.log('Viewable time for ' + id + ':', timers[id].viewTime, 'seconds');
if (timers[id].viewTime == 10) {
alert('You have viewed the ' + id + ' div for 10 seconds!');
googletag.pubads().refresh([slot1]);
}
} else {
timers[id].viewTime = 0;
}
}, 1000)
};
}
function stopViewTimer(id) {
clearInterval(timers[id].intervalID);
delete timers[id];
}
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
var id = div.getAttribute('id');
startViewTimer(id);
}
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
for (var id in timers) {
stopViewTimer(id);
}
} else {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
var id = div.getAttribute('id');
if (timers[id]) {
clearInterval(timers[id].intervalID);
timers[id].viewTime = 0;
}
startViewTimer(id);
}
}
});
</script>
</body>
</html>