Skip to content

Instantly share code, notes, and snippets.

@CGeohagan
Last active March 17, 2025 17:28
Show Gist options
  • Save CGeohagan/2980b48d6c39a90f2eb6a85ddea1c30c to your computer and use it in GitHub Desktop.
Save CGeohagan/2980b48d6c39a90f2eb6a85ddea1c30c to your computer and use it in GitHub Desktop.
Conductor on HyphenSocial Popsugar
<script src='https://micro.rubiconproject.com/prebid/dynamic/7470.js' async></script>
<script src='https://c.aps.amazon-adsystem.com/apstag.js' async></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script src='https://cdn.concert.io/lib/concert-ads/v2-latest/concert_ads.js' async></script>
<script>
var CONCERT_ADS_CONFIG = 'https://concertads-configs.vox-cdn.com/hyphensocial/popsugar/config.json';
var urlParams = new window.URLSearchParams(window.location.search);
var concertConfigUrlParam = urlParams.get('concert_config_url');
var configUrl = concertConfigUrlParam ? concertConfigUrlParam : CONCERT_ADS_CONFIG;
var install = function() {
var dfpVariables = {
network: ['popsugar'],
'page_type': ['hyphensocial'],
'hyphensocial-source': 'hyphen-paid'
};
window.starting_campaign = new window.URLSearchParams(document.location.search).get('utm_campaign');
if (window.starting_campaign) {
dfpVariables['hyphensocial-campaign'] = window.starting_campaign;
}
var args = {
cmd: [],
slug: '/172968584/US/popsugar/hyphensocial',
dfpVariables: dfpVariables
};
var concertAds = new window.ConcertAds(args);
concertAds
.loadRemoteConfig(configUrl)
.then(function() {
concertAds.install();
})
.catch(function(err) {
console.log('There was an error loading the ConcertAds remote config', err);
});
};
if (!window.ConcertAds) {
window.addEventListener('concertAdsReady', function() {
install();
});
} else {
install();
}
</script>
<style>
.m-ad {
flex-grow: 1;
line-height: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
}
.m-ad iframe {
margin: 0 auto;
max-width: 100%;
}
/* Overriding elementor css that sets the iframe width to 100% */
.m-ad__mobile_in_body iframe {
width: auto;
}
.m-ad__collapsed {
display: none;
}
.dynamic-js-slot {
overflow: hidden;
}
.dynamic-js-slot:before {
transition: opacity .15s;
}
.dfp_ad--held-area {
border: 1px solid rgba(250, 250, 250, 0.0);
overflow: hidden;
margin-left: auto;
margin-right: auto;
position: relative;
}
.dfp_ad--held-area:before {
content: "AD";
position: absolute;
width: 100%;
transform: translateY(-50%);
top: 50%;
left: 0;
text-align: center;
font-size: 16px;
color: rgba(250, 250, 250, 0.0);
opacity: 1;
z-index: 1;
}
.dfp_ad--held-area > div {
z-index: 2;
position: relative;
}
.dfp_ad--is-empty {
height: 1px;
border: none;
}
.dfp_ad--is-empty:before {
height: 0;
overflow: hidden;
}
.dfp_ad--is-filled {
border: none;
height: auto;
}
.dfp_ad--is-filled:before {
opacity: 0;
}
.header_slot {
min-width: 728px;
min-height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
#headerUnit {
min-width: 728px;
}
@media (max-width: 800px) {
.header_slot {
min-width: 320px;
min-height: 50px;
}
#headerUnit {
min-width: 320px;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment