loading...
Cover image for 🐶 Akita: Get Involved in Web Monetization With or Without the Price Tag
dog-s

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

sharon profile image Sharon ・7 min read

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 dog-s / akita

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

Akita Icon

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.

We've built this for the Grant for the Web x DEV hackathon!


Table of Contents


Installing

Check out the instructions to install from source here. We plan to put Akita on browser extension stores soon - please stay tuned. :)


Contributing

We'd love to have you be a part of Akita! Please feel free to open issues or create pull requests. Check out our Contributing Guidelines to get started!


Screenshots & Demos

Akita Extension Icon

The Akita extension icon changes depending on the site you…

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. 🐶

Posted on by:

sharon profile

Sharon

@sharon

software dev. climber of walls and silks. short films are neat.

dog-s

We're a software dev duo exploring various tech projects. Right now, we're working on a project for the Grant for the Web x DEV hackathon!

Discussion

markdown guide
 

Congratulations! Well done to you both and I have definitely been enjoying following your dev.to posts detailing the journey.

Do you and Elliot have any intentions to give analytical insight into web operators / creators / etc? I might be wrong but as far as I know there isn't a great dashboard at the moment to track your "income / revenue / usage". Im sure direct B2B integration with Coil comes with insight but Im referring more to the general WM creators.

 

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.

 

Awesome comments! Thrilled to see the teams building these tools have spent A LOT more time thinking about the answers to these questions than I have.

Good luck with GFTW and looking forward to seeing what else you and Elliot release!

 

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

 

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

 

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

 

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

 

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