Android SDK (Previous) - Webview 에서 트래킹링크가 열리는 경우

3일 전에 업데이트됨

개요

에어브릿지의 트래킹링크는 Webview 환경에서는 고객사의 트래킹링크가 고객사의 앱에서 열리는 경우, 다른 앱에서 열리는 경우에 비해서 딥링크 UX 가 떨어질 수 있습니다. 이에 이 문서에서는 Webview 환경에서 트래킹링크가 클릭되었을 때, 트래킹링크를 에어브릿지 SDK 가 Webview 대신 열어 문제를 해결하는 방법에 대해서 서술합니다. 이 문서에서는 아래 단계를 통해 문제를 해결합니다.

에어브릿지 SDK 가 트래킹링크를 여는 함수에 대한 설명
앱의 Webview 영역에서 트래킹링크가 클릭되는 경우를 감지
에어브릿지 SDK 가 대신 트래킹링크를 열도록 설정

주의하세요
다른 고객사의 트래킹링크가 고객사의 앱에서 열리는 경우, 다른 고객사의 앱이 설치되어 있지 않고 트래킹링크의 Fallback 이 웹으로 설정되어 있는 경우, Webview 가 아닌 사용자의 기본 브라우저로 Fallback 으로 설정된 웹이 열리게 됩니다.

에어브릿지가 SDK 가 트래킹링크를 여는 함수

에어브릿지 SDK 에는 Placement Click 이라는 함수를 제공하여 네이티브 영역에서 트래킹링크를 열 수 있는 기능을 제공합니다. 해당 기능을 아래와 같은 코드를 통해 사용할 수 있습니다. Airbridge.click 의 매개변수로 AirbridgeCallback<Boolean> 을 전달하여 응답에 대한 callback 을 받을 수도 있습니다.

12
var trackingLink: String = "..."
Airbridge.click(trackingLink)

앱의 Webview 영역에서 트래킹링크가 클릭되는 경우를 감지

WebViewClient 에서는 WebViewClient#shouldOverrideUrlLoading 를 구현하는 것으로 특정 URL 이 로딩되는 것을 감지하고, 그 URL 의 로딩 할 것인지, 멈출 것 인지를 결정할 수 있습니다. 아래의 단계에 따라 코드를 구현하여 그 URL 이 에어브릿지 트래킹링크인지 감지합니다.

📘 WebViewClient Android 개발자 문서

WebViewClient 사용하기

WebViewClient#shouldOverrideUrlLoading 를 구현하기 위해서 'webViewClient' instance 를 생성하여 주고 webView#setWebViewClient 에 생성된 instance 를 설정한다. WebViewClient#shouldOverrideUrlLoading 의 result 로 해당 'WebResourceRequest' 처리 여부를 반환 한다. WebViewClient#shouldOverrideUrlLoading 를 구현하여 어떤 URL 로딩 되는지 감지합니다. 로딩이 이루어지는 URL은 함수 인자 중 WebResourceRequest에서 request.url의 형태로 전달됩니다.

12345678910111213
private val webViewClient = object : WebViewClient() {

    override fun shouldOverrideUrlLoading(
        view: WebView?,
        request: WebResourceRequest?
    ): Boolean {
        return super.shouldOverrideUrlLoading(view, request)
    }
}

private fun initWebview() {
    webView.webViewClient = webViewClient
}

1234567891011
private final WebViewClient webViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        return super.shouldOverrideUrlLoading(view, request);
    }
}

private void initWebView() {
    webView.setWebViewClient(webViewClient);
}

에어브릿지 트래킹링크인지 판별

로딩이 이루어지는 URL 중 에어브릿지 트래킹링크인 경우를 구분합니다. 에어브릿지 트래킹링크는 URL 의 host 가 abr.ge 이거나 YOUR_APP_NAME.deeplink.page 또는 커스텀 도메인입니다.

📘 YOUR_APP_NAME 은 대시보드의 Settings > Tokens > 앱 이름 에서 확인할 수 있습니다.

