npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tab-ads

v1.1.24

Published

An NPM package to manage ads logic for Tab for a Cause

Downloads

32

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

kmjennisonkmjennison

Keywords

Readme

Build Status codecov npm

tab-ads

A module to manage ads on Tab for a Cause

Overview

The goal of this module is to move ads-specific Tab for a Cause logic out of the app code. It is responsible for:

  • defining the ad units that are available to show on Tab for a Cause
  • managing each bidder partner's configuration
  • calling for bids, ending the auction, fetching ads from the ad server, and displaying them
  • providing information on the winning ad for each ad slot

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.)

API

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 slot
  • adDataStore: storage of each bidder partner's raw and formatted bid responses, as well as Google Ad Manager's slot events

HTML Tags

We 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.

Building Prebid from Source

We build Prebid.js from source and keep the built Prebid code in source control. We do this because:

  1. We can build Prebid to include only the required modules. This reduces the JS bundle size.
  2. We can patch Prebid to ensure it works as expected in the context of a new tab page. Our users may view the new tab page within an iframe that has a 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:

  • modify files as needed in ./node_modules/prebid.js/*
  • add tests for the patches in prebidPatches.test.js
  • run prebid:create-patches to update the patches file
  • run yarn run prebid:build to put those patches into effect in the build Prebid file

Verifying Prebid Bidder Requests

In 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.

Testing In-Progress Builds in Local Projects

It's often helpful to test development builds of tab-ads in other local projects.

  1. Install yalc: yarn global add yalc
  2. In tab-ads: run yarn run dev:publish
  3. In the consuming project: run yalc add tab-ads