Web Monetization 프로젝트는 독립 웹의 미래에 매우 중요합니다. 사소하더라도 웹 콘텐츠 제작자가 광고나 광고 네트워크 없이 작업에 대한 대가를 받을 수 있도록 하는 것은 엄청난 잠재력을 가지고 있습니다.

시장 플레이로서 양측을 테이블로 가져오는 문제가 있습니다. 콘텐츠 제작자와 웹사이트 소유자가 잠재적으로 돈을 벌기 위해 자신의 페이지에 메타 태그를 포함하는 것을 기뻐할 것이라는 데 의심의 여지가 없습니다. 어려움은 일반 인터넷 사용자에게 콘텐츠 비용을 지불할 가치가 있다고 확신시키는 것입니다. 그러나 이것은 장기적인 플레이이므로 지금은 기반을 구축할 때입니다.

Grant for the Web 해커톤은 훌륭한 아이디어입니다. 웹 수익 창출을 위한 더 나은 경험을 만들기 위해 개발자를 참여시키는 것은 사이트에서 더 쉽게 수익을 창출하고 사용자가 소액 결제를 시작하도록 유도하는 경험을 구축하는 데 도움이 될 것입니다. 웹 개발자로서 저는 이를 추진하는 데 도움을 주고 싶었고 제가 시작한 프로젝트는 다른 웹 개발자가 이러한 수익 창출 경험을 쉽게 만들 수 있도록 하는 것입니다.

내가 만든 것

Web Monetization API에 대해 구현할 것으로 예상되는 일반적인 동작으로 웹 페이지를 점진적으로 향상시키는 Web Components for Web Monetization 모음의 (시작)입니다.

이러한 웹 구성 요소 중 처음으로 세상에 출시된 것은 <wm-ad-hider> ( released here on npm )입니다. <wm-ad-hider>는 웹사이트의 광고를 대신하며 수익 창출이 감지되지 않을 때만 광고를 표시합니다.

remove ads example on webmonetization.org을 기반으로 하지만 페이지에 스크립트를 포함하는 것처럼 간단하게 구현합니다.

<script src="https://unpkg.com/[email protected]/dist/wm-ad-hider.min.js" defer></script>

그런 다음 요소와 <template> 요소에 광고 코드를 래핑합니다.

<wm-ad-hider>
  <template>
    <!-- Your ad code goes here -->
  </template>
</wm-ad-hider>

웹 수익 창출이 감지되고 지불이 전송되면 광고가 표시되지 않습니다. 수익 창출이 나중에 시작되면 광고가 사라집니다.

웹 플랫폼 자체의 일부인 웹 구성 요소를 선택하여 구축했습니다. 종속성, 프레임워크가 없으며 이를 사용하기 위한 작업이 거의 없습니다.

제출 카테고리:

기초 기술

데모

이미 <wm-ad-hider>를 배포한 내 사이트에서 이 작업을 볼 수 있습니다. 내 VSCode extension for using ngrok에 대한 이 게시물과 같은 블로그 게시물을 방문하십시오. 결제를 시작하면 광고가 사라집니다.

코드 링크

필나쉬 / 웹 수익 창출 구성 요소

웹에서 수익을 창출하는 웹사이트에서 사용할 수 있는 웹 구성요소 모음입니다.

<💰> 웹 수익화 구성요소 </💰>

웹에서 수익을 창출하는 웹사이트에서 사용할 수 있는 웹 구성요소 모음입니다.

지금 사용 가능:

<wm-ad-hider> - 사용자가 웹 수익 창출을 통해 결제를 보내는 것으로 판단되면 광고를 숨기는 구성 요소

<wm-exclusive-content> - 사용자가 웹 수익 창출을 통해 결제를 보내는 것으로 판단되는 경우 하위 콘텐츠를 표시하는 구성 요소

아이디어

<wm-counter> - 현재 방문자로부터 얼마를 벌었는지 보여주는 구성 요소

특허

MIT (c) 2020 필 내쉬


View on GitHub

내가 만든 방법

나는 the Web Monetization example 에서 영감을 얻었고, 다른 유일한 게시된 웹 구성 요소인 Ibuilt to make it easier to use the Web Share API에서 영감을 얻었습니다(GitHub repo for the <web-share-wrapper> here에서 확인할 수 있음). 구성 요소는 런타임에 외부 종속성이 없습니다. 개발 시에는 Rollup 및 Babel을 사용하여 브라우저 친화적인 코드로 트랜스파일하고 CommonJS, ES 모듈, 브라우저용 UMD 및 축소된 UMD를 비롯한 여러 형식으로 사용할 수 있습니다. 이렇게 하면 개발자가 JavaScript 파일을 요구하는 방법에 관계없이 응용 프로그램에 쉽게 포함할 수 있습니다.

추가 리소스/정보

이것은 프로젝트의 시작일 뿐입니다. 웹 수익 창출 노력을 강화할 더 많은 웹 구성 요소에 대한 아이디어와 기여자를 찾고 있습니다. 이를 위해 웹 구성 요소를 사용하는 것이 모든 개발자에게 수용되기를 바랍니다.

이 아이디어와 첫 번째 구성 요소에 대해 어떻게 생각하는지 알고 싶습니다! 댓글로 알려주세요.

해커톤에 참여하는 다른 모든 사람과 웹이 더 나은 방식으로 작동하도록 변경한 웹용 Grant에게 행운을 빕니다.