Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
33c61309 by Dan Rempel
Options

Adjusted CWL ads for EyeBuild

1 parent 3fca6336
Inline Side-by-side
Showing 5 changed files with 204 additions and 38 deletions
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 3
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>HTML5 Ad</title> 5 <title>HTML5 Ad</title>
6 <!--
6 <script type="text/javascript"> 7 <script type="text/javascript">
7 8
8 // IAB source: modified to allow link testing 9 // IAB source: modified to allow link testing
...@@ -17,25 +18,74 @@ ...@@ -17,25 +18,74 @@
17 } 18 }
18 } 19 }
19 clickTag = getParameterByName('clickTag'); 20 clickTag = getParameterByName('clickTag');
20
21 </script> 21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 <script type="text/javascript"> 24 <script type="text/javascript">
23 window.onload = function() { 25 window.onload = function() {
26 eyeBuild.initialize();
24 window.isVideoClick = false; 27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
25 var video = document.getElementById("video"); 35 var video = document.getElementById("video");
26 var videoControls = document.getElementById("video-controls"); 36 var videoControls = document.getElementById("video-controls");
27 var playButton = document.getElementById("play-pause"); 37 var playButton = document.getElementById("play-pause");
28 playButton.addEventListener("click", function(e) { 38 playButton.addEventListener("click", function(e) {
29 if (video.paused == true) { 39 if (video.paused == true) {
30 video.play(); 40 play();
31 playButton.setAttribute("class", "pause"); 41 eyeBuild.doIAT(0);
32 videoControls.setAttribute("class", "play");
33 } else { 42 } else {
34 video.pause(); 43 pause();
35 playButton.setAttribute("class", "play"); 44 eyeBuild.doIAT(1);
36 } 45 }
37 }); 46 });
47 var play = function(){
48 video.play();
49 videoPlays++;
50 playButton.setAttribute("class", "pause");
51 videoControls.setAttribute("class", "play");
52 }
53 var pause = function(){
54 video.pause();
55 playButton.setAttribute("class", "play");
56 }
57 video.addEventListener('ended', function(e){
58 video.currentTime = 0;
59 pause();
60 videoControls.setAttribute("class", "start");
61 playButton.setAttribute("class", "play");
62 v0 = false;
63 v25 = false;
64 v50 = false;
65 v75 = false;
66 eyeBuild.doIAT(9);
67 }, false);
38 68
69 // track video plays
70 video.addEventListener('timeupdate', function(e){
71 var pct = video.currentTime / video.duration *100;
72 if (pct > 75 && !v75){
73 v75 = true;
74 eyeBuild.doIAT(8);
75 }else if (pct > 50 && !v50){
76 v50 = true;
77 eyeBuild.doIAT(7);
78 }else if (pct > 25 && !v25){
79 v25 = true;
80 eyeBuild.doIAT(6);
81 }else if (pct > 0 && !v0){
82 v0 = true;
83 eyeBuild.doIAT(5);
84 if(videoPlays>1){
85 eyeBuild.doIAT(10);
86 }
87 }
88 }, false);
39 89
40 } 90 }
41 </script> 91 </script>
...@@ -95,48 +145,46 @@ ...@@ -95,48 +145,46 @@
95 left:13px; 145 left:13px;
96 top:15px; 146 top:15px;
97 } 147 }
98 #video-controls{ 148 #video-controls.start{
99 background: url(assets/video-poster.jpg) no-repeat center center; 149 background: url(assets/video-poster.jpg) no-repeat center center;
100 } 150 }
101 #video-controls.play {
102 background: none;
103 }
104 #video-controls button{ 151 #video-controls button{
105 width: 100%;
106 height: 100%;
107 background: url(assets/play.svg) no-repeat center center; 152 background: url(assets/play.svg) no-repeat center center;
108 border: none; 153 border: none;
109 cursor: pointer; 154 cursor: pointer;
155 width: 100%;
156 height: 100%;
110 } 157 }
111 #video-controls button:hover{ 158 #video-controls button.play:hover{
112 background-size: 87px 87px; 159 background-size: 88px 88px;
113 } 160 }
114 #video-controls button.play{ 161 #video-controls button.play{
115 background: url(assets/play.svg) no-repeat center center; 162 background: url(assets/play.svg) no-repeat center center;
116 background-size: 85px 85px; 163 background-size: 85px 85px;
117 } 164 }
118 #video-controls button.pause{ 165 #video-controls button.pause{
119 background: none; 166 background: none;
120 } 167 }
121 168
122 </style> 169 </style>
170
123 </head> 171 </head>
124 172
125 <body> 173 <body>
126 <div id="border"> 174 <div id="border">
127 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div> 175 <div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
128 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 176 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
177 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
129 <video id="video" width="272" height="152"> 178 <video id="video" width="272" height="152">
130 <source src="assets/vid.mp4" type="video/mp4"> 179 <source src="assets/vid.mp4" type="video/mp4">
131 Your browser doesn't support HTML5 video. 180 Your browser doesn't support HTML5 video.
132 </video> 181 </video>
133 <div id="video-controls"> 182 <div id="video-controls" class="start">
134 <button type="button" id="play-pause"></button> 183 <button type="button" id="play-pause" class="play"></button>
135 </div> 184 </div>
136 185
137 </div> 186 </div>
138 187
139
140 </body> 188 </body>
141 189
142 </html> 190 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 3
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>HTML5 Ad</title> 5 <title>HTML5 Ad</title>
6 <!--
6 <script type="text/javascript"> 7 <script type="text/javascript">
7 8
8 // IAB source: modified to allow link testing 9 // IAB source: modified to allow link testing
...@@ -19,23 +20,73 @@ ...@@ -19,23 +20,73 @@
19 clickTag = getParameterByName('clickTag'); 20 clickTag = getParameterByName('clickTag');
20 21
21 </script> 22 </script>
23 -->
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 <script type="text/javascript"> 25 <script type="text/javascript">
23 window.onload = function() { 26 window.onload = function() {
27 eyeBuild.initialize();
24 window.isVideoClick = false; 28 window.isVideoClick = false;
29
30 var videoPlays = 0;
31 var v0 = false;
32 var v25 = false;
33 var v50 = false;
34 var v75 = false;
35
25 var video = document.getElementById("video"); 36 var video = document.getElementById("video");
26 var videoControls = document.getElementById("video-controls"); 37 var videoControls = document.getElementById("video-controls");
27 var playButton = document.getElementById("play-pause"); 38 var playButton = document.getElementById("play-pause");
28 playButton.addEventListener("click", function(e) { 39 playButton.addEventListener("click", function(e) {
29 if (video.paused == true) { 40 if (video.paused == true) {
30 video.play(); 41 play();
31 playButton.setAttribute("class", "pause"); 42 eyeBuild.doIAT(0);
32 videoControls.setAttribute("class", "play");
33 } else { 43 } else {
34 video.pause(); 44 pause();
35 playButton.setAttribute("class", "play"); 45 eyeBuild.doIAT(1);
36 } 46 }
37 }); 47 });
48 var play = function(){
49 video.play();
50 videoPlays++;
51 playButton.setAttribute("class", "pause");
52 videoControls.setAttribute("class", "play");
53 }
54 var pause = function(){
55 video.pause();
56 playButton.setAttribute("class", "play");
57 }
58 video.addEventListener('ended', function(e){
59 video.currentTime = 0;
60 pause();
61 videoControls.setAttribute("class", "start");
62 playButton.setAttribute("class", "play");
63 v0 = false;
64 v25 = false;
65 v50 = false;
66 v75 = false;
67 eyeBuild.doIAT(9);
68 }, false);
38 69
70 // track video plays
71 video.addEventListener('timeupdate', function(e){
72 var pct = video.currentTime / video.duration *100;
73 if (pct > 75 && !v75){
74 v75 = true;
75 eyeBuild.doIAT(8);
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 }
88 }
89 }, false);
39 90
40 } 91 }
41 </script> 92 </script>
...@@ -95,7 +146,7 @@ ...@@ -95,7 +146,7 @@
95 left:23px; 146 left:23px;
96 top:23px; 147 top:23px;
97 } 148 }
98 #video-controls{ 149 #video-controls.start{
99 background: url(assets/video-poster.jpg) no-repeat center center; 150 background: url(assets/video-poster.jpg) no-repeat center center;
100 } 151 }
101 #video-controls.play { 152 #video-controls.play {
...@@ -117,7 +168,9 @@ ...@@ -117,7 +168,9 @@
117 } 168 }
118 #video-controls button.pause{ 169 #video-controls button.pause{
119 background: none; 170 background: none;
120 } 171 }
172
173
121 .bar{ 174 .bar{
122 position: absolute; 175 position: absolute;
123 width: 47px; 176 width: 47px;
...@@ -158,14 +211,15 @@ ...@@ -158,14 +211,15 @@
158 <body> 211 <body>
159 <div id="border"> 212 <div id="border">
160 <!--<div id="img"><img id="" src="assets/img@1x.gif" width="600" height="566" style="border-style:none"></div>--> 213 <!--<div id="img"><img id="" src="assets/img@1x.gif" width="600" height="566" style="border-style:none"></div>-->
161 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 214 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
162 <video id="video" width="272" height="152"> 215 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
216 <video id="video" width="" height="">
163 <source src="assets/vid.mp4" type="video/mp4"> 217 <source src="assets/vid.mp4" type="video/mp4">
164 Your browser doesn't support HTML5 video. 218 Your browser doesn't support HTML5 video.
165 </video> 219 </video>
166 <div id="video-controls"> 220 <div id="video-controls" class="start">
167 <button type="button" id="play-pause" class="play"></button> 221 <button type="button" id="play-pause" class="play"></button>
168 </div> 222 </div>
169 223
170 <div id="bar1" class="bar grey"></div> 224 <div id="bar1" class="bar grey"></div>
171 <div id="bar2" class="bar green"></div> 225 <div id="bar2" class="bar green"></div>
......
...@@ -50,10 +50,31 @@ ...@@ -50,10 +50,31 @@
50 </script> 50 </script>
51 <meta charset="utf-8"> 51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title> 52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=300,height=600"> 53 <meta name="ad.size" content="width=728,height=90">
54 <!--
54 <script type="text/javascript"> 55 <script type="text/javascript">
55 var clickTag = "https://thecommonwell.ca/wave/"; 56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
56 </script> 69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
76 </script>
77
57 78
58 79
59 <style> 80 <style>
...@@ -151,7 +172,8 @@ ...@@ -151,7 +172,8 @@
151 </head> 172 </head>
152 173
153 <body> 174 <body>
154 <a href="javascript:window.open(window.clickTag)"> 175 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
176 <a href="javascript:eyeBuild.doClick(0)">
155 <div id="border"> 177 <div id="border">
156 178
157 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div> 179 <div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
......
...@@ -51,8 +51,28 @@ ...@@ -51,8 +51,28 @@
51 <meta charset="utf-8"> 51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title> 52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=300,height=600"> 53 <meta name="ad.size" content="width=300,height=600">
54 <!--
54 <script type="text/javascript"> 55 <script type="text/javascript">
55 var clickTag = "https://thecommonwell.ca/wave/"; 56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
56 </script> 76 </script>
57 77
58 78
...@@ -151,7 +171,8 @@ ...@@ -151,7 +171,8 @@
151 </head> 171 </head>
152 172
153 <body> 173 <body>
154 <a href="javascript:window.open(window.clickTag)"> 174 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
175 <a href="javascript:eyeBuild.doClick(0)">
155 <div id="border"> 176 <div id="border">
156 177
157 <!-- 178 <!--
......
...@@ -50,9 +50,29 @@ ...@@ -50,9 +50,29 @@
50 </script> 50 </script>
51 <meta charset="utf-8"> 51 <meta charset="utf-8">
52 <title>HTML5 GSAP Ad</title> 52 <title>HTML5 GSAP Ad</title>
53 <meta name="ad.size" content="width=300,height=600"> 53 <meta name="ad.size" content="width=728,height=90">
54 <!--
54 <script type="text/javascript"> 55 <script type="text/javascript">
55 var clickTag = "https://thecommonwell.ca/wave/"; 56
57 // IAB source: modified to allow link testing
58 var clickTag = "http://thecommonwell.ca/wave";
59 function getParameterByName(name)
60 {
61 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
62 if (match == null || match == ""){
63 return clickTag;
64 } else{
65 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
66 }
67 }
68 clickTag = getParameterByName('clickTag');
69 </script>
70 -->
71 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
72 <script type="text/javascript">
73 window.onload = function() {
74 eyeBuild.initialize();
75 }
56 </script> 76 </script>
57 77
58 78
...@@ -151,7 +171,8 @@ ...@@ -151,7 +171,8 @@
151 </head> 171 </head>
152 172
153 <body> 173 <body>
154 <a href="javascript:window.open(window.clickTag)"> 174 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
175 <a href="javascript:eyeBuild.doClick(0)">
155 <div id="border"> 176 <div id="border">
156 177
157 <!-- 178 <!--
......