Remove ads

Give your web monetized visitors an ad-free experience by hiding ads when the monetization event fires. Since the monetization event only fires when an outgoing payment request is successfully created, your ads will continue to appear to non-web monetized visitors.

Before you begin

For visitors without Web Monetization, ads will appear as soon as the page loads.

For visitors with Web Monetization in their browser, there’s a three-second grace period before ads are shown. This gives Web Monetization a chance to initialize and prevent ads from briefly appearing to paying visitors.

If Web Monetization…

Initializes within the grace period, then ads are removed
Fails to initialize within the grace period, then ads are shown
Initializes any time after the grace period, then ads are removed

Example

The example below shows how to remove ads from web monetized visitors.

<head>
  <!-- Set the href to your own wallet address -->
  <link rel="monetization" href="https://wallet.example.com/alice" />

  <script>
    const adCode =
      '<div style="border:1px solid #f00;color:red;margin:20px">Ad! Buy product A! Ad!</div>'
    function showAds() {
      document.getElementById('ad').innerHTML = adCode
    }

    function removeAds() {
      document.getElementById('ad').remove()
    }

    let hasPaid = false
    if (window.MonetizationEvent) {
      const link = document.querySelector('link[rel="monetization"]')
      link.addEventListener('monetization', () => {
        hasPaid = true
        removeAds()
      })
    }

    window.addEventListener('load', () => {
      if (!window.MonetizationEvent) {
        showAds()
      } else {
        setTimeout(() => {
          if (!hasPaid) {
            showAds()
          }
        }, 3000)
      }
    })
  </script>
</head>

<body>
  <div id="ad"></div>
  Here's where your site's content will go!
</body>

How it works

Let’s start with the code for showing an ad.

const adCode =
  '<div style="border:1px solid #f00;color:red;margin:20px">Ad! Buy product A! Ad!</div>'
function showAds() {
  document.getElementById('ad').innerHTML = adCode
}

We want to bind the monetization event to its respective event handler if the visitor is web monetized. This prevents the ad from loading on the page once Web Monetization initializes. Assuming it initializes within the grace period, the ad isn’t added to the page at all. This means any related images and trackers aren’t loaded either.

The hasPaid variable in the timer is for when/if Web Monetization starts after the grace period.

let hasPaid = false
if (window.MonetizationEvent) {
  const link = document.querySelector('link[rel="monetization"]')
  link.addEventListener('monetization', () => {
    hasPaid = true
    removeAds()
  })
}

As soon as the page loads, the ad will immediately appear to any visitor who isn’t web monetized. This is handled via !window.MonetizationEvent, shown below.

If the visitor has Web Monetization in their browser, then the monetization event must fire within 3 seconds (3000ms) to indicate that Web Monetization has initialized. If it doesn’t initialize by the timeout, the ad is shown to the visitor.

window.addEventListener('load', () => {
  if (!window.MonetizationEvent) {
    showAds()
  } else {
    setTimeout(() => {
      if (!hasPaid) {
        showAds()
      }
    }, 3000)
  }
})

Interactive example

This example simulates showing and hiding an ad based on a visitor’s Web Monetization state.

The example doesn’t require you to have Web Monetization enabled in your browser and no real payments are occurring.

Click View as Web Monetized/non-Web Monetized visitor to toggle your monetization state. If source files appear instead of the example, click View App in the bottom-right corner.