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

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.