Remove ads

May 25, 2020

You can make sure web monetized visitors have a smooth experience by removing ads. Here is a component that removes ads for web monetized viewers.

import React, { useEffect, useState } from "react"
import "antd/dist/antd.css"
import { Switch } from "antd"

export const Ad = ({ img, alt, targetUrl }) => {

  const [showAds, setShowAds] = useState(false)
  const [monetized, setMonetized] = useState(false)

  useEffect(() => {
    if (typeof document !== "undefined") {
      let hasPaid = false
      if (document.monetization) {
        document.monetization.addEventListener("monetizationstart", () => {
          hasPaid = true
          setShowAds(false)
        })
        // There's a three-second grace period for Web Monetization to initialize.
        setTimeout(() => {
          if (!hasPaid) {
            setShowAds(true)
          }
        }, 3000)
        // As soon as the page loads, any visitor who does not have Web Monetization (!document.monetization) sees the ad immediately.
      } else {
        setShowAds(true)
      }
    }
  }, [])

  return (
    <div>
      <Switch checkedChildren="View as non-monetized user" unCheckedChildren="View as monetized user"
              onChange={() => setMonetized(!monetized)} style={{ marginBottom: "10px" }}/>
      <div>
        {(showAds && !monetized) && <a href={targetUrl}><img src={img} alt={alt}/></a>}
      </div>
    </div>
  )
}

Demo

Created by Petr Janík, a student of informatics in Brno, Czech Republic and a huge fan of web development. Follow me Twitter