DEV Community

Cover image for 🐶 Akita: Get Involved in Web Monetization With or Without the Price Tag
Sharon for esse-dev

Posted on

🐶 Akita: Get Involved in Web Monetization With or Without the Price Tag

Web Monetization is an exciting new concept! It's paving the way for a more open, fair and inclusive web, to better support both users and creators. But, it's not exactly the easiest concept to understand. It took hours of research and reading before Web Monetization clicked for @elliot and I.

Once we had a grasp of Web Monetization, we realized that the journey to Web Monetization enlightenment was not an easy one. We could see a few major hurdles to overcome along the way:

  • Understanding how it works: if you don't have technical experience, you aren’t enabled to see the big picture and if you do have technical experience, you may still face a steep learning curve.
  • Being comfortable with what it costs: putting money into something you don't understand doesn't feel safe and you may not be in a position to put in money anyways.
  • How it relates to you: it’s not clear how Web Monetization affects the way you interact with websites.

Because of these hurdles, it can be difficult to see the value and broad potential of Web Monetization. We felt like there was a gap — although there’s a good amount of content explaining Web Monetization, we wished there was a free and easy way to experience Web Monetization.

What We Built

We built Akita, a browser extension that gives you insight into your involvement with Web Monetization.

Akita presents your top visited monetized sites, how much time you’re spending on them, and how much you’re contributing (or could contribute) to them.

If you’re looking to start supporting websites by streaming payment, Akita will give you a good idea of which sites you can directly support through Web Monetization. If you’re already using a Web Monetization payment provider, Akita gives you insight into your contributions to the website by showing you the time spent on the site and the amount of payment streamed as a result.

As Web Monetization becomes more common on websites, you’ll be able to see the evolution through Akita. We hope to see your favourite sites join the Web Monetization community! All of the data collected about your browsing and streamed payments is stored in local browser storage, so all of this information stays in your hands.

Overall, our goal with Akita is to increase Web Monetization exposure and awareness, and to help people understand how Web Monetization fits in with their regular browsing. We want to give people who aren’t using a Web Monetization provider a way to engage in payment streaming. As more Web Monetization providers pop up, users can choose providers that fit their needs based on the browsing data presented by Akita.

Submission Category: Foundational Technology


Demo

Akita Extension Icon

The Akita extension icon changes depending on the site you are visiting. If the site has monetization enabled, then the Akita icon will look something like:

Monetization Enabled Akita Icon

Otherwise, if the site does not have monetization enabled, then the icon will appear as:

Monetization Not Enabled Akita Icon

Akita Main View

Our browser extension helps you see the top monetized sites you visit and your involvement with Web Monetization at-a-glance.

Here's a screenshot of what Akita looks like if you're using a Web Monetization provider:

Monetization Enabled Akita Main View

You'll likely have some monetized sites that you visit often, but don't really spend much time on. Maybe you'd like to give them a little more love and spend a bit more time there, so that additional payment can be streamed to them. Check out the 'These monetized sites could use ♥️' section!

Needs Love Hover

Here's an example of what Akita looks like if you don't have a Web Monetization provider installed:

Monetization Not Enabled Akita Main View

Akita Video Demo


Link to Code

GitHub logo esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

Akita Icon

Akita

Software License: MIT Assets by Akita License: CC BY 4.0

Follow esse dev on Twitter Chat with us on Discord

Available on Chrome Web Store Available on Firefox Browser Add-ons Available on Microsoft Edge Add-ons

A browser extension that gives you insight into your engagement with Web Monetization, part of The Akita Project.

Akita presents your top visited monetized sites, how much time you’re spending on them, and how much you're contributing (or could contribute) to them.

We've built this for the Grant for the Web x DEV hackathon! We're so thrilled to have received a Runner Up Award for this project 🎉 - Winners Announcement.

Our license information can be found here and our license/copyright notices can be found in LICENSE. Assets in the assets/external directory are assets from another source or repository, which may not have been created by Akita contributors. Please refer to the per-asset/per-source license information in assets/external.

Grant for the Web x DEV Community Hackathon Runner Up Badge Grant for the Web x DEV Community Hackathon Runner Up (June 2020)
Grant for the Web Mid Level Grantee Image Grant for the Web Mid Level Grantee (October 2020)

Table of Contents

To try out Akita, follow the instructions in our README! We've provided instructions on how to install our browser extension on Chrome and Firefox. We hope to make it available in browser extension stores soon! We've also added some basic contribution guidelines if you'd like to join our effort. :)


How We Built Akita

Stack

  • JavaScript
  • HTML
  • CSS
  • Browser extension APIs

Challenges

Tracking time spent on a website (Issue, PR)

Finding suitable and simple APIs to track time was a bit challenging. We ended up using the Page Visibility API and checking performance.now() in a regular interval to log time spent on the site. Here's what we did: trackTimeOnSite().

Additionally, the inconsistent performance of new Date() and performance.now() on different browsers was surprising. Here's a simple benchmark we used to test performance of the two on Chrome vs Firefox.

Twitch monetization tracking (Issue, PR)

After getting our first few commits in, we noticed that we weren't tracking monetization properly on Twitch. For Twitch, the monetization meta tag is added dynamically after the page loads. Additionally, if Coil is not installed the meta tag is not added.

