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 196 additions and 30 deletions
......@@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
......@@ -17,25 +18,74 @@
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
} else {
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
});
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
}
</script>
......@@ -95,21 +145,18 @@
left:13px;
top:15px;
}
#video-controls{
#video-controls.start{
background: url(assets/video-poster.jpg) no-repeat center center;
}
#video-controls.play {
background: none;
}
#video-controls button{
width: 100%;
height: 100%;
background: url(assets/play.svg) no-repeat center center;
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
#video-controls button:hover{
background-size: 87px 87px;
#video-controls button.play:hover{
background-size: 88px 88px;
}
#video-controls button.play{
background: url(assets/play.svg) no-repeat center center;
......@@ -120,23 +167,24 @@
}
</style>
</head>
<body>
<div id="border">
<div id="img"><img id="logoImg" src="assets/img@2x.gif" width="300" height="600" style="border-style:none"></div>
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<video id="video" width="272" height="152">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls">
<button type="button" id="play-pause"></button>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
......@@ -19,23 +20,73 @@
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
playButton.setAttribute("class", "pause");
videoControls.setAttribute("class", "play");
} else {
}
var pause = function(){
video.pause();
playButton.setAttribute("class", "play");
}
});
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.setAttribute("class", "start");
playButton.setAttribute("class", "play");
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
}
</script>
......@@ -95,7 +146,7 @@
left:23px;
top:23px;
}
#video-controls{
#video-controls.start{
background: url(assets/video-poster.jpg) no-repeat center center;
}
#video-controls.play {
......@@ -118,6 +169,8 @@
#video-controls button.pause{
background: none;
}
.bar{
position: absolute;
width: 47px;
......@@ -158,12 +211,13 @@
<body>
<div id="border">
<!--<div id="img"><img id="" src="assets/img@1x.gif" width="600" height="566" style="border-style:none"></div>-->
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
<video id="video" width="272" height="152">
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
<video id="video" width="" height="">
<source src="assets/vid.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls">
<div id="video-controls" class="start">
<button type="button" id="play-pause" class="play"></button>
</div>
......
......@@ -50,10 +50,31 @@
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
var clickTag = "https://thecommonwell.ca/wave/";
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
......@@ -151,7 +172,8 @@
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="copy1"><img src="assets/txt1-farmers.svg" alt="Which local farmers make your day?"></div>
......
......@@ -51,8 +51,28 @@
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
var clickTag = "https://thecommonwell.ca/wave/";
window.onload = function() {
eyeBuild.initialize();
}
</script>
......@@ -151,7 +171,8 @@
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<!--
......
......@@ -50,9 +50,29 @@
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
var clickTag = "https://thecommonwell.ca/wave/";
window.onload = function() {
eyeBuild.initialize();
}
</script>
......@@ -151,7 +171,8 @@
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<!--
......