Web Components for the Web Monetization API

The Web Monetization project is hugely important for the future of the independent web. Making it possible, even trivial, for web content producers to receive payment for their work without the need for ads or ad networks has enormous potential.

As a marketplace play, it has the issue of bringing both sides to the table. I have no doubt that content producers and website owners would be happy to include a meta tag on their page to potentially earn some money. The difficulty will be convincing regular internet users that paying for content will be worthwhile. This is a long term play though, so it is time to build the foundations now.

The Grant for the Web hackathon is a great idea, bringing developers on board to make better experiences for Web Monetization will help to make it easier to monetize one's site and build experiences that will entice users to start sending micropayments. As a web developer, I wanted to help drive that, and the project that I have started intends to make it easy for other web developers to create those monetization experiences.

What I built

(The start of) a collection of Web Components for Web Monetization that progressively enhance web pages with common behaviours that you might expect to implement for the Web Monetization API.

The first of these Web Components to be released into the world is the <wm-ad-hider> (released here on npm). <wm-ad-hider> sits in place of your website's ads and only displays the ads when monetization is not detected.

It is based off of the remove ads example on webmonetization.org but makes implementation as simple as including a script on the page:

<script src="https://unpkg.com/web-monetization-ad-hider@0.1.0/dist/wm-ad-hider.min.js" defer></script>

And then wrapping your ad code in the element and a <template> element:

<wm-ad-hider>
  <template>
    <!-- Your ad code goes here -->
  </template>
</wm-ad-hider>

When Web Monetization is detected and payments are being sent, your ads will not appear. If monetization starts later the ads will disappear.

I chose Web Components to build as they are part of the web platform themselves. There are no dependencies, no frameworks and very little work to use them.

Submission Category:

Foundational Technology

Demo

You can see this in action on my own site, where I have deployed the <wm-ad-hider> already. Just visit any blog post (like this one about my VSCode extension for using ngrok). If you start sending payments the ad will disappear.

Link to Code

philnash / web-monetization-components

A collection of web components you can use on your web monetized websites.

<💰> Web Monetization Components </💰>

A collection of web components you can use on your web monetized websites.

Currently available:

• <wm-ad-hider> - a component that hides ads if it determines the user is sending payments via web monetization
• <wm-exclusive-content> - a component that shows the child content if it determines the user is sending payments via web monetization

Ideas

• <wm-counter> - a component that shows how much you have made from the current visitor

LICENSE

MIT (c) 2020 Phil Nash

View on GitHub

How I built it

I took inspiration from the Web Monetization example, and my only other published Web Component, one I built to make it easier to use the Web Share API (you can check out the GitHub repo for the <web-share-wrapper> here). The component has no external dependencies at runtime. At development time it uses Rollup and Babel to transpile to browser friendly code and make it available in multiple formats, including CommonJS, ES Modules, UMD for the browser and a minified UMD. This way it should be easy for any developer to include it in their application regardless of how they like to require JavaScript files.

Additional Resources/Info

This is just the start of the project. I am looking for ideas and contributors for more Web Components that will bolster the Web Monetization effort. I hope that using Web Components for this will be embraced by developers all over.

I'd love to know what you think of this idea and the first component! Please let me know in the comments.

Best of luck to everyone else taking part in the hackathon and to Grant for the Web for changing the way the web works for the better.

Comments

[Serhii Kulykov]

The looks interesting. Please consider publishing ES2015 and not ES5 for modern browsers.
It's better to ship modern code and let the actual users decide if they need Babel.

[Phil Nash]

OK, version 0.2.0 now publishes four consumable versions of the component:

• A Babel transpiled, UMD version for use in browsers that don't support ES modules/latest syntax
• The above, but minified, to be used in CDNs like unpkg
• A CommonJS module
• An ES module (can be used in browsers that support ES modules)

Neither the CJS or ESM version go through Babel, so you can choose to transpile as part of your own build process.

Does that work better?

[Phil Nash]

Yeah, that's a good point. I kind of just followed my previous process, but that was from a couple of years ago.

The ES Module version should really be the raw written code that can be imported or loaded as a module in the page. I'll look into updating the build process for that (and for <web-share-wrapper> while I'm at it).

[Serhii Kulykov]

Thanks! Yes, I checked the version 0.3.0 at unpkg and it looks good now.

[Phil Nash]

Awesome, thanks for the feedback!

[ponyjackal]

I really love this , Phil
Thanks very much

[This Dot Media]

Another great article Phil! Thanks for breaking everything down 😊