We learned that Coil is directly integrated with Twitch, so personalized payment pointers are generated and assigned to each streamer's page.

Unfortunately, due to how payment pointers are added to Twitch, we're unable to access the monetization meta tag when an Akita user who isn't using a Web Monetization provider visits the site. This means that we can't relay Twitch monetization info to our user, if they aren't using Coil. That's alright though, we decided to look into other ways we can bring value to a user who isn't using a provider.

Interesting Discoveries

Payment Pointer Verification (Issue, PR)

At first, checking for monetization on a site seemed pretty trivial — just check for the monetization meta tag. Then, we realized that checking for the tag only confirms that there is a payment pointer. But that doesn't mean that the payment pointer is actually valid.

To verify that the payment pointer itself is valid, we first grabbed the payment pointer from the monetization meta tag. Then, we resolved it from its raw format to the Interledger SPSP Endpoint format. If you're interested, you can check out some payment pointer syntax resolution examples here. After that, we made an HTTP request to the resolved endpoint, with an expectation of 200 OK as the response. If that expectation is fulfilled and we receive 200 OK as the response, then we deem the pointer to be valid. Something we missed during development is handling 3XX responses as a result of a vanity payment pointer being used. We've opened an issue for this and we'll work on resolving it post-hackathon.

(As a little sidenote, while reading the SPSP Specification I realized a typo and opened a PR to fix it. It was merged! It's a super tiny change, but it still felt really fulfilling to contribute.)

That's the summary of how we validated payment pointers — you can check out the code here if you'd like!

Providing a meaningful experience for those who aren't using a Web Monetization provider

Since Web Monetization is a pretty recent addition to the web ecosystem, there's going to be a lot of people unfamiliar with it. With this in mind, we spent a lot of time thinking about how we could provide value to people who aren't using a Web Monetization provider. For those already in-the-know and all set up with a Web Monetization provider, we want Akita to help keep track of their contributions in a non-bank-statement-y way. For those completely new to Web Monetization and those without a provider, the resources, tutorial and payment predictions are meant to help them learn about Web Monetization and get an idea of what their involvement could look like.

Additionally, @elliot received a Coil trial for the hackathon, which was fantastic because he was able to develop and test alongside Coil and I developed and tested without it. This allowed us to check for bugs and think about the user experience from both perspectives: with a Web Monetization provider and without.


Closing Thoughts

One of our favourite parts of this hackathon was chatting directly with the Grant for the Web team. Their comments and support have been insightful and delightful :). Their excitement has been especially encouraging and motivates us to really think about not only the tech behind our idea, but the underlying value of it.

Having submitted Akita for this hackathon, our next steps are drafting our application for Grant for the Web and getting started on our "next steps" GitHub issues.

Thanks so much for being a part of our journey! We hope you enjoy Akita and learn about your Web Monetization involvement through it. 🐶

Top comments (9)

Collapse
 
sharon profile image
Sharon

Thanks for following us on our hackathon journey Eric! We've really enjoyed hearing your thoughts along the way.

During our hackathon ideation process, @elliot and I discussed both user-facing dashboards and web operator-facing dashboards. Both of these are interesting areas to explore, but we decided to go with the user-facing dashboards and built Akita.

In addition to Coil, we think that Web Monetization Wallet Providers (like Uphold, GateHub, etc.) are in a good position to give analytical insight into web operators/creators/etc. It looks like they are already working on helping creators visualize income/revenue/usage, by putting together analytical dashboards. However, just like you said, it seems like existing dashboards are limited in data. This lack of data might be related to the emphasis on privacy and anonymity in the Web Monetization community. As such, there may not be much information associated with streamed payments that can be leveraged in operator-facing dashboards.

Since Akita is a user-facing dashboard, all of the browsing/payment data is stored locally in the user's browser, so the data stays in the user's hands. To expand Akita into something that gives operators/creators analytical insight would involve collecting users' data and sharing it with external parties. It's tricky to figure out how to maintain users' privacy while also giving operators/creators insight. With Akita, we're focused on helping users, but we think that the operator/creator side is an area that could definitely use more discussion.

Collapse
 
yawnxyz profile image
Jan Z

wow, your submission, product, and presentation is super impressive!!

Collapse
 
elliot profile image
Elliot

Thanks Jan Z!! Really glad to hear you like it all :)

Collapse
 
cyberdees profile image
☞ Desigan Chinniah ☜

Nice work, folks. Super exciting. I look forward to seeing Akita hit the add-on/extension stores soon. And taking it for a spin.

Collapse
 
elliot profile image
Elliot

Hey @cyberdees , thanks for the kind comment. Excuse the late reply, but I wanted to let you know that Akita is finally on the Chrome Web Store, check it out here.

We're working on Firefox and Edge add-on stores now.

Collapse
 
hammertoe profile image
Matt Hamilton

This is awesome! :) I Just installed it in Firefox... working great! Love the intro info with links to more info about Web Monetization etc.

Collapse
 
elliot profile image
Elliot

Thanks for trying it out Matt! Very happy to hear about your experience. We're so glad you like the intro.