使用 Coil 进行网站货币化(并为支持者移除广告)

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

过去,我尝试过一些基于“微支付小费”的网站。它们来来往往。这很正常。从发布者的角度来看,这是一种低投入的方式。我从未赚到很多钱,但通常足以让我觉得值得。

现在 Bruce 让我尝试使用 Coil。它吸引我的原因有几个。

  • 目标是使其基于 一个真正的 Web 标准(!)
  • Coil 设计精良。它是读者实际订阅的服务,以及一个浏览器扩展(适用于 ChromeFirefox),用于向发布者付款。
  • 资金最终会存入 Stronghold 账户1。我对这些账户了解不多,但设置起来非常简单,设计也很精良。
  • 所有操作都是匿名的。我无法访问、不知道或存储任何最终通过这些微支付支持网站的用户的信息。
  • 即使每个人都是匿名的,我仍然可以为支持者做一些事情,例如不显示广告。

它只是网站上的一个标签。

在使用 Coil 注册并拥有 Stronghold 账户后,您真正需要做的就是在网站的 <head> 中添加一个 <meta> 标签。这是我的标签

<meta name="monetization" content="$pay.stronghold.co/1a1b91b23306ab547228c43af27ac0f2411">

拥有有效 Coil 订阅并使用 Coil 浏览器扩展的读者将开始向您(发布者)发送微支付。非常酷。

非货币化网站。
货币化网站(并且支付成功)

现金

我已经赚到了一美元!

由于所有操作都是匿名的,因此我没有设置任何逻辑来防止在管理员查看网站时注入元标签。我敢打赌,大部分钱都是我自己付给自己和 Bruce 的。

最大的希望是,一旦这成为 Web 标准并有大量用户选择使用它,它就能成为一个不错的收入来源。我猜测,如果它确实成为一个成功的参与者,那么实现这一点可能需要数年时间。

思考全球经济也很有趣。对我来说的一美元与对世界各地每个人的意义不同。在世界的一些地方,较少的钱可以走得更远。这有可能开辟一条收入来源,而像广告这样的东西在核算方面可能并不那么出色。我听到广告行业的人谈论“不良地理位置”,这实际上是指广告商避免投放广告资金的地理位置。

奖励用户成为支持者

就像我提到的,这完全是匿名的。您无法准确地向人们发送免费电子书或其他任何东西以感谢他们的捐赠。但是浏览器本身可以知道当前用户是否正在向您付款。

它本质上就像……用户没有向您付款

document.monetization === undefined

用户可能正在向您付款,哦,等等,请稍等

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

用户正在向您付款

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

您可以随心所欲地使用它。也许您可以在需要时生成一个安全的下载链接,如果您真的想赠送电子书或提供一些“仅限订阅者”的内容或任何其他内容。

不向支持者显示广告

广告通常也由 JavaScript 提供支持。在这个网站的全局 JavaScript 中,我已经有一个名为 csstricks.getAds(); 的函数,它会启动该过程。这允许我在某些情况下包装此函数调用,即使我根本不想启动广告过程,就像这样。

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

不过,这有点棘手,因为 document.monetization.state === 'started' 不会立即发生。幸运的是,当该值更改时会触发一个事件。

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

它可以变得更加复杂:验证会话,根据付款金额执行不同的操作等。这是他们解释器中的一个设置

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();
}

我发现 monetizationstart 事件需要几秒钟才能触发,因此需要一段时间才能确定用户是否正在积极货币化。几秒钟对于在开始获取广告之前等待来说相当长,因此我不确定最佳方法是什么。您可能希望立即启动广告请求,然后根据结果选择是否注入它们(或隐藏它们)。根据这些广告的跟踪方式,这可能会产生虚假印象或损害您的点击率。您的里程可能会有所不同。

Web 标准内容是如何发挥作用的?

这是提案。 我不能假装完全理解它,但我认为其要点是您根本不需要浏览器扩展,因为该概念已内置到浏览器中。您也不需要 Coil;它将成为众多选项之一。


1 据我了解,更多“钱包”即将推出,并且 Stronghold 不会永远是唯一的选择。