DEV Community

Cover image for Monetizing Content in View, Paying for what you see
Godwin Agedah
Godwin Agedah

Posted on

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

I'll be using the Instagram web layout as a case study where a post covers over 70% of the vertical viewport. On such platforms, two posts can't equally share the screen, as there's always a dominant content. This project shows how we can monetize such content per user engagement.
Instagram screenshot

Instagram webpage

Submission Category

Foundation Technology


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.

Alt Text

Demo app

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

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) {

  function payPostInView(entry){
    let wallet ='data-wallet');
    if (currentWallet !== wallet ) {
      currentWallet = wallet;
      monetizationTag.setAttribute('content', wallet);
      currentReciever.innerText = '💸 Paying ' + wallet;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

philnash profile image
Phil Nash

I like this idea. I'd only considered individual post pages when I was thinking about monetizing something like DEV, but this handles the list case very nicely!

thomasbnt profile image
Thomas Bnt

This is so cool ! Great job :o

cyberdees profile image
☞ Desigan Chinniah ☜

Nice, Godwin. Do check out @sabinebertram 's Web Monetized Image Gallery for more inspiration...