Chrome Custom Tabs 사용 시 Referrer 기록하기

웹사이트 또는 블로그를 운영중인 사람이라면 "리퍼러(Referrer)"가 무엇인지는 이미 알고 있을거라고 생각한다. (잘 모르면 아래 링크 클릭!)

위키백과 - HTTP 리퍼러

간단하게 말하면 방문객이 어떤 경로로 유입되었는지 알 수 있는 정보다. 웹사이트 관리자라면 잘 알고 있을것이고, 지금 글을 작성하고 있는 티스토리 블로그에서도 관리자 페이지를 통해 이 정보를 볼 수 있다.

아래 이미지는 티스토리 블로그의 관리자 페이지 > 통계 > 경로 > 유입로그를 캡처한 화면.

저기서 빨간색으로 표시한 것은 web을 통한 방문이 아니라 스마트폰의 구글 검색 위젯을 통해 들어온 유입니다.

내가 구현하려고 하는 것도 저것과 비슷한거고.

리퍼러를 추가하려는 Activity. 단순한 도움말 화면이다. 여기에 리퍼러를 추가하려는 이유는 사용자들이 어떤 내용에 더 관심이 있고, 궁금해 하는지에 대한 정보를 얻기 위해서다.

그 부분에 대해서 더 상세한 정보를 제공해준다던가 아니면 앱을 좀 더 사용하기 쉽게 개선할 수 있을테니깐.

서론이 너무 길었는데, 아래는 이를 위한 코드다.

// 참고: 크롬이 안깔려 있어도 잘 열림(기본 웹 브라우저로)
// - 그리고 처음에는 어떤 브라우저로 열지 선택하는 창 뜸. 여기서 크롬 선택했을 때만 크롬 커스텀 탭으로 열림
CustomTabsIntent ctIntent = builder.build();

// 게시글 id 추출('/' 포함해서 뜯어냄)
String postId = url.substring(url.lastIndexOf('/'));

// 리퍼러 셋팅
// 참고: 연속으로 조회하는건 티스토리 유입 카운트에 기록 안되는 듯.
// - 리퍼러 안찍힌다고 당황하지 말것.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
    ctIntent.intent.putExtra(Intent.EXTRA_REFERRER_NAME, "android-app://" + getPackageName() + postId);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    ctIntent.intent.putExtra(Intent.EXTRA_REFERRER, Uri.parse("android-app://" + getPackageName() + postId));
}

ctIntent.launchUrl(this, Uri.parse(url));

도움말 url에서 게시글의 id를 추출해서 어떤 도움말 항목을 선택한건지 알 수 있도록 했다.

적용결과. 티스토리 블로그 관리자 화면에서 캡처한 유입로그다.

이제 사용자들이 어떤 도움말을 많이 조회하는지 알 수 있게되었다. 헤헤.

혹시 Chrome Custom Tabs에 대해서 잘 모른다면 아래 링크를 클릭.

https://developer.chrome.com/multidevice/android/customtabs

아래는 위에 첨부한 코드의 전체 소스.

/**
 * URL에 해당되는 웹 페이지 열기. 크롬 커스텀 탭을 사용해서 보여줌.
 * @param url 이동하려는 웹 페이지
 */
private void goToWebSite(String url) {
    final CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

    // 상단바 색상 변경
    int primaryColor = ResourcesCompat.getColor(getResources(), R.color.colorPrimary, null);
    builder.setToolbarColor(primaryColor);
    builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
    builder.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right);

    // 상단바에 제목 표시
    builder.setShowTitle(true);

    // 상단바 back button icon 변경
    Bitmap backIcon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_back_icon);
    if (backIcon != null) {
        builder.setCloseButtonIcon(backIcon);
    }

    try {
        // 참고: 크롬이 안깔려 있어도 잘 열림(기본 웹 브라우저로)
        // - 그리고 처음에는 어떤 브라우저로 열지 선택하는 창 뜸. 여기서 크롬 선택했을 때만 크롬 커스텀 탭으로 열림
        CustomTabsIntent ctIntent = builder.build();

        // 게시글 id 추출('/' 포함해서 뜯어냄)
        String postId = url.substring(url.lastIndexOf('/'));

        // 리퍼러 셋팅
         // 참고: 연속으로 조회하는건 티스토리 유입 카운트에 기록 안되는 듯.
        // - 리퍼러 안찍힌다고 당황하지 말것.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
            ctIntent.intent.putExtra(Intent.EXTRA_REFERRER_NAME, "android-app://" + getPackageName() + postId);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            ctIntent.intent.putExtra(Intent.EXTRA_REFERRER, Uri.parse("android-app://" + getPackageName() + postId));
        }

        ctIntent.launchUrl(this, Uri.parse(url));
    } catch (ActivityNotFoundException e) {
        C.AlertDlg(this, e.getLocalizedMessage());
    }
}

설명충이라 주석이 좀 많네..

위 코드를 그대로 돌리면 아래 두 군데서 에러가 발생할 수 있다. 

1. setStartAnimations, setExitAnimations 함수 호출하는 부분에서 에러가 날꺼다. anim 리소스를 추가하거나 아님 그냥 주석으로 막아도 된다.

2. C.AlertDlg 부분. 그냥 단순히 메시지 띄우는거다. 그냥 AlertDialog를 좀 더 간단히 사용하려고 만든 래퍼니깐 적절히 수정해주면 됨.