광고 차단기 확인

이 항목에서는 광고 차단기가 사용 중인지 확인하는 방법을 배웁니다.

usingAdBlocker() 메서드 사용

Brightcove Player에는 비디오를 재생하는 브라우저에서 광고 차단기가 사용되고 있는지 확인하는 방법이 있습니다. 이 메서드는 usingAdBlocker() 입니다. 광고 차단기가 감지되면 결정이 내려지면 비즈니스 규칙이 추가 조치를 안내합니다. 다음 예에서는 비디오 중에 세 개의 광고가 표시되거나 광고 차단기가 감지되면 플레이어 아래에 메시지가 표시됩니다.

테스트를 위해 광고 차단기가 설치되어 있지 않은 경우 이 예에서 광고 차단기가 감지되면 빨간색으로 표시된 메시지가 표시됩니다.

구현

다음 코드는 usingAdBlocker() 메서드를 사용하는 전체 예입니다. 기본적으로 코드는 다음을 수행합니다.

Promise를 사용하여 광고 차단기가 감지되었는지 확인합니다.
그렇다면 단락이 동적으로 생성되어 기존 div 에 삽입됩니다.

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>

  <div style="width: 600px;">
    <video-js id="myPlayerID"
      data-account="1752604059001"
      data-player="ZDaDSLULho"
      data-embed="default"
      controls=""
      data-video-id="5701193190001"
      data-playlist-id=""
      data-application-id=""
      width="600" height="337.5" class="vjs-fluid"></video-js>
  </div>
  <script src="https://players.brightcove.net/1752604059001/ZDaDSLULho_default/index.min.js"></script>
  
  <div id="ad-blocker-note"></div>
  
  <script>
    videojs.getPlayer('myPlayerID').ready(function () {
      var myPlayer = this;
      myPlayer.usingAdBlocker().then( hasBlocker => {
        if (hasBlocker) {
          var newP = document.createElement("p");
          newP = '<strong>Ads will not play as you are using an ad blocker.</strong>';
          document.getElementById("ad-blocker-note").insertAdjacentHTML('afterbegin', newP);
      }
    });
  
  </script>
  
</body>

</html>

물론 JavaScript 로직에 if 문을 사용할 수 있습니다.

videojs.getPlayer('myPlayerID').ready(function () {
  var myPlayer = this;
  if (myPlayer.usingAdBlocker()) {
    var newP = document.createElement("p");
    newP = 'This ad will not play as you are using an ad blocker.';
    document.getElementById("ad-blocker-note2").insertAdjacentHTML('afterbegin', newP);
  }
});