Last active
August 1, 2024 17:19
-
-
Save CGeohagan/7aef73952a8d863c34d007b423084055 to your computer and use it in GitHub Desktop.
Concert Ads on Ringer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <! -- Put these divs in the markup where you want an ad to go. --> | |
| <! -- The leaderboard will place a 728x90. --> | |
| <div class="concert-wrapper concert-wrapper--leaderboardSlot"></div> | |
| <! -- The medrec will place a 300x250. --> | |
| <div class="concert-wrapper concert-wrapper--medRecSlot"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useEffect } from "react"; | |
| // Make sure this component is loaded on every page you want ads | |
| function ConcertAds(props) { | |
| useEffect(() => { | |
| const install = () => { | |
| if (window.concertAdsInstalled) { | |
| console.log( | |
| "We are not installing Concert Ads because it has already been installed.", | |
| ); | |
| return; | |
| } | |
| window.concertAdsInstalled = true; | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const remoteConfigParam = urlParams.get("concert_config_url"); | |
| const configUrl = (remoteConfigParam && remoteConfigParam.startsWith('https://concertads-configs.vox-cdn.com/')) ? | |
| remoteConfigParam : 'https://concertads-configs.vox-cdn.com/ringer/config.json'; | |
| const dfpVariables = { | |
| affiliation: [props.affiliation], // Affiliation if available | |
| page_type: [props.pageType], // Page type if available | |
| keywords: [props.keywords], // Page keywords if available | |
| title: [props.title], // Title of the page if available | |
| entry_id: [props.entryId], // Entry/Page id if available | |
| } | |
| const concertAds = new window.ConcertAds({ | |
| cmd: [], | |
| slug: '/172968584/ringer/theringer.com', | |
| dfpVariables | |
| }); | |
| window.concertAds = concertAds; | |
| concertAds | |
| .loadRemoteConfig(configUrl) | |
| .then(() => { | |
| concertAds.install(); | |
| window.CONCERT_ADS_CONFIG = concertAds.settings; | |
| }) | |
| .catch((err) => | |
| console.log(`There was an error loading Concert Ads: ${err}`) | |
| ); | |
| }; | |
| if (!window.ConcertAds) { | |
| window.addEventListener("concertAdsReady", install); | |
| return () => { | |
| window.removeEventListener("concertAdsReady", install); | |
| }; | |
| } else { | |
| install(); | |
| } | |
| }, []); | |
| return null; | |
| } | |
| export default ConcertAds; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Put these styles in a global css file */ | |
| .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%; | |
| } | |
| .m-ad__collapsed { | |
| display: none; | |
| } | |
| .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; | |
| border: none; | |
| } | |
| .dfp_ad--is-filled:before { | |
| opacity: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <! -- Put these scripts somewhere in the head tag --> | |
| <script src="https://micro.rubiconproject.com/prebid/dynamic/7470.js" async></script> | |
| <script src="https://c.amazon-adsystem.com/aax2/apstag.js" async></script> | |
| <script src="https://www.googletagservices.com/tag/js/gpt.js" async></script> | |
| <script src="https://cdn.concert.io/lib/concert-ads/v2-latest/concert_ads.js" async></script> | |
| <script src="https://cdn.concert.io/lib/concert-concierge.2.10.1.min.js" async></script> | |
| </head> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment