A module to manage ads on Tab for a Cause
The goal of this module is to move ads-specific Tab for a Cause logic out of the app code. It is responsible for:
Some of the motivation for this module is to handle bidder partners that are not part of the Prebid ecosystem or need to run outside Prebid. (In a way, it's like a mini Prebid in which Prebid is one of the bidder partners.)
fetchAds(config): fetch ads for specified ad units. See config.js for config options.
AdComponent: returns a React AdComponent, which handles ad display.
getAvailableAdUnits: returns an object of available ad units (leaderboard, rectangleAdPrimary, and rectangleAdSecondary). See getAvailableAdUnits.js.
In addition, the module sets window.tabAds with two properties useful for debugging:
getAllWinningBids: a function that returns information on the winning ad for each ad slotadDataStore: storage of each bidder partner's raw and formatted bid responses, as well as Google Ad Manager's slot eventsWe must include the following scripts immediately after the <body> tag and before calling tab-ads:
<!--
Google Publisher Tag
-->
<script type="text/javascript">/* eslint-disable */
var googletag = window.googletag || {}
googletag.cmd = googletag.cmd || []
googletag.cmd.push(() => {
googletag.pubads().disableInitialLoad()
googletag.pubads().setTagForChildDirectedTreatment(0)
})
var gads = document.createElement('script')
gads.async = true
gads.type = 'text/javascript'
var useSSL = document.location.protocol === 'https:'
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js'
var head = document.getElementsByTagName('head')[0]
head.appendChild(gads)
</script>
<!--
Amazon apstag
-->
<script>/* eslint-disable */
try {
!function(a9,a,p,s,t,A,g){if(a[a9])return;function q(c,r){a[a9]._Q.push([c,r])}a[a9]={init:function(){q("i",arguments)},fetchBids:function(){q("f",arguments)},setDisplayBids:function(){},targetingKeys:function(){return[]},_Q:[]};A=p.createElement(s);A.async=!0;A.src=t;g=p.getElementsByTagName(s)[0];g.parentNode.insertBefore(A,g)}("apstag",window,document,"script","//c.amazon-adsystem.com/aax2/apstag.js");
} catch(e) {
console.error(e)
}
</script>
We could consider adding a getAdCodeForHTMLBody() function to tab-ads, which apps could use to insert scripts into the page.
We build Prebid.js from source and keep the built Prebid code in source control. We do this because:
chrome-extension:// or moz-extension:// protocol, and this can break bidders that need to know the correct domain and referrer.To build a new version of Prebid:
yarn run prebid:build
To modify the Prebid patches:
./node_modules/prebid.js/*prebidPatches.test.jsprebid:create-patches to update the patches fileyarn run prebid:build to put those patches into effect in the build Prebid fileIn the new tab page iframe context, we need to ensure that Prebid bidders send the correct page URL and referrer info. We don't have automated tests for this yet. To verify, we need to load the page in a new tab page iframe and inspect each partner's network request.
We should check this every time we upgrade Prebid.
Here's what to check for each partner, assuming the iframed page is https://example.com/newtab/:
| Partner | Request URL | What to check |
|---|---|---|
| Magnite | https://fastlane.rubiconproject.com/a/api/fastlane.json | Query param rf is https://example.com/newtab/ |
| Media.net | https://prebid.media.net/rtb/prebid | Payload site.domain is example.com and site.page is https://example.com/newtab/ |
| OpenX | https://tabforacause-d.openx.net/w/1.0/arj | Query param ju is https://example.com/newtab/ |
| Pulsepoint | https://bid.contextweb.com/header/ortb | Payload site.page and site.ref are both https://example.com/newtab/ |
| Sonobi | apex.go.sonobi.com/trinity.json | Query param ref is https://example.com/newtab/ |
| Unruly | https://targeting.unrulymedia.com/unruly_prebid | Payload refererInfo.referer is https://example.com/newtab/ |
GDPR and CCPA: We should manually ensure that data privacy preferences are passed to ad partners. We use tab-cmp as our consent management platform. See tab-cmp's "Ad Partners" sections of its test checklist for what to verify in ad partner requests.
It's often helpful to test development builds of tab-ads in other local projects.
yarn global add yalctab-ads: run yarn run dev:publishyalc add tab-adsFAQs
An NPM package to manage ads logic for Tab for a Cause
We found that tab-ads demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.