search
HomeWeb Front-endCSS TutorialSite Monetization with Coil (and Removing Ads for Supporters)

Site Monetization with Coil (and Removing Ads for Supporters)

I’ve tried a handful of websites based on “tip with micropayments” in the past. They come and go. That’s fine. From a publisher perspective, it’s low-commitment. I’ve never earned a ton, but it was typically enough to be worth it.

Now Bruce has me trying Coil. It’s compelling to me for a couple reasons:

  • The goal is to make it based on an actual web standard(!)
  • Coil is nicely designed. It’s the service that readers actually subscribe to and a browser extension (for Chrome and Firefox) that pays publishers.
  • The money ends up in a Stronghold account1. I don’t know much about those, but it was easy enough to set up and is also nicely designed.
  • Everything is anonymous. I don’t have access to, know anything about, or store anything from the users who end up supporting the site with these micropayments.
  • Even though everyone is anonymous, I can still do things for the supporters, like not show ads.

It’s a single tag on your site.

After signing up with Coil and having a Stronghold account, all you really need to do is put a tag in the

of your site. Here’s mine:
<meta name="monetization" content="$pay.stronghold.co/1a1b91b23306ab547228c43af27ac0f2411">

Readers who have an active Coil subscription and are using the Coil browser extension will start sending micropayments to you, the publisher. Pretty cool.

Cash money

I’ve already made a dollar!

The big hope is that this becomes a decent source of revenue once this coerces a web standard and lots of users choose to do it. My guess is it’ll take years to get there if it does indeed become a winning player.

It’s interesting thinking about the global economy as well. A dollar to me isn’t the same as a dollar to everyone around the world. Less money goes a lot further in some parts of the world. This has the potential to unlock an income stream that perhaps things like advertising aren’t as good at accounting for. I hear people who work in advertising talking about “bad geos” which literally means geographic places where advertisers avoid sending ad dollars.

Reward users for being supporters

Like I mentioned, this is completely anonymous. You can’t exactly email people a free eBook or whatever for leaving a donation. But the browser itself can know if the current user is paying you or not.

It’s essentially like… user isn’t paying you:

document.monetization === undefined

User might be paying you, oh wait, hold on a second:

document.monetization && document.monetization.state === 'pending'

User is paying you:

document.monetization && document.monetization.state === 'started'

You can do whatever you want with that. Perhaps you can generate a secure download link on the fly if you really wanted to do something like give away an eBook or do some “subscriber only” content or whatever.

Not showing ads to supporters

Ads are generally powered by JavaScript anyway. In the global JavaScript for this site, I literally already have a function called csstricks.getAds(); which kicks off the process. That allows me to wrap that function call in some logic in case there are situations I don’t even wanna bother kicking off the ad process, just like this.

if (showAdsLogic) {
  csstricks.getAds();
}

It’s slightly tricky though, as document.monetization.state === 'started' doesn’t just happen instantaneously. Fortunately, an event fires when that value changes:

if (document.monetization) {
  document.monetization.addEventListener("monetizationstart", event => {
    if (!document.monetization.state === "started") {
      getAds();
    }
  });
} else {
  getAds();
}

And it can get a lot fancier: validating sessions, doing different things based on payment amounts, etc. Here’s a setup from their explainer:

if (document.monetization) {
  document.monetization.addEventListener("monetizationstart", event => {
    // User has an open payment stream

    // Connect to backend to validate the session using the request id
    const { paymentPointer, requestId } = event.detail;
    if (!isValidSession(paymentPointer, requestId)) {
      console.error("Invalid requestId for monetization");
      showAdvertising();
    }
  });

  document.monetization.addEventListener("monetizationprogress", event => {
    // A payment has been received

    // Connect to backend to validate the payment
    const {
      paymentPointer,
      requestId,
      amount,
      assetCode,
      assetScale
    } = event.detail;
    if (
      isValidPayment(paymentPointer, requestId, amount, assetCode, assetScale)
    ) {
      // Hide ads for a period based on amount received
      suspendAdvertising(amount, assetCode, assetScale);
    }
  });
  // Wait 30 seconds and then show ads if advertising is no longer suspended
  setTimeout(maybeShowAdvertising, 30000);
} else {
  showAdvertising();
}

I’m finding the monetizationstart event takes a couple of seconds to fire, so it does take a while to figure out if a user is actively monetizing. A couple of seconds is quite a while to wait before starting to fetch ads, so I’m not entirely sure the best approach there. You might want to kick off the ad requests right away, then choose to inject them or not (or hide them or not) based on the results. Depending on how those ads are tracked, that might present false impressions or harm your click-through rate. Your mileage may vary.

How does the web standard stuff factor in?

Here’s the proposal. I can’t pretend to understand it all, but I would think the gist of it is that you wouldn’t need a browser extension at all, because the concept is baked into the browser. And you don’t need Coil either; it would be just one option among others.

1 I’m told more “wallets” are coming soon and that Stronghold won’t be the only option forever. ↩

The above is the detailed content of Site Monetization with Coil (and Removing Ads for Supporters). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool