Skip to content

Instantly share code, notes, and snippets.

@samsjchi
Last active July 19, 2018 15:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samsjchi/dba68e924edf7ba91fc5d3ff6e6ae64f to your computer and use it in GitHub Desktop.
Save samsjchi/dba68e924edf7ba91fc5d3ff6e6ae64f to your computer and use it in GitHub Desktop.
BBVA Compass Impact+ HD (Unit 2 w/ subtitles)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
body{margin:0;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a,body{color:#fff}a{text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-video-wrapper{position:relative;height:0;width:100%;margin:0;float:left;overflow:hidden;z-index:1;transition-duration:.5s;transition-timing-function:ease-in-out;transition-property:opacity,-webkit-transform,-webkit-filter;transition-property:transform,filter,opacity;transition-property:transform,filter,opacity,-webkit-transform,-webkit-filter;opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(5px);filter:blur(5px);padding-bottom:56.25%}@media (min-width:600px){.c-video-wrapper{padding-bottom:57%}}.is-viewable .c-video-wrapper{opacity:1;-webkit-transform:none;transform:none;-webkit-filter:blur(0);filter:blur(0)}.c-video{position:absolute;width:100%;height:100%;background:#fff}.c-content{width:100%;max-width:1024px;margin:0 auto;position:relative;overflow:hidden;background:#333}.c-audio-toggle{background:rgba(0,0,0,.5);border:1px solid #fff;border-radius:5px;cursor:pointer;display:inline-block;font-size:.4em;left:5px;letter-spacing:.05em;padding:.6em .8em;position:absolute;text-align:center;text-transform:uppercase;top:10px;width:12em;font-weight:400;z-index:100}.c-audio-toggle svg{display:inline-block;position:relative;top:.1em;width:1em;height:1em}
</style>
</head>
<body>
<div class="c-content">
<div class="c-audio-toggle js-sound">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" class="c-play-btn"><style>.st-play{fill:#fff}</style><path class="st-play" d="M832 352v1088c0 17.3-6.3 32.3-19 45s-27.7 19-45 19-32.3-6.3-45-19l-333-333H128c-17.3 0-32.3-6.3-45-19s-19-27.7-19-45V704c0-17.3 6.3-32.3 19-45s27.7-19 45-19h262l333-333c12.7-12.7 27.7-19 45-19s32.3 6.3 45 19 19 27.7 19 45zm384 544c0 50.7-14.2 97.8-42.5 141.5s-65.8 74.8-112.5 93.5c-6.7 3.3-15 5-25 5-17.3 0-32.3-6.2-45-18.5s-19-27.5-19-45.5c0-14 4-25.8 12-35.5s17.7-18 29-25 22.7-14.7 34-23 21-20.2 29-35.5 12-34.3 12-57-4-41.7-12-57-17.7-27.2-29-35.5-22.7-16-34-23-21-15.3-29-25-12-21.5-12-35.5c0-18 6.3-33.2 19-45.5s27.7-18.5 45-18.5c10 0 18.3 1.7 25 5 46.7 18 84.2 49 112.5 93s42.5 91.3 42.5 142zm256 0c0 102-28.3 196.2-85 282.5s-131.7 149.2-225 188.5c-8.7 3.3-17 5-25 5-18 0-33.3-6.3-46-19s-19-27.7-19-45c0-26 13-45.7 39-59 37.3-19.3 62.7-34 76-44 49.3-36 87.8-81.2 115.5-135.5 27.7-54.3 41.5-112.2 41.5-173.5s-13.8-119.2-41.5-173.5S1236.3 623 1187 587c-13.3-10-38.7-24.7-76-44-26-13.3-39-33-39-59 0-17.3 6.3-32.3 19-45s27.7-19 45-19c8.7 0 17.3 1.7 26 5 93.3 39.3 168.3 102.2 225 188.5s85 180.5 85 282.5zm256 0c0 153.3-42.3 294.2-127 422.5s-197.3 222.8-338 283.5c-8.7 3.3-17.3 5-26 5-17.3 0-32.3-6.3-45-19s-19-27.7-19-45c0-24 13-43.7 39-59 4.7-2.7 12.2-6.2 22.5-10.5s17.8-7.8 22.5-10.5c30.7-16.7 58-33.7 82-51 82-60.7 146-136.3 192-227s69-187 69-289-23-198.3-69-289-110-166.3-192-227c-24-17.3-51.3-34.3-82-51-4.7-2.7-12.2-6.2-22.5-10.5s-17.8-7.8-22.5-10.5c-26-15.3-39-35-39-59 0-17.3 6.3-32.3 19-45s27.7-19 45-19c8.7 0 17.3 1.7 26 5 140.7 60.7 253.3 155.2 338 283.5s127 269.2 127 422.5z"/></svg>
<span class="js-sound-label">Play with sound</span>
</div>
<a href="%%CLICK_URL_UNESC%%http://www.bbvacompass.com/wealth" target="_blank">
<figure class="c-video-wrapper">
<video class="c-video" playsinline="1" muted="1" poster="https://cdn.theatlantic.com/assets/media/files/advertising/bbva-compass/bbva-compass-2-poster.jpg">
</video>
</figure>
</a>
</div>
<script type="text/javascript" inline="">
"use strict";window.helpers=window.helpers||{},function(document,window,top,helpers){helpers.getViewability=function(){var clientRect=window.frameElement.getBoundingClientRect(),height=clientRect.height,elTop=clientRect.top,elBottom=clientRect.top+height,hiddenTop=Math.abs(Math.min(elTop,0)),hiddenBottom=Math.abs(Math.max(elBottom-top.innerHeight,0));return 100*(1-Math.min(hiddenTop+hiddenBottom,height)/height)}}(document,window,window.top,window.helpers);
</script>
<script type="text/javascript" inline="">
"use strict";!function(document,window,top){function filterForIFrame(event){var id=event.slot.getSlotElementId();return top.document.getElementById(id).contains(window.frameElement)}var $=top.$;window.top.googletag.pubads().addEventListener("slotVisibilityChanged",function(event){filterForIFrame(event)&&$(window).trigger("slotVisibilityChanged",event)}),window.top.googletag.pubads().addEventListener("impressionViewable",function(event){filterForIFrame(event)&&$(window).trigger("impressionViewable",event)})}(document,window,window.top);
</script>
<script type="text/javascript" inline="">
"use strict";var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target};!function(document,window,top){function loadPixel(src){var img=document.createElement("img");img.src=src,img.width=1,img.height=1,img.setAttribute("style","position: absolute; top: -1px; left: -1px; width:0; height:0; visibility:hidden;"),document.body.appendChild(img)}var $=top.$,gptAd=$(window.frameElement).closest("gpt-ad")[0];window.Analytics=function(options){this.options=options,this.interacted=!1,this.debug=!!top.location.search.match(/debug_custom_ads/),this._queue=[],this._recorded=[],this.bindEvents(),this.options.video&&this.bindVideoEvents(this.options.video),this.loadKeen(),this.device=function(){var ua=window.navigator.userAgent,w=window.screen.width,name="desktop";return w<1e3&&(name="tablet"),w<599&&(name="mobile"),ua.match(/iPad/)?name="tablet":ua.match(/iPhone/)?name="mobile":"desktop"===name&&ua.match("Android")&&(name="tablet"),name}(),window.KeenAsync.ready(function(){this.client=new window.KeenAsync({projectId:"58d28fc995cfc91c2b8e516e",writeKey:"C1F80F8637F4EE4B1272F54358B5517CC551ECA7296CEC2EC23FBD11AC31E1E70BD8527A1D945D9AB128B448FFC6C9BE185244996C6C5D9C82BD966F96506D3AC73E0A427FE8C7F466B6E2E5699DB82E9FF5AFA729CAC36ADE0DA096F936202F"}),this.executeQueue()}.bind(this))},window.Analytics.prototype.bindEvents=function(){function trackImpression(){setTimeout(function(){var metrics=window.performance.timing,init=window.performance.timing.fetchStart;self.record("impression",{perf_dom_interactive:metrics.domInteractive-init,perf_dom_complete:metrics.domComplete-init,perf_response:metrics.responseEnd-init,perf_load:metrics.loadEventEnd-init},!0)},250)}var self=this;window.performance.timing.loadEventEnd>0?trackImpression():$(window).on("load",trackImpression),$(window).one("impressionViewable",function(){self.record("viewable-impression",null,1)}),$(document).on("click",function(){self.record("click",null,!1,!0)}),$(gptAd).on("click",function(){self.record("click",null,!1,!0)}),$(document).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(gptAd).on("click","[href]",function(){self.record("click-link",null,!1,!0)}),$(document).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(gptAd).one("mouseenter",function(){self.record("hover",null,!1,!0)}),$(document).on("submit",function(){self.record("form-submit",null,!1,!0)})},window.Analytics.prototype.executeQueue=function(){for(var i=0;i<this._queue.length;i++)this.record.apply(this,this._queue[i])},window.Analytics.prototype.loadKeen=function(){this.client=null,function(name,path,ctx){var latest,prev=!!window.Keen&&window.Keen;ctx[name]=ctx[name]||{ready:function(fn){var loaded,h=document.getElementsByTagName("head")[0],s=document.createElement("script"),w=window;s.onload=s.onerror=s.onreadystatechange=function(){if(!(s.readyState&&!/^c|loade/.test(s.readyState)||loaded)){if(s.onload=s.onreadystatechange=null,loaded=1,latest=w.Keen,prev)w.Keen=prev;else try{delete w.Keen}catch(e){w.Keen=void 0}ctx[name]=latest,ctx[name].ready(fn)}},s.async=1,s.src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.1.3.min.js",h.parentNode.insertBefore(s,h)}}}("KeenAsync",0,window)},window.Analytics.prototype.record=function(name,data,unique,isInteraction){if(!this.client)return void this._queue.push(arguments);if(!(unique&&this._recorded.indexOf(name)>-1)){var isFirstInteraction=!1;isInteraction&&!this.interacted&&(isFirstInteraction=!0,this.interacted=!0),this._recorded.push(name);var pixelData=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,deviceCategory:this.device,deviceUserAgent:window.navigator.userAgent,gptCreativeId:gptAd.creativeId,gptCampaignId:gptAd.campaignId,gptLineItemId:gptAd.lineItemId,gptAdvertiserId:gptAd.advertiserId},this.options.extra||{},data||{}),params=[];for(var key in pixelData)pixelData[key]&&params.push(key+"="+encodeURIComponent(pixelData[key]));params=params.join("&");loadPixel("https://data-cdn.theatlantic.com/custom-ads.gif?"+params),data=_extends({eventName:name,documentTitle:document.title,isInteraction:isInteraction,isFirstInteraction:isFirstInteraction,device:{category:this.device,userAgent:window.navigator.userAgent},gpt:{creativeId:gptAd.creativeId,campaignId:gptAd.campaignId,lineItemId:gptAd.lineItemId,advertiserId:gptAd.advertiserId},extra:this.options.extra||{}},data||{}),this.debug&&(console.debug("Tracking:"),console.debug(data)),void 0===window.___browserSync___&&this.client.recordEvent("custom-ad-event",data)}},window.Analytics.prototype.bindVideoEvents=function(video){var self=this,$el=$(video.el,document);if(0!==$el.length){var getProgressData=function(e){return{sound:e.target.muted,filename:e.target.src}},getVersion=function(){var version="autoplay";return video.expandedCondition&&video.expandedCondition()&&(version="full"),version};$el.one("play",function(e){self.record("video-play",{filename:e.target.src})}),$el.on("stalled",function(e){self.record("video-stalled",{filename:e.target.src})}),$el.on("ended",function(e){self.record(getVersion()+"-video-progess-100",getProgressData(e),!0),$el.one("timeupdate",function(){self.record(getVersion()+"-video-loop",{filename:e.target.src})})}),$el.on("timeupdate",function(e){e.target.muted||self.record("video-unmuted",null,!0,!0);var position=Math.ceil(e.target.currentTime/e.target.duration*100);e.target.duration-e.target.currentTime<1&&(e.target._isLooping=!0);var version=getVersion(),data=getProgressData(e);100===position||position<e.target._isLooping?self.record(version+"-video-progess-100",data,!0):position>90?self.record(version+"-video-progess-90",data,!0):position>75?self.record(version+"-video-progess-75",data,!0):position>50?self.record(version+"-video-progess-50",data,!0):position>25&&self.record(version+"-video-progess-25",data,!0)})}}}(document,window,window.top);
</script>
<script type="text/javascript" inline="">
"use strict";!function(document,window,top,helpers){function inlineVideo(){var width=$(window).width();source=mobileVideoLoop,width>680&&(source=desktopVideoLoop),video.setAttribute("src",source),video.muted=!0}function setHeight(){var el=document.getElementsByClassName("c-content")[0],height=el.getBoundingClientRect().height;window.frameElement.style.height=height+"px"}function updateMuteLabel(){var label=video.muted?"Play with sound":"Mute sound";soundLabel.innerText=label}function toggleVideoSource(){if(_isFullVideoPlaying=!0,source===mobileVideoLoop)source=mobileVideo;else{if(source!==desktopVideoLoop)return;source=desktopVideo}video.setAttribute("src",source),video.play()}var $=top.$;window.frameElement.style.width="100%";var video=$(".c-video",document)[0],soundLabel=$(".js-sound-label",document)[0],assetsUrl="https://cdn.theatlantic.com/assets/media/files/advertising/bbva-compass",mobileVideoLoop=assetsUrl+"/bbva2-loop-subtitles-mobile.mp4",desktopVideoLoop=assetsUrl+"/bbva2-loop-subtitles-desktop.mp4",mobileVideo=assetsUrl+"/bbva2-subtitles-mobile.mp4",desktopVideo=assetsUrl+"/bbva2-subtitles-desktop.mp4",source=void 0,_isFullVideoPlaying=!1;new window.Analytics({video:{el:$(".c-video",document),isFullVideoPlaying:function(){return _isFullVideoPlaying}}}),$(document).on("click",".js-sound",function(){video.muted=!video.muted,updateMuteLabel(),toggleVideoSource()}),video.onended=function(){video.muted=!0,updateMuteLabel(),video.play()},window.onresize=setHeight,$(window).on("slotVisibilityChanged",function(e,data){var shouldPlay=data.inViewPercentage>50,shouldPause=data.inViewPercentage<20;shouldPlay&&video.paused?($("body",document).addClass("is-viewable"),video.play()):shouldPause&&!video.paused&&setTimeout(function(){video.muted=!0,updateMuteLabel(),video.pause(),$("body",document).removeClass("is-viewable")},1500)}),window.onload=function(){setHeight(),inlineVideo(),helpers.getViewability()>50&&$("body",document).addClass("is-viewable")}}(document,window,window.top,window.helpers||{});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment