Table of Contents

테마 적용

...

BuzzAd Benefit에서 제공하는 광고지면의 CTA 테마를 변경할 수 있습니다. 이 단계는 선택사항이긴 하지만 원하는 색상, 아이콘을 적용하는 단계이므로 적용하는 것을 권장합니다. 앱에서 사용중인 application theme에 Buzzvil에서 제공하는 attribute를 정의하여 간편하게 BuzzAd Benefit SDK의 CTA UI를 커스터마이징 할 수 있습니다.

attribute (type)	child attribute (type)	커스터마이징 되는 UI
`buzzvilRewardIcon` (reference)	N/A	[All] cta view 리워드 아이콘 [Feed] profile banner 리워드 아이콘 [Feed] pop opt-in 버튼 아이콘 [Pedometer] pop icon 리워드 아이콘 [Pedometer] header banner 리워드 아이콘 [Pedometer] milestone 리워드 아이콘 [Pedometer] notification 리워드 아이콘 [Push] notification 리워드 아이콘 [Bridge Point] `appCurrencyIcon`
`buzzvilCtaViewStyle` (reference)	`buzzvilCtaBackground` (reference) Cta 배경 설정 `buzzvilCtaParticipatedIcon` (reference) 광고 참여 후 아이콘 설정 `buzzvilCtaTextColor` (color\|reference) Cta 텍스트 색상 `buzzvilCtaTextSize` (dimension) Cta 텍스트 크기	[All] cta view
`buzzvilColorPrimaryDark`(reference\|color)	N/A	[Feed] Tab UI, Filter UI, Pop FAB 배경색 등 [Interstitial] Feed 진입 경로 텍스트 색상 [Pop] Pop 아이콘 배경색, Toolbar UI, 다른 앱 위에 그리기 권한 다이얼로그 UI 등 [Push] 구독 다이얼로그 UI [Ext. Auth] 바텀싯 UI
`buzzvilColorPrimary` (reference\|color)
`buzzvilColorPrimaryLight` (reference\|color)
`buzzvilColorPrimaryLighter` (reference\|color)
`buzzvilColorPrimaryLightest` (reference\|color)

...

PrimaryColor 변경

BuzzAd SDK 에서 제공하는 UI 중 Dialog의 버튼 색상, Bottom sheet UI의 확인 버튼을 포함하한 일부 UI 의 색상을 아래와 같이 Theme 에서 설정할 수 있습니다.

...

Code Block

language	xml

<!-- Base application theme. -->
<style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <item name="buzzvilColorPrimaryDark">@color/samplePrimaryDark</item>
    <item name="buzzvilColorPrimary">@color/samplePrimary</item>
    <item name="buzzvilColorPrimaryLight">@color/samplePrimaryLight</item>
    <item name="buzzvilColorPrimaryLighter">@color/samplePrimaryLighter</item>
    <item name="buzzvilColorPrimaryLightest">@color/samplePrimaryLightest</item>
</style>

리워드 아이콘

리워드를 표시하는 아이콘 추가를 위해 application theme에 buzzvilRewardIcon 를 추가합니다.

...

Code Block

language	xml

<!-- your_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorPrimaryDark"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape>
            <solid android:color="@color/gray"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
</selector>

PrimaryColor 변경

BuzzAd SDK 에서 제공하는 UI 중 Dialog의 버튼 색상, Bottom sheet UI의 확인 버튼을 포함하한 일부 UI 의 색상을 아래와 같이 Theme 에서 설정할 수 있습니다.

...

커스텀 런처 설정

Custom In-App Browser 사용법

현재 Custom Launcher 를 사용하지 않을 경우 아래 가이드는 아무 영향이 없습니다.
Custome Launcher 사용할 예정이거나, 1.X 버전에서 이미 사용하고 있을 경우, 아래의 항목을 필수로 적용해야 합니다.

Custom launcher 사용시, 광고를 클릭했을 때 랜딩되는 In-App Browser를 Customize 할 수 있습니다. 예를 들어, 광고 랜딩 페이지 로드 등을 매체사가 지정하는 Class에서 구현할 수 있습니다.

구현시 주의사항 :

BuzzAdBrowser에서 제공하는 Fragment를 사용하여 In-App Browser를 구현해야 합니다. 사용하지 않을 경우, 일부 광고(액션형 광고, 체류 리워드 광고)가 제대로 동작하지 않을 수 있습니다.
Launcher에서 제공하는 LandingInfo 의 URL을 임의로 변경해서 사용하면 안됩니다. 이 경우 웹 페이지가 제대로 로드되지 않을 수 있습니다.

[1] CustomBrowserActivity 를 구현합니다.

<style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <item name="buzzvilColorPrimaryDark">@color/samplePrimaryDark</item> <item name="buzzvilColorPrimary">@color/samplePrimary</item> <item name="buzzvilColorPrimaryLight">@color/samplePrimaryLight</item> <item name="buzzvilColorPrimaryLighter">@color/samplePrimaryLighter</item> <item name="buzzvilColorPrimaryLightest">@color/samplePrimaryLightest</item> </style>

Code Block

language	xml

java

public class CustomBrowserActivity extends AppCompatActivity {
    public static final String KEY_URL = "com.sample.KEY_URL";
    private BuzzAdWebView webView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_browser);

        // URL을 KEY로 하여 WebView를 가지고있는 Fragment를 받아와 사용합니다.
        Intent intent = getIntent();
        BuzzAdBrowserFragment fragment = BuzzAdBrowser.getInstance(this).getFragment(intent.getStringExtra(KEY_URL));
        getSupportFragmentManager().beginTransaction().replace(R.id.browserContainer, fragment).commit();
        this.webView = fragment.getWebView();

        // Browser의 이벤트를 받을 수 있습니다. DeepLink가 열렸을 경우, Browser를 닫아주어야 빈 페이지가 보여지는 현상을 방지할 수 있습니다.
        BuzzAdBrowser.getInstance(this).setOnBrowserEventListener(new BuzzAdBrowser.OnBrowserEventListener() {
        
        // 기존에 사용하던 isDeepLink 를 아래로 대체
            @Override
            public void onDeepLinkOpened() {
                finish();
            }
        });
    }

    // Optional - BackButton을 눌렀을때 뒤로가기 기능
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

[2] activity_custom_browser.xml

Code Block

language	xml

?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/browserContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

[3] Launcher 를 구현

Code Block

language	java

public class MyLauncher implements Launcher {

    @Override
    public void launch(@NonNull Context context, @NonNull LaunchInfo launchInfo) {
        launch(context, launchInfo, null);
    }

    @Override
    public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener) {
        launch(context, launchInfo, listener, null);
    }

    @Override
    public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List<Class<? extends BuzzAdJavascriptInterface>> javascriptInterfaces) {
                 
        // Custom Browser 실행
        final Intent intent = new Intent(context, CustomBrowserActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.putString(CustomBrowserActivity.KEY_URL, launchInfo.getUri().toString()); // URI는 변경 하면 안 됨
        context.startActivity(intent);
    }
}

[4] BuzzAdBenefit.init 호출 이후에 생성한 Launcher를 세팅

Code Block

language	java

BuzzAdBenefit.setLauncher(new MyLauncher());

[+] Custom launcher 사용시 Article의 sourceUrl 사용법

Code Block

language	java

public class MyLauncher implements Launcher {
    @Override
    public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List<Class<? extends BuzzAdJavascriptInterface>> javascriptInterfaces) {
        if (launchInfo.getArticle() != null) {
            String sourceUrl = launchInfo.getArticle().getSourceUrl();
        }
    }
}

컨텐츠의 경우 url scheme에 따라 랜딩 방식을 다르게 처리하고 싶다면 (ex. 앱 안에서 브라우저 오픈 없이 다른 화면으로 이동되는 컨텐츠) 다음과 같은 방법으로 NativeArticle 객체의 sourceUrl을 가져와 분기 처리를 할 수 있습니다.

[+] Custom launcher 사용시 광고 또는 컨텐츠인지 미리 판단하고 싶을 경우

Code Block

language	java

public class MyLauncher implements Launcher {
    ...
    @Override
    public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List<Class<? extends BuzzAdJavascriptInterface>> javascriptInterfaces) {
        
        // 광고 또는 컨텐츠인지 미리 판단하고 싶을 경우, 다음을 이용하여 확인
        if (launchInfo.getAd() != null) {
            // 광고
        } else if (launchInfo.getArticle() != null) {
            // 컨텐츠
        } 
          
        ...// Custom Browser 실행
    }
}

Versions Compared

Old Version 2

New Version Current

Key

테마 적용

PrimaryColor 변경

리워드 아이콘

PrimaryColor 변경

커스텀 런처 설정

Custom In-App Browser 사용법

Page Comparison

Versions Compared

Old Version 2

New Version Current

Key

테마 적용

PrimaryColor 변경

리워드 아이콘

PrimaryColor 변경

커스텀 런처 설정

Custom In-App Browser 사용법