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

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 5

Removing Ads

This one can be tricky, depending on your ad platform and when and how ads are loaded. Since ads are often a source of evil (e.g., slow loading times, privacy concerns, weird and/or invasive content, or letting the zombies win) and are only an indirect way of payment, it’s worth the effort to give your users a better experience.

When possible, defer loading ads until after you know whether the user supports monetization. This will prevent the download of any of the ad content for users who monetize, so they will avoid dealing with any of the downsides of ads—an extra reward for supporting you. That said, if holding off on loading the ads costs you in ad revenue because unmonetized users leave before the ads load, you may need to reconsider waiting to load them and/or how long you wait. You can remove ads using a simple change to the event listener from before.

let monetizing = false, adsWereLoaded = false;
if(document.monetization) {
  setTimeout(checkIfMonetizing(), 1000); //1000 is the number of milliseconds to wait
  document.monetization.addEventListener("monetizationstart", function() {
    monetizing = true; //Monetizing is true, so when the time-out happens, we don’t want ads to load
    if( adsWereLoaded ) { //If the browser loaded ads while we were waiting, remove them
      removeAds(); 
    } 
  }); 
} else {
  loadAds(); //If the browser doesn't support monetization, just load the ads
} 
function checkIfMonetizing() {
  if(!monetizing) { //If we’re not monetizing, then we want to load the ads
    loadAds(); 
  } 
} 
function loadAds() {
  adsWereLoaded = true; //Set a flag that ads were loaded so that we know to remove them if monetization starts late
  //Start loading the ads
}

In this way, we first test if a browser can monetize. If it can’t, just load the ads. If it is capable, we give it a second to start a payment before we load the ads anyway. You can, of course, choose how long to wait for monetization to start. One second is pretty arbitrary, and you may want to wait longer or shorter depending on your users and your situation. If monetization starts, then you set the monetizing variable to true and prevent the timed-out function from loading the ads. If the monetization process starts after the ads have loaded, you remove the ads.

Making Apocalyptic Cents

You can also count how much you are receiving as the money comes in so that you can reward users who stay on your site or those who give a certain amount. (While I don’t have any hard-and-fast statistics on what or why, I have seen web monetization amounts vary from hundredths/thousandths of a cent per second to millionths/billionths of a cent per second. I bring this up to note that getting to a certain amount of money, even if it’s only a single cent, may take some users much longer than others, so use amount determinations carefully.)

For this, we’ll use many of the properties from the monetizationprogress event:

<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>
<script>
  let total = 0, alerted = false;
  if (document.monetization) {
    document.monetization.addEventListener('monetizationprogress', function(e) {
      document.getElementById('currency').innerHTML = e.detail.assetCode; //Grab the asset code/the type of money and display it in the currency element
      total += e.detail.amount / Math.pow(10, e.detail.assetScale); //assetScale gives us the number of decimal places we have. Amount is an integer. To convert this into a decimated* value, we divide the amount by 10 to the power of the assetScale.
      //If our amount was 1771 and our assetScale was 5, we’d have 1771/10^5 = 0.01771
      //*”Decimated” is the wrong word here, but it sounded soooo right.
      document.getElementById('total').innerHTML = total; //After we’ve calculated the total, show it.
      if(total >= 0.05 && !alerted) { //If we’ve gotten more than 5 cents (or your currency’s equivalent) and we haven’t alerted them yet, alert them!
        alert("Hey look everybody, there’s an amazing, awesome and totally cool user over here!");
        alerted = true; //Prevents alerting every time this runs once your total is over 0.05 
      } 
    }); 
  } 
</script>

To Be Continued