Google Publisher Tag
Sadly doesnt wok with jsfiddles frames.
HTML
<div class="ad-container ad-standard">
<div id="adDiv5" class="ad-placeholder" title="ADVERTISEMENT" data-adsize="300x250,300x600,300x1050" data-pos="top" data-tile="5"></div>
</div>
CSS
/* ----------------------------
Ads (Adobe)
------------------------------- */
/* all */
.ad-placeholder {
font-size: 0;
line-height: 0;
text-align: center;
min-height: 1px;
}
/* override ads that try to left align with inline styles */
.ad-placeholder div, .ad-placeholder iframe {
margin: 0 auto !important;
}
.ad-placeholder.visibility.hidden {
position: relative;
display: block;
visibility: hidden;
z-index: -1;
}
.ad-content {
position: relative;
min-width: 300px;
}
/* ad labels */
.ad-placeholder:after {
position: relative;
display: block;
content: attr(title);
width: 100%;
bottom: -4px;
font-size: 10px;
color: #c1c1c1;
text-align: center;
line-height: 1;
white-space: nowrap;
margin-bottom: 4px;
}
/* banner (728x90, 970x90) */
.ad-banner {
min-height: 100px;
margin: 0 auto 5px;
padding: 20px 0;
text-align: center;
background: #f6f6f6;
}
.ad-container.ad-banner:first-child {
margin-bottom: 0;
}
.ad-banner:last-child {
position: relative;
margin-bottom: 10px;
background-color: transparent;
border: 0;
z-index: 3;
}
/* sponsor (230x45) */
.row-fluid .article-sponsor {
min-height: 30px;
}
.article-sponsor .ad-container {
min-height: 0;
}
.article-sponsor .ad-container {
margin-bottom: 10px;
}
/* 1x1 ads*/
.ad-content.ad-collapse, .ad-container.ad-collapse, .ad-collapse .ad-placeholder {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
.ad-collapse .ad-placeholder:after {
content:'';
}
/* debug ad code */
.debugadcode {
margin: 0 0 5px;
border: 1px solid #090;
}
.debugadcode textarea {
width: 95%;
height: 75px;
margin: 0;
resize: none;
}
.debugadcode p {
margin: 0;
font-weight: bold;
color: #090;
text-align: center;
}
/* ----------------------------
Media Queries
------------------------------- */
/* ALL...
JavaScript
/**
* @file GPT - Google Page Tracking solution(replaces DART)<br>
* Created: 014-12-26<br>
* This class requires {@link http://jquery.com/|jQuery Core 1.9.11} or higher.
* @modified 2014-12-26
* @requires jQuery-Core-1.9.11}
*/
/**
* Temp data holder to mimic the config.
* @type {Object}
*/
window.data = {
selector: '.ad-placeholder',
bn: '',
categories: 'cat=',
ct: 'article',
downstream: false,
inView: true,
isMobile: false,
isTable: false,
pageGuid: 'eeb73b65-726d-4b89-adae-b6872a801fdf',
pageId: 278568,
sourceId: 2052,
ugc: 0,
zone: '/generalwellness/general/mv',
gptid: 4213,
domain: 'everydayhealth'
};
/**
* Temp data holder to mimic the utp.
* @type {String}
*/
window.utp =
"p=37;tg=M;ed=2011-02-18;z=07020;ta=45;camp=cw;camp=psw;camp=dhc;camp=tr1;camp=yp2;nl=32;nl=114;u=57779542";
/**
* EDH - The global Everyday Health INC Namespace
* @namespace EDH
* @property {Constructor} GPTConstructor Creates an instance of {@link GPTConstructor|EDH.GPTConstructor}.
* @type {Object}
*/
window.EDH = window.EDH || {};
/**
* Immediately-Invoked Function Expression.
*
* @function
* @param {Object} $ - Global jQuery object.
* @param {Object} w - Global window object.
* @param {Object} d - Global document object.
*/
(function ($, w, d) {
'use strict';
/**
* Creates an instance of EDH.GPTConstructor.
*
* @exports EDH/GPTConstructor
* @namespace GPTConstructor
* @date 2014-12-26
* @author Richard Dillman <[email protected]>
*
* @property {Object} data All backend data sanatized
* @property {Object} slots All the ad slot information.
* @property {Object} attach All methods attached to the DOM.
* @property {Object} message Debugging messages.
* @property {Object} ad Ad manipulation methods.
* @property {Object} adops Testing and manipulation methods for AdOps.
* @property {Object} build Construction methods for the ads.
* @property...