💸 Fundme.js 💸
A simple but powerful client-side library to manage monetization on the web. Think of jQuery of monetization of the web.
✨ What is this, really (?)
Fundme.js is a tree-shakable library to manage monetization on the web. It will include common solutions for cookie-aware ads, cookie prompt, some components to integrate print-on-demand merchandise, and last but not least, the new and shiny Web Monetization API.
Currently it is still rather new and only support Web Monetization API, along with revenue share with Probabilitic Revenue Sharing method.
⚠️ This library is still work in progress and an experimental project, not ready for production! ⚠️
Get Started with Web Monetization API
Web Monetization API is a new web standard being developed to provide better payment alternative for publishers and creators other than ads. Learn more about it on https://www.webmonetization.org.
Using Fundme.js in Client-Side with bundler; webpack, rollup, parcel, etc
npm i fundme --save
Example with ES Modules:
Using Fundme.js in the browser
Fundme.js is designed to be fully tree-shakeable library thus it has quite a weird way to use in the browser than normal library. It needs to use IIFE (Immediately Invoked Function Expression) to get exported function that normally use in brackets when importing it with ES Module.
or with Browser native ES modules:
Using Fundme.js Server-Side in Node
Using Fundme.js with CommonJS - note that usage in Node is still Work In Progress, using this will give you an error.
const fund =const randomPointer =/*in Node.js environment, fund() will return one of the three pointers insteadof interacting with Web Monetization API meta tag.*/
WIP - Server-Side Fundme.js is in the roadmap for short-term goal.
💵 💴 Advanced Monetization - Revenue Share Among Contributors 💶 💷
Web Monetization API can only stream one pointer address due to performance issue, but you can split revenue using Probabilitic Revenue Sharing method that relies on chance whoever gets picked among contributors.
To split revenue,
fund(pointerAddress) must take an array containing strings or our own opiniated Web Monetization pointer object. Pointer address objects must have
weight in it.
Below is a scenario where author of a content get the most of the revenue of an article, while editor and proofreader get the same slice of the pie, while the website owner get the least (website owner's chance isn't being implictly set, but more that on the code).
const AuthorPointerAddress =address: '$wallet.example.com/author-address'weight: 40const EditorPointerAddress =address: '$wallet.example.com/editor-address'weight: 10const ProofreaderPointerAddress =address: '$wallet.example.com/proofreader-address'weight: 10// pointers with type string or those with no weight will use// default weight which is 5const WebsiteOwnerPointerAddress = '$wallet.example.com/website-owner'// calling the function...
Additionally, in case you don't like working with objects, it's possible to work solely with an array of strings but still declaring their chances. Fundme.js will read modifier
# at the end of the pointer address as a way to read a payment pointer's weight.
Inside HTML pages
It's possible to declare pointer address with
<template></template> tags. Instead of pointing payment address in function parameters you can set it beforehand in the HTML and let fundme.js scrape them during the browser runtime. For this to work,
<template></template> tag must have
data-fund-weight (weight is optional) attribute.
fund() must have no parameters when using HTML template monetization. Note that below are for examples purpose (you can use the template tags in HTML but please use ES Module import to use
fund() for now).
<!-- WARNING: you must close <template> tags with proper closing tag -->
If you prefer to work directly from JSON, like listing revenue sharing contributors from server-side or static sites, you can also write an array in
<script fundme type="application/json"> tags. (Note the
<!-- PROTIP: instead of IIFE script, you can use browser native ES Modules --><!-- be aware that browser ES Modules still isn't widely support by browsers -->
However, we have an opiniated (and recommended) way to declare payment pointers with familiar custom syntax. We're using
<template fundme></template> tags but without declare payment pointers and revenue share weights inside
data-fund and such, declaring them directly inside the tags instead.
$wallet.example.com/this-has-weight-ten#10;$wallet.example.com/this-has-weight-twelve#12;$wallet.example.com/this-has-weight-eight#8;<!-- PROTIP: instead of IIFE script, you can use browser native ES Modules --><!-- be aware that browser ES Modules still isn't widely support by browsers -->
Relative weight revenue sharing 🆕
As of Fundme.js 0.1.2, you can use fixed percentage based weight to calculate revenue sharing between a few parties.
One example of this is how a blogging platform provides a revenue sharing scheme for authors and their contributors (editors, proofreaders, etc), but it wants 20% of total revenue brought by Web Monetization API. The obvious way to do it is to roll 20% chance for platform's payment pointer before the actual revenue sharing happens; but what happens when the platform want to introduce other parties that also would get fixed chance for the revenue sharing, say, for affiliate referrers?
Fundme.js provides a simple way to do it:
In the example above, there are six different contributors (including the author) directly involved in working in one content. Notice that payment pointer for
$wallet.example.com/affiliate-referrer both have
% following the weight of their shares; what will happen is both of them will take 30% (20% for platform and 10% for referrer) of Web Monezitation revenue while split the rest of 70% shares to six contributors.
🧙 Short-term goal
- NEW: Advanced relative weight and nested payment pointer pools.
- NEW: make basic client-side affiliate referral system.
- Add bias system.
- Make some config to let Fundme.js operate in Server-Side.
- A way to get relative chances for contributors' addresses (something like CSS relative unit).
- RegEx safety net to warn website owners if one or more Web Monetization API pointer addresses are invalid or not following best practices.
- Simpler and more intuitive implementation that will goes nicely with current API standard.
- Make a JAMstack website to host documentation.
- Early and basic asynchronous ads support (like amp-ads).
- Integrate basic cookies prompt flow and make ads cookie aware if possible (by using non-personalized ads).
- Web components / Stencil to provide basic
VIP only contentfor Web Monetization subscribers.
- More robust API! Better tests!
🧙 Long term goal
I'm planning to make fundme.js a modular library to manage lots of kind monetization that can be imported invidually with ES Module, but still can get along nicely with each other to provide good experience for the users.
In additionally, integrating broad monetizations like affiliation marketing or print-on-demand is in future roadmap for fundme.js. This library actually is one of core features I'm using on my ProgNovel project, and future plans/features might change as I discover more during my development of ProgNovel.
Fundme.js is still in early phase development and thus API might change a lot! Not ready for production. Use scripts from
dist folder in the repo if you want to play with it locally.