Page Comparison

자세한 구현 사항은 샘플 코드에서 확인할 수 있습니다.

<script src="https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js">
</script>

(function() {
  if (window.BuzzAdBenefit) {
    case 'android':
// SDK 설정
     return ANDROID_APP_ID;
    case 'ios':
      return IOS_APP_ID;
    default:
      // not supported platform
  }
}
BuzzAdBenefit.init({
  appId: getAppId()
});

function getAppId() {
  var ANDROID_APP_ID = '0123456789';
  var IOS_APP_ID = '9876543210';
  
  switch(BuzzAdBenefit.platform) {
    case 'android':
      return ANDROID_APP_ID;
    case 'ios':
      return IOS_APP_ID;
    default:
      // not supported platform
  }
}
BuzzAdBenefit.init({
  appId: getAppId()
});

<ul>
  <li>
    <!-- post 1 -->
  </li>
  <li class="post native-ad" id="placement1" style="display: none">
   <!-- 광고 지면. 내부는 추후 단계에서 구현 -->
  </li>
  <li>
    <!-- post 2 -->
  </li>
  <li>
    <!-- post 3 -->
  </li>
</ul>

BuzzAdBenefit.ensureAuthenticated
  .then(function() => {
    // Benefit 로그인 완료. 광고 요청 가능
  }).catch(function(e) => {
    // 에러 발생. 광고 요청 불가능
  });

BuzzAdBenefit.ensureAuthenticated
.then(() => {
	return BuzzAdBenefit.loadAd({
		unitId: {
	      android: 'YOUR_ANDROID_UNIT_ID', // 안드로이드 앱에서는 광고를 요청하지 않는 경우 생략 가능
	      ios: 'YOUR_IOS_UNIT_ID', // 아이폰 앱에서는 광고를 요청하지 않는 경우 생략 가능
		}
	});
}).then((nativeAd) => {
	console.log('An ad is loaded!');
	populateAd(nativeAd); // 광고 표시			
}).catch((e) => {
	if (e.message === 'EMPTY_RESPONSE') {
      console.log('ON IMPRESSED: The ad is impressed.NO FILL');
    },
    onClicked: function(placementView, nativeAd)  else {
      console.logerror('ON CLICKED: TheAn error is detected while loading ad: is' + clickede.'message);
    },
    onRewardRequested: function(placementView, nativeAd) {
      console	hideAd();
});

BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);

function populateAd(nativeAd) {
  const adListener = {
    onImpressed: function(placementView, nativeAd) {
      console.log('ON REWARDIMPRESSED: REQUESTED:The Rewardad is requestedimpressed.');
    },
    onRewardedonClicked: function(placementView, nativeAd, result) {
      console.log('ON REWARDEDCLICKED: The resultad of Reward: ' + resultis clicked.');
    },
    onParticipatedonRewardRequested: function(placementView, nativeAd) {
      console.log('ON REWARD PARTICIPATEDREQUESTED: TheReward ad is set to particiated.');
      updateCtaView(element.getElementsByClassName('cta')[0], nativeAd);  // 아래에서 설명requested.');
    },
    onVideoErroronRewarded: function(placementView, nativeAd, errorCode, errorMessageresult) {
      console.errorlog('ON VIDEO ERRORREWARDED: AnThe errorresult isof detectedReward: ' + errorCode + '\n' + errorMessageresult);
    },
  };
   onParticipated: function(placementView, nativeAd) {
   const placementView = documentconsole.getElementByIdlog('placement1ON PARTICIPATED: The ad is set to particiated.');
  BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);   renderAd(placementViewupdateCtaView(element.getElementsByClassName('cta')[0], nativeAd);  // 광고아래에서 구성요소를설명
DOM에 추가하여 화면에 표시
}

• PlacementView의 자식 중에 clickable 클래스를 가진 모든 문서 객체 모델은 클릭 시 랜딩 페이지를 열도록 설정됩니다.

• PlacementView의 자식 중에 buzz-mediaview 클래스를 가진 첫 번째 문서 객체 모델은 이미지와 비디오 플레이어를 표시하는 영역인 MediaView로 설정됩니다.

• registerNativeAd()에 넘긴 PlacementView가 이미 광고를 표시하고 있었던 경우에는 이전의 설정을 모두 초기화하고 새로운 광고에 맞도록 설정됩니다.

<li class="post native-ad" id="placement1" style="display: none">
  <div class="buzz-mediaview clickable">
  </div>
  <div class="info">
    <div class="icon-wrapper clickable">
      <img class="icon">
    </div>
    <h5 class="title clickable"></h5>
  </div>
  <div class="description">
  </div>
  <div class="button-wrapper">
    <button class="cta clickable"></button>
  </div>
</li>

function renderAd(placementView, nativeAd) {
  placementView.style.display = '';
  placementView.getElementsByClassName('icon')[0].setAttribute('src', nativeAd.iconUrl);
  placementView.getElementsByClassName('title')[0].innerHTML = nativeAd.title;
  placementView.getElementsByClassName('description')[0].innerHTML = nativeAd.description;
 
  updateCtaView(placementView.getElementsByClassName('cta')[0], nativeAd);
}

function hideAd() {
  const placementView = document.getElementById('placement1');
  placementView.style.display = 'none';
}

<html>
<head>    
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>    
  <title>TEST</title>
</head>
<body>    
  <input type='button' onClick='showFeed()' value='show feed' />    
  <script type='text/javascript'>        
    const showFeed = () => {            
      var userAgent = navigator.userAgent;
      if (/android/i.test(userAgent)) {
        BuzzAdBenefitJSBridge.showFeed()            
      }
      if (/iPad|iPhone|iPod/.test(userAgent)) {                
        webkit.messageHandlers.BuzzAdBenefitJSBridge.postMessage('showFeed')            
      }        
    }    
  </script>
</body>
</html>

public interface BuzzAdBenefitJSBridge {
    void showFeed();
}

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.buzzvil.buzzad.benefit.presentation.feed.BuzzAdFeed

public class WebToFeedActivity extends AppCompatActivity implements BuzzAdBenefitJSBridge {    
  
  private WebView webView;
  
  @Override    
  protected void onCreate(@Nullable Bundle savedInstanceState) {        
    super.onCreate(savedInstanceState);        
    setContentView(R.layout.your_activity_web_to_feed);        
    webView = findViewById(R.id.your_web_view);        
    webView.getSettings().setJavaScriptEnabled(true);        
    webView.getSettings().setUseWideViewPort(true);        
    webView.addJavascriptInterface(this, "BuzzAdBenefitJSBridge");        
    webView.loadUrl("YOUR_URL");    
  }
    
  @Override
  @JavascriptInterface
  public void showFeed() {
      new Handler().post(new Runnable() {
          @Override
          public void run() {
              new BuzzAdFeed.Builder().build().show(WebToFeedActivity.this);
          }
      });
  }
}

@import UIKit;

NS_ASSUME_NONNULL_BEGIN

@interface WebToFeedViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

#import "WebToFeedViewController.h"

@import WebKit;
@import BuzzAdBenefit;

@interface WebToFeedViewController () <WKScriptMessageHandler>

@property (strong, nonatomic, readwrite) WKWebView *webView;

@end

@implementation WebToFeedViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  WKUserContentController *contentController = [[WKUserContentController alloc] init];
  [contentController addScriptMessageHandler:self name:@"BuzzAdBenefitJSBridge"];
  config.userContentController = contentController;

  _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
  NSURL *url = [NSURL URLWithString:@"YOUR_URL"];
  NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
  [_webView loadRequest:urlRequest];
  [self.view addSubview:_webView];
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  if ([message.body isEqualToString:@"showFeed"]) {
    // Show Feed
    BZVBuzzAdFeed *buzzAdFeed = [BZVBuzzAdFeed feedWithBlock:^(BZVBuzzAdFeedBuilder * _Nonnull builder) {
      builder.config = [BZVFeedConfig configWithBlock:^(BZVFeedConfigBuilder * _Nonnull builder) {
        builder.unitId = @"YOUR_FEED_UNIT_ID";
      }];
    }];

    BZVFeedViewController *feedViewController = [buzzAdFeed viewController];
    [self presentViewController:feedViewController animated:YES completion:nil];
  }
}

@end