Monetization

• Backcountry took the 3rd place in the Web Monetization category.
  • It was a new category introduced in 2019, championed by Coil.
  • The category had 48 submissions, out of 245 entries in total.
• Web Monetization is a new and exciting standard proposal which makes it possible to stream micropayments from consumers of content to creators.
  • As a content creator, you need to create a wallet which acts as your tip jar, receiving micropayments from users who visit your website.
  • As a content consumer who wants to support creators, you need a subscription with a monetization provider. You top up your account and the provider then sets up the stream of micropayments from your browser to the content creator.
    • As of this writing, Coil is the only provider available.
    • The browser must support the API in order to start streaming micropayments. Until browser support it natively, Coil provides a polyfill extension for Chrome and Firefox.
      • On mobile, you can also use Puma Browser.
  • See https://webmonetization.org/ for more details.
• We followed the 100+20 rule when integrating Web Monetization in Backcountry.
  • The rule encourages content creators to reward paying users with extra features which don't influence the core gameplay too much. The game should be playable and enjoyable for non-paying users, too.
  • A good candidate for such extra features are cosmetic items, like hats and outfits.
  • Thanks to all characters being procedurally generated in Backcountry, allowing players to randomly change the outfit of their character was only a few lines of code. All we had to do was modify the daily seed from which the player character was generated!
• Web Monetization is easy to integrate, with its API being small and focused on just one thing.
  • A meta element in the head points to the address of your wallet. It also lets the browser know that the website supports Web Monetization and can receive micro payments.

          <meta name="monetization" content="$coil.xrptipbot.com/3lcUCVS5Rm-e6Ch_O7vpQA">

  • We use a boolean flag to store the status of the Web Monetization support in the user's browser.

    interface GameState {
        // ..
        MonetizationEnabled: boolean;
    }
    
    class Game implements GameState {
        // ..
        public MonetizationEnabled = false;
    }

  • Whenever the player triggers the GoToStore action, we check if the browser supports Web Monetization (document.monetization exists) and whether the stream of micropayments has started (document.monetization.state === "started").

    case Action.GoToStore: {
        game.MonetizationEnabled =
            document.monetization && document.monetization.state == "started";
        game.PlayerXY = game[Get.Walking][game.Player!];
        game.WorldFunc = world_store;
        setTimeout(game.WorldFunc, 0, game);
        break;
    }

  • When the Store scene loads, we refer to the MonetizationEnabled flag stored on the Game instance to show the Change Outfit button, or a hint to enable Web Monetization by registering with Coil.

    function Store(state: GameState) {
        return `
            (..)
            <div onclick="$(${Action.ChangePlayerSeed});" style="
                font: italic bold small-caps 7vmin serif;
                position: absolute;
                bottom: 15%;
                left: 10%;
            ">
                ${
                    state.MonetizationEnabled
                        ? "Change Outfit"
                        : `
                            <s>Change Outfit</s>
                            <div style="font: italic 5vmin serif;">
                                Become a Coil subscriber!
                            </div>
                        `
                }
            </div>
            (..)
        `;
    }

  • Lastly, we also make the same MonetizationEnabled check when we handle the ChangePlayerSeed action. It's a good practice to verify that the micropayments stream has started also when the business logic runs, and not only when presenting the UI.

    case Action.ChangePlayerSeed: {
        if (game.MonetizationEnabled) {
            game.PlayerSeed = Math.random() * 10000;
        }
        setTimeout(game.WorldFunc, 0, game);
        break;
    }

• We'll keep an eye out on the Web Monetization proposal and we hope it will become a viable and sustainable alternative for monetizing content on the web.
  • Check out Grant for the Web, an initiative by Coil, Mozilla, and Creative Commons, which aims to develop Better business models for the web through open standards like Web Monetization.