1234567891011121314151617181920
override fun shouldOverrideUrlLoading(
    view: WebView?,
    request: WebResourceRequest?
): Boolean {

    request?.url?.let {

        val airbridgeHosts = arrayOf(
            "abr.ge",
            "YOUR_APP_NAME.abr.ge",
            "YOUR_APP_NAME.deeplink.page"
        )

        if (airbridgeHosts.contains(it.host)) {
            return true
        }
    }

    return false
}

123456789101112131415161718192021
private final WebViewClient webViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Uri uri = request == null ? null : request.getUrl();
        if (uri != null) {
            String host = uri.getHost();

            List<String> airbridgeHosts = Arrays.asList(
                    "abr.ge",
                    "YOUR_APP_NAME.abr.ge",
                    "YOUR_APP_NAME.deeplink.page"
            );

            if (airbridgeHosts.contains(host)) {
                return true;
            }
        }

        return false;
    }
};

에어브릿지 SDK 가 대신 트래킹링크를 열도록 설정

위 단계를 통해 Webview 에서 에어브릿지 트래킹링크가 로딩되는 경우를 감지할 수 있습니다.
아래와 같이 감지되었을 때 Airbirdge.click 함수를 사용하고, webView#shouldOverrideUrlLoading 의 result 값을 true 를 보내 Webview 대신 에어브릿지 SDK 가 트래킹링크를 열도록 할 수 있습니다.

12345678910111213141516171819202122232425
override fun shouldOverrideUrlLoading(
    view: WebView?,
    request: WebResourceRequest?
): Boolean {

    request?.url?.let {

        val airbridgeHosts = arrayOf(
            "abr.ge",
            "YOUR_APP_NAME.abr.ge",
            "YOUR_APP_NAME.deeplink.page"
        )

        if (airbridgeHosts.contains(it.host)) {
            decisionHandler(it)
            return true
        }
    }

    return false
}

private fun decisionHandler(uri : Uri) {
    Airbridge.click(uri.toString())
}

1234567891011121314151617181920212223242526
private final WebViewClient webViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Uri uri = request == null ? null : request.getUrl();
        if (uri != null) {
            String host = uri.getHost();

            List<String> airbridgeHosts = Arrays.asList(
                    "abr.ge",
                    "YOUR_APP_NAME.abr.ge",
                    "YOUR_APP_NAME.deeplink.page"
            );

            if (airbridgeHosts.contains(host)) {
                decisionHandler(uri)
                return true;
            }
        }

        return false;
    }
};

private void decisionHandler(Uri uri) {
    Airbridge.click(uri.toString());
}

마무리

모든 구현이 완료되었습니다. 다음은 가이드에서 사용된 코드 전문입니다.

12345678910111213141516171819202122232425262728293031323334353637383940
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout....)
    initWebView()
}

private fun initWebView() {
    webView.settings.javaScriptEnabled = true
    webView.settings.domStorageEnabled = true
    webView.webViewClient = webViewClient
}

private val webViewClient = object : WebViewClient() {

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun shouldOverrideUrlLoading(
        view: WebView?,
        request: WebResourceRequest?
    ): Boolean {

        request?.url?.let {
            val airbridgeHosts = arrayOf(
                "abr.ge",
                "YOUR_APP_NAME.abr.ge",
                "YOUR_APP_NAME.deeplink.page"
            )

            if (airbridgeHosts.contains(it.host)) {
                decisionHandler(it)
                return true
            }
        }

        return false
    }

    private fun decisionHandler(uri: Uri) {
        Airbridge.click(uri.toString())
    }
}

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

    webView = findViewById(R.id....);
    initWebView();
}

private void initWebView() {
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.setWebViewClient(webViewClient);
}

private final WebViewClient webViewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Uri uri = request == null ? null : request.getUrl();
        if (uri != null) {
            String host = uri.getHost();

            List<String> airbridgeHosts = Arrays.asList(
                    "abr.ge",
                    "YOUR_APP_NAME.abr.ge",
                    "YOUR_APP_NAME.deeplink.page"
            );

            if (airbridgeHosts.contains(host)) {
                decisionHandler(uri)
                return true;
            }
        }

        return false;
    }
};

private void decisionHandler(Uri uri) {
    Airbridge.click(uri.toString());
}

도움이 되었나요?

더 필요한 내용이 있나요?