Blog Post

Zombie knocked out by a money bag

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 5

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle.

Continued from Part 4

Splitting Payments

If you load content from other sites via an iframe, you can let them monetize through your site too. Similar to the JavaScript API, this requires just a simple change to the current standards. The iframe element has an allow attribute, so all you need to do is add monetization to the allow attribute. Like so:

<iframe src="teds-human-resistance-cell.html" allow="monetization"></iframe>

If you need to allow full screen or something else, separate multiple values with a semicolon and a space:

<iframe src="teds-human-resistance-cell.html" allow="monetization; fullscreen"></iframe>

If both the parent page and the subpages in the iframe have monetization on, then the payment is split among all the pages.

Rewarding Users for Monetization

Showing exclusive content and/or removing advertising are two of the major rewards you can offer users who send you money. Other things you might try are allowing access to higher/faster support, exclusive access to content authors or other influential people from the site, access to download ebooks or PDFs of content (even if that content isn’t exclusive), or special podcast access. Even though there are several options and ways to implement them, when you get down to it, they all just show or hide something. I’ve set up a special page on the Undead Institute site where you can download a web monetization cheat sheet if you have web monetization on (typically sold in a pack of JavaScript cheat sheets for $2.99). If you don’t have a web monetization account or browser set up, you can sign up for my newsletter to get the cheat sheet.

Now let’s look at some examples.

“Wait…” says the disembodied voice in your head, “do I need web monetization to see these examples?” You will if you want to double-check that everything is working right, but it is not required for these examples. I’ve built two initiation mechanisms for each example. By default, if you have monetization on and load the page, it will use monetization. If you don’t have monetization enabled, you can fake it with the push of a button. Look for the “Fake Monetization” button to use the example without it being monetized.

Full disclosure: If you view the examples and don’t change the payment pointer, you will pay the author. He can assure you that all funds go toward the support of a delightful family with awesome kids and an amazing wife who, through no fault of their own, happen to share the author’s last name and living space.

Night of the Living Tip:

Monetization won’t work if you just download any of the example files and open them on your machine. The page must be served by a server.

Showing Exclusive Content

Rewarding your monetized visitors with exclusive content is an excellent way to encourage them to visit your site with monetization on. While you can use JavaScript to securely download that exclusive content, that type of implementation is beyond this book’s scope, so the way I’ve hidden the content in the demonstrations will be beaten by anyone who knows their way around web developer tools (lucky for us, zombies aren’t so good with such things)

While there are many ways to reward monetized visitors with exclusive content, the major part of the code is something like this:

if(document.monetization) {
  document.monetization.addEventListener("monetizationstart", function() {
    loadExclusiveContent();
  })
}

First, you test to see if the browser supports document.monetization. If the browser supports it, add an event listener so that you can show exclusive content if the client initializes a micro payment.

If the user turns off monetization in their browser, your content will continue to show, so let’s create an eventlistener that hides the content once monetization has stopped.

if(document.monetization) {
  document.monetization.addEventListener("monetizationstop", function(e) {
    if( e.finalized == true ) {
      removeExclusiveContent();
    } 
  }); 
}

Again, to avoid random and/or undefined errors, we want to check if the browser supports monetization. If so, we add an event listener to listen for when the monetization might stop. (You can always put both event listeners in the same document.monetization if block.) That said, if the monetization stops but the finalized flag hasn’t been set, monetization could restart, so we only want to remove the exclusive content if the transaction has been finalized.

To Be Continued