This article was originally published at: https://www.blog.duomly.com/how-to-implement-web-monetization-tutorial/
Intro
Hi guys, today we will talk about web monetization.
Some of our friends or us have blogs, youtube channels, or websites.
Part of us do not do it for money but because it’s our hobby.
Anyway, in most cases, we have any cost of hosting or money that we need to pay for graphics or other maintenance.
Even if you do not plan a big business on that, probably it would be nice if there would be a bit of cash on that.
Now you do not need to implement big ad engines or wait for a long acceptance process in affiliate.
Especially if you want to get a few quick ads from a people that read your content, as help, we do get web monetization API.
If you prefer video, here is the youtube version:
What is web monetization
Web monetization API is a proposal of features for browsers that will help us to monetize our website.
It’s kinda like a connection between your app’s DOM and Interledger that make immediate micro transfers possible.
It’s a good idea, for example, for exclusive content, disable ads, or supporting your favorite authors.
How to implement web monetization
1. Github repository
You can find all the needed code for this project on our repository here:
2. Browser extension
For now, we can use one extension named Coil (we could create own or handle it without, but it will be easier to have this one).
As the first step, we can install one named Coil.
3. Angular project
You can download the full code from our repository or create a new project by ng-cli (you can install that by npm).
If you have installed angular-CLI, you can type
ng new web-monetization
I’ve used Bulma CSS. If you want, you can install that as well, or copy my project.
4. Implement meta tag for web monetization
If you have already installed project, you can go into project-folder/src/index.html and add this code to the
<meta name="monetization" content="$twitter.xrptipbot.com/your-username"/>
How to create your wallet for web monetization you can find in the repository or go to xrptipbot.com, next login by twitter, and your wallet pointer will look like “$twitter.xrptipbot.com/your-twitter-username”.
5. Create an HTML template
Go into the src/app/app.component.ts and create an HTML template.
<section class="section">
<div class="container">
<h1 class="title">Some coding tutorial <button class="button is-link" (click)="pay()">Simulate payment</button></h1>
<div class="box">
<h2 class="subtitle is-2">
The first example
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque possimus
alias neque odit quia quos dolorum totam nemo odio, quibusdam
repudiandae voluptatum. Perferendis sunt non, nemo aut quos minus
deleniti!
</p>
<code class="is-block">
const text = 'Here is text for the first example'; console.log(text);
</code>
</div>
<div class="box">
<h2 class="subtitle is-2">
The second part
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque possimus
alias neque odit quia quos dolorum totam nemo odio, quibusdam
repudiandae voluptatum. Perferendis sunt non, nemo aut quos minus
deleniti!
</p>
<code class="is-block">
const text = 'Here is text for the second example'; console.log(text);
</code>
</div>
</div>
</section>
6. Hide the code
Now you need to add *ngIf that will hide code when the app doesn’t notice monetization.
Add this code to all elements.
*ngIf="monetized"
7. Show notification about needed web monetization
In this step, we should create the notification box with a piece of information we need to have monetization to see the code.
Next, we should show this box only when monetization is not true.
Add this code to the every section after elements.
<div *ngIf="!monetized" class="notification is-primary">
You need monetization to see the code
</div>
8. Create an interface
Now we will do some logic.
Go to the src/app/app.component.ts and create an interface for the Document.
Add this code above the @Component decorator.
declare global {
interface Document {
monetization?: any;
}
}
9. Add OnInit and setup monetized
Next, we should add “implement OnInit” to the line with our class.
export class AppComponent implements OnInit {
As the second step, we will add this code after the title variable.
monetized = false;
10. Unlock content if web monetization
Now we will create the logic that will start with ngOnInit, create the event listener for ‚monetizationstart’, and will set up monetized prop as true, that will unlock our content.
Add this code after “monetized” prop.
ngOnInit() {
if (document.monetization) {
document.monetization.addEventListener('monetizationstart', () => {
this.monetized = true;
});
}
}
11. Fake payment
In the last step, we will fake enabled monetization by triggering event that we did set up a listener for.
Create a function named pay, create a new event called “monetizationstart”, and dispatch the event on the listener.
pay() {
const event = new Event('monetizationstart');
document.monetization.dispatchEvent(event);
}
Congratulations, now your app is ready, feel free to test it, and it’s a great way to use it as the first step to the projects that you can find in the next section of this tutorial.
Web monetization bonus hack
Web monetization browser API is a very fresh thing, and there are not a lot of projects and a huge community yet.
It can cause some issues for the potential user that would want to micro-sell his content to the users.
If we will follow Web Monetization API documentation, and implement that in their current way there it bases on the events.
No hash, no token, no session, or key authorization in the docs yet.
So less experienced users can follow that, and implement step-by-step by docs, which will be very easy to jump over.
Let’s take a look at my tutorial of the implementation. I’ve used similar to step by step tutorial by docs.
const event = new Event('monetizationstart');
document.monetization.dispatchEvent(event);
In this case, app checks if we fire “monetizationstart”, if yes, the app will unlock the content.
You can easily hack it around by paste code like this in the browser’s console.
const event = new Event('monetizationstart');
document.monetization.dispatchEvent(event);
It will unlock content for us, and we can even trigger an event with some custom data inside.
In this case, content should be unlocked after the call to our backend with some publicKey of a token.
That will return a response to the front-end with the unlocked content.
Web monetization project ideas
Here I’ve found 5 project ideas that you could develop and submit to the hackathon (maybe some of them will be interesting, and you will get the $$$ high prize):
-Own browser extension that can pay by shares
-A plugin that will help you to get faster registration approval
-First access to the content for the supporting users
-A plugin that will pay to the visitors for reading the content (watch and earn)
-Web monetization affiliate plugin that will share money with affiliate’s link owner
Conclusion
I love the idea of the Web Monetization API, and definitely will keep looking on for the next updates.
I think it can change the lives of tons of bloggers and written-content based startups.
It can be a great addition to ads as well.
I hope now you’re ready to make your step into the hackathon and provide real huge-value ideas for the content world.
Let’s do it!
If you would like to learn more about angular here are more tutorials:
How to build dApp with Solidity, Truffle and Angular 6 step by step
Thanks for reading,
Radek from Duomly
Top comments (2)
This is great documentation and should help many as they set off on the #gftwhackathon or respond to our CFP. Thanks for this!
Hi Chris, thanks!
I’m very happy you like that :)