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

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 6

Making Apocalyptic Sense

There are a couple of ways we can optimize the counting code above. 

1. assetScale and assetCode won’t change throughout the process, so we can set them once instead of every time the event happens.
2. Since we’re dealing with fractions of even the smallest division of currency, you can have eighteen or more decimals in your output, which is rather unruly. Let’s drop it to a manageable five.

Night of the Living Tip:

<script>
  let total = 0, scale = 0, decimalPlaces = 5, alerted = false;   
    if(document.monetization) {
      document.monetization.addEventListener(‘monetizationprogress’, function(e) {
      if( total == 0 ) { //Set scale and currency code the first time only
        document.getElementById(‘currency’).innerHTML = e.detail.assetCode;
        scale = e.detail.assetScale;
      }
      total += Math.round((e.detail.amount / Math.pow(10, scale))*Math.pow(10, decimaPlaces))/Math.pow(10, decimaPlaces); 
      //(e.detail.amount / Math.pow(10, scale) same calculation from before
      //Multiply the amount by 10 to the power of the number of decimal places you want
      //Round that number to an integer
      //Divide by 10 to the power of the number of decimal places you want to have, and you have a slightly less unruly decimated* number
      //*This should be “decimal,” but I still like “decimated”. It feels more apocalyptic.
      if(total >= 0.05 && !alerted) {
        alert(“Hey look everybody, there’s an amazing, awesome, and totally cool user over here!”);
        alerted = true;
      }
      document.getElementById(‘total’).innerHTML = total;
    }); 
  } 
</script>

Try it Out:

Demo File: https://undead.institute/files/monetization/005-making-apocalyptic-cents-opt.html

Funding Your Human Resistance Cell

Either using some of your own content or this provided content, create a page that, when monetized, does the following:

1. Adds exclusive content. (You can make all or a portion of the content exclusive to monetized users.)
2. Removes ads. (You can use the ad images from my examples Silent but Undeadly and Super Terrible)
3. Counts and displays the amount of money sent and the currency used.
4. Automatically turns off monetization after hitting a certain amount (the amount is up to you, but I’d advise you start with 0.01 or 0.02 of your currency while you’re getting it to work).

Start and Stop Monetization

Another thing you might wish to do is to start and stop monetization. For instance, if you have sponsored content on your site, it might feel weird or inappropriate to monetize it, or your sponsor may not want you to monetize that portion. Preventing the monetization meta tag from being applied to the page would be ideal, but in a large site, selectively dropping the meta element may be difficult. Having a way to swap out or change the monetization meta tag may come in handy. Or maybe you want monetization to be a user choice. You can have users enable it or disable it as they see fit. 

So let’s see how to programmatically start or stop monetization. We’ll add a button that allows the user to start monetization and another button to turn it off.

<main>
  <button id="startit">Start Monetization</button>
  <button id="stopit">Stop Monetization</button>
  <p>Current Monetization State: <span id="mstate"></span></p>
  <p>You have contributed <span id="total">0</span><span id="currency"></span> to our human resistance cell. May zombies never feast on your spleen!</p>
</main>
<script>
  let total = 0,
    scale = 0,
    decimalPlaces = 5,
    startBtn = document.getElementById('startit'), //Grab the start button
    stopBtn = document.getElementById('stopit'), //Grab the stop button
    monMeta = document.querySelector('meta[name="monetization"]');
    //Grab the payment pointer. Note: This code assumes the payment pointer was already placed on the page.
  if (document.monetization) {
    document.monetization.addEventListener('monetizationprogress', function(e) {
      if (total == 0) {
        document.getElementById('currency').innerHTML = e.detail.assetCode;
        scale = e.detail.assetScale;
      }
      total += e.detail.amount / Math.pow(10, scale);
      total = Math.round(total * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
      document.getElementById('total').innerHTML = total;
      document.getElementById('mstate').innerHTML = document.monetization.state;
    }); //Capturing and displaying the monetization state
    document.monetization.addEventListener('monetizationstart', function(e) {  
      document.getElementById('mstate').innerHTML = document.monetization.state;
    });
    document.monetization.addEventListener('monetizationstop', function(e) { 
      document.getElementById('mstate').innerHTML = document.monetization.state;
    });
    startBtn.addEventListener("click", function(e) {
      //Add the payment pointer to the head, disable this button, and enable the stop   button
      document.head.appendChild(monMeta);
      this.disabled = true;
      stopBtn.disabled = false;
    });
    stopBtn.addEventListener("click", function(e) {
      //Remove the payment pointer to the head, disable this button, and enable the start button
      monMeta.remove();this.disabled = true;
      startBtn.disabled = false;
    });
    startBtn.disabled = true;
  } else {
    //Show a message that the browser doesn't support   
    monetizationdocument.getElementById('mstate').innerHTML = "Monetization Not Supported";
    startBtn.disabled = true;
    stopBtn.disabled = true;
  }
</script>

Try it Out:

Demo File: https://undead.institute/files/monetization/006-start-stop.html

Now let’s fund your human resistance cell.