Monetizing Content in View, Paying for what you see

What I Built

My Project sets up a way to pay the platform owner as well as the content creator based on if a monetized user sees their content on a webpage. That is, they are paid only when their content is in the viewport.
Also for a monetized session, using probabilistic revenue sharing all payment can be made to the platform owner or to the creators when their content is being viewed.

Case Study

Submission Category

Foundation Technology

Demo

When monetization starts a button appears for a user to start viewing premium content, as the user scrolls through the page, if the probabilistic revenue sharing chooses the creators to earn, then the monetized content revenue goes to the creator else we pay the platform owner.
I'm embedding the content creators payment pointer into the HTML using a data-wallet attribute. when a creators content is in view, I'm getting the payment pointer that was embedded in the HTML. Then setting the meta tag content to the payment pointer of the current content.
if a non-premium content is in being viewed, I'm paying the platform owner.

More Rewards

Perhaps the content is so good the user continues engaging or starts commenting, the content will be in view so you'll earn more as good content are rewarded. video content will earn more as engagement is longer.

Deployed Link

You can test the application

• main app, with probabilistic revenue sharing

link to Code

How I Built it

I created a static site built with HTML, CSS and Vanilla JS to explain the concept.

How I'm monetizing content in view

To monetize the dominant content on the page, I'm using the Intersection Observer API, Using this API you can select elements to target. if certain element intersects a certain percentage of an ancestor element or in our case the document's viewport, a function can be called. This function takes in a parameter of the intersecting element, Then we can get the payment pointer from the elements data attribute, then change our monetization meta tag content to the payment pointer.

function observerIntersection() {
    postElements = document.querySelectorAll(".post");

    let options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.75
    }

    let observer = new IntersectionObserver(handleIntersect, options);
    postElements.forEach(post => observer.observe(post));
  }

  function handleIntersect(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0.75) {
        payPostInView(entry);
      }
    })
  }

  function payPostInView(entry){
    let wallet = entry.target.getAttribute('data-wallet');
    if (currentWallet !== wallet ) {
      currentWallet = wallet;
      monetizationTag.setAttribute('content', wallet);
      currentReciever.innerText = '💸 Paying ' + wallet;
    }
  }

Splitting the profits

I set the weight for the platform owner and content creators to 50/50. Using the probabilistic revenue sharing. 50% of the time either the platform owner or creators on the platform will earn. if the platform owner is chosen to earn, then there's no need to get the payment pointer from the content in view as by default I'm setting the platform owner to earn.

Additional Learning Resources

• Start and Stop Monetization
• probabilistic revenue sharing
• webmonetization
• Intersection Observer API