diff --git a/README.md b/README.md index a61fe5b..dfaadea 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ catfish ### Events Available events for listen: - rendered (catfish.EVENTS.RENDERED) - fire after ads was rendered +- closed (catfish.EVENTS.CLOSED) - fire after ads was closed ```js catfish diff --git a/googletag-catfish.js b/googletag-catfish.js index 725aff7..1d4f204 100644 --- a/googletag-catfish.js +++ b/googletag-catfish.js @@ -7,7 +7,7 @@ /** * Google-tag catfish * - * @version 0.0.7 + * @version 0.0.8 * @param {Object} gt GoogleTag object instance * @return {Object} */ @@ -34,7 +34,8 @@ function googletagCatfish(gt) { var SLOTS_MODES = {}; var EVENTS = { - RENDERED: 'rendered' + RENDERED: 'rendered', + CLOSED: 'closed' }; var adsRendered = false; @@ -134,6 +135,7 @@ function googletagCatfish(gt) { */ function hideAdsBox() { adsBox.className = adsBox.className.replace('catfish-ads--visible', ''); + fireEvent(EVENTS.CLOSED); } diff --git a/googletag-catfish.min.js b/googletag-catfish.min.js index 4defd6f..c649b70 100644 --- a/googletag-catfish.min.js +++ b/googletag-catfish.min.js @@ -1,12 +1,12 @@ /* Google Publisher Tag Ads Catfish implementation - @version 0.0.7 + @version 0.0.8 @link https://github.com/nechehin/gpt-catfish */ -function googletagCatfish(g){function d(a){n&&console.log("googletagCatfish: "+a)}function w(){var a=".gt-catfish-box { display: none; background-color: "+p+"; }";a+=".gt-catfish-box.catfish-ads--visible { display: flex; position: fixed; align-items: center; justify-content: center; z-index: "+q+"; }";a+=".catfish-ads--fullscreen { top: 0; right: 0; bottom: 0; left: 0; }.catfish-ads--bottom { right: 0; bottom: 0; left: 0; }.gt-catfish__button-close { position: absolute; top: 5px; left: 5px; width: 25px; height: 25px; background-color:#000;border-radius:50%;border:2px solid #fff;box-shadow:0 0 3px #666;background-size:100% 100%;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTM4IDEyLjgzbC0yLjgzLTIuODMtMTEuMTcgMTEuMTctMTEuMTctMTEuMTctMi44MyAyLjgzIDExLjE3IDExLjE3LTExLjE3IDExLjE3IDIuODMgMi44MyAxMS4xNy0xMS4xNyAxMS4xNyAxMS4xNyAyLjgzLTIuODMtMTEuMTctMTEuMTd6IiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==) }.catfish-ads--bottom .gt-catfish__button-close { top: -15px; }.gt-catfish__place, .gt-catfish__place div { position: relative; max-width: 100%; max-height: 100%; }"; - var b=document.createElement("style");b.type="text/css";b.styleSheet?b.styleSheet.cssText=a:b.appendChild(document.createTextNode(a));(document.head||document.getElementsByTagName("head")[0]).appendChild(b)}function r(){e.className=e.className.replace("catfish-ads--visible","")}function t(a,b,d){c[a]=c[a]||{sizes:[]};c[a].sizes.push(b);k[a+"-"+b.join("x")]=d}function x(){g.cmd.push(function(){for(var a in c)if(Object.prototype.hasOwnProperty.call(c,a)){if(!c[a].dom){var b=c[a],d=a,e=document.createElement("div"); - e.id=d.replace(/[^\w]/gi,"");f.appendChild(e);b.dom=e}g.defineSlot(a,c[a].sizes,c[a].dom.id).addService(g.pubads())}})}function y(a){u&&d("Warning: multiple ads was rendered");var b=a.slot.getAdUnitPath()+"-"+a.size.join("x");b in k?a.isEmpty?d("Empty ads response from slot "+a.slot.getAdUnitPath()):(b=k[b],d("rendered slot "+a.slot.getAdUnitPath()+" size "+a.size.join("x")+" mode "+b),e.className+=" catfish-ads--visible "+b,a=v.RENDERED,b=document.createEvent("Event"),b.initEvent(a,!0,!0),document.dispatchEvent(b), - u=!0):a.slot.getAdUnitPath()in c&&d("Undefined mode for slot "+a.slot.getAdUnitPath()+" size "+a.size.join("x"))}var l=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=!!~location.search.indexOf("gpt-catfish-debug"),m=!1,p="transparent",q="999999",e,h,f=null,c={},k={},v={RENDERED:"rendered"},u=!1;return{EVENTS:v,addEventListener:function(a,b){document.addEventListener(a,b);return this},debug:function(a){n=a;return this},autoCloseTimeout:function(a){m=a;return this}, - backgroundColor:function(a){p=a;return this},zIndex:function(a){q=a;return this},googletag:function(){return g},addFullscreenModeSlot:function(a,b){t(a,b,"catfish-ads--fullscreen");return this},addBottomModeSlot:function(a,b){t(a,b,"catfish-ads--bottom");return this},addWidth:function(a,b,c){if(lb)return d("width "+a+"-"+b+" ("+l+") - skiped"),this;d("width "+a+"-"+b+" - added");c.call(this);return this},render:function(){if(Object.keys(c).length)return d("render"),w(),e=document.createElement("div"), - e.className="gt-catfish-box",f=document.createElement("div"),f.className="gt-catfish__place",f.id="catfish-ads",h=document.createElement("div"),h.className="gt-catfish__button-close",h.onclick=r,f.appendChild(h),e.appendChild(f),document.body.appendChild(e),x(),this.googletag().cmd.push(function(){this.googletag().pubads().enableSingleRequest();this.googletag().enableServices();this.googletag().pubads().addEventListener("slotRenderEnded",y);for(var a in c)Object.prototype.hasOwnProperty.call(c,a)&& - c[a].dom&&g.display(c[a].dom)}.bind(this)),m&&setTimeout(r,m),this;d("render skiped: no slots")}}}if("google-tag-catfish"in window&&"googletag"in window)window["google-tag-catfish"](googletagCatfish(window.googletag)); +function googletagCatfish(g){function d(a){p&&console.log("googletagCatfish: "+a)}function x(){var a=".gt-catfish-box { display: none; background-color: "+q+"; }";a+=".gt-catfish-box.catfish-ads--visible { display: flex; position: fixed; align-items: center; justify-content: center; z-index: "+r+"; }";a+=".catfish-ads--fullscreen { top: 0; right: 0; bottom: 0; left: 0; }.catfish-ads--bottom { right: 0; bottom: 0; left: 0; }.gt-catfish__button-close { position: absolute; top: 5px; left: 5px; width: 25px; height: 25px; background-color:#000;border-radius:50%;border:2px solid #fff;box-shadow:0 0 3px #666;background-size:100% 100%;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTM4IDEyLjgzbC0yLjgzLTIuODMtMTEuMTcgMTEuMTctMTEuMTctMTEuMTctMi44MyAyLjgzIDExLjE3IDExLjE3LTExLjE3IDExLjE3IDIuODMgMi44MyAxMS4xNy0xMS4xNyAxMS4xNyAxMS4xNyAyLjgzLTIuODMtMTEuMTctMTEuMTd6IiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==) }.catfish-ads--bottom .gt-catfish__button-close { top: -15px; }.gt-catfish__place, .gt-catfish__place div { position: relative; max-width: 100%; max-height: 100%; }"; + var b=document.createElement("style");b.type="text/css";b.styleSheet?b.styleSheet.cssText=a:b.appendChild(document.createTextNode(a));(document.head||document.getElementsByTagName("head")[0]).appendChild(b)}function t(){e.className=e.className.replace("catfish-ads--visible","");u(k.CLOSED)}function v(a,b,d){c[a]=c[a]||{sizes:[]};c[a].sizes.push(b);l[a+"-"+b.join("x")]=d}function y(){g.cmd.push(function(){for(var a in c)if(Object.prototype.hasOwnProperty.call(c,a)){if(!c[a].dom){var b=c[a],d=a,e=document.createElement("div"); + e.id=d.replace(/[^\w]/gi,"");f.appendChild(e);b.dom=e}g.defineSlot(a,c[a].sizes,c[a].dom.id).addService(g.pubads())}})}function u(a){var b=document.createEvent("Event");b.initEvent(a,!0,!0);document.dispatchEvent(b)}function z(a){w&&d("Warning: multiple ads was rendered");var b=a.slot.getAdUnitPath()+"-"+a.size.join("x");b in l?a.isEmpty?d("Empty ads response from slot "+a.slot.getAdUnitPath()):(b=l[b],d("rendered slot "+a.slot.getAdUnitPath()+" size "+a.size.join("x")+" mode "+b),e.className+=" catfish-ads--visible "+ + b,u(k.RENDERED),w=!0):a.slot.getAdUnitPath()in c&&d("Undefined mode for slot "+a.slot.getAdUnitPath()+" size "+a.size.join("x"))}var m=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,p=!!~location.search.indexOf("gpt-catfish-debug"),n=!1,q="transparent",r="999999",e,h,f=null,c={},l={},k={RENDERED:"rendered",CLOSED:"closed"},w=!1;return{EVENTS:k,addEventListener:function(a,b){document.addEventListener(a,b);return this},debug:function(a){p=a;return this},autoCloseTimeout:function(a){n= + a;return this},backgroundColor:function(a){q=a;return this},zIndex:function(a){r=a;return this},googletag:function(){return g},addFullscreenModeSlot:function(a,b){v(a,b,"catfish-ads--fullscreen");return this},addBottomModeSlot:function(a,b){v(a,b,"catfish-ads--bottom");return this},addWidth:function(a,b,c){if(mb)return d("width "+a+"-"+b+" ("+m+") - skiped"),this;d("width "+a+"-"+b+" - added");c.call(this);return this},render:function(){if(Object.keys(c).length)return d("render"),x(),e=document.createElement("div"), + e.className="gt-catfish-box",f=document.createElement("div"),f.className="gt-catfish__place",f.id="catfish-ads",h=document.createElement("div"),h.className="gt-catfish__button-close",h.onclick=t,f.appendChild(h),e.appendChild(f),document.body.appendChild(e),y(),this.googletag().cmd.push(function(){this.googletag().pubads().enableSingleRequest();this.googletag().enableServices();this.googletag().pubads().addEventListener("slotRenderEnded",z);for(var a in c)Object.prototype.hasOwnProperty.call(c,a)&& +c[a].dom&&g.display(c[a].dom)}.bind(this)),n&&setTimeout(t,n),this;d("render skiped: no slots")}}}if("google-tag-catfish"in window&&"googletag"in window)window["google-tag-catfish"](googletagCatfish(window.googletag));