딥뷰

Overview

Deepview는 Branch가 호스트하는 모바일 웹 스플래시 페이지로, 주어진 Branch 링크 배후의 인앱 콘텐츠를 미리 볼 수 있습니다. 방문자가 Branch 링크 중 하나를 열고 앱을 설치하지 않은 경우 앱 / 플레이 스토어로 직접 보내는 대신 Deepview를 표시할 수 있습니다.

Deepview는 모든 검색 포털 (Google, Apple Spotlight, Bing 등)에서 쉽게 찾을 수 있어 사람들이 앱을 찾을 수 있는 새로운 메커니즘을 열고, 방문자를 앱 / 플레이 스토어로 직접 보내는 것보다 훨씬 더 높은 설치 전환을 유도합니다. 다음은 플로우의 예입니다.

imageimage

📘

모바일 웹 사이트가 없는 앱용

콘텐츠가 있는 모바일 웹 사이트가 이미 있는 경우 Journeys 가 더 적합합니다.

1. 기본 Deepview 템플릿 활성화

  1. Configuration 페이지에서 Deepviews 탭으로 이동합니다.
  2. Deepview는 iOS, 안드로이드, 데스크톱의 각 플랫폼 방문자에 대해 별도로 설정됩니다. 각 플랫폼에 대한 탭과 사용자 지정이 가능한 사전 제작된 템플릿이 있습니다. 템플릿을 검토하고 사용자 지정하고 싶은 템플릿에 대해서는 Enable 슬라이더를 토글합니다.
    사용자 지정 템플릿을 사용하려면 페이지 하단의 + New Deepview 를 클릭하고 여기에 설명된 단계에 따라 진행하십시오.
  3. Deepview를 활성화하기 위해 클릭하면 Are you sure you want to enable Deepviews on iOS? 라는 메시지가 나타나며 내용을 확인한 후 Enable 를 클릭하십시오.
  4. 이제 Deepview를 사용할 준비가 되었습니다! 새 링크 만들기 Create 를 클릭할 때 리다이렉트 설정 옵션이 표시되면 사용을 원하는 Deepview를 선택합니다.

참고 : 기본적으로 Deepview는 앱의 기본값 link settingsSocial Media Preview 섹션에서 콘텐츠를 가져옵니다. 앱 아이콘 또는 Deepview의 텍스트를 업데이트해야 하는 경우 앱 기본값 link settingsSocial Media Preview 섹션으로 이동합니다.

1가. 사용자 지정 Deepview 템플릿 생성

  1. Configuration 페이지에서 Deepviews 탭으로 이동합니다.
  2. 사용자 지정 템플릿을 만드는 방법에는 두 가지가 있습니다.
    가. 클릭한 템플릿을 찾아 ... 을 클릭한 다음 Duplicate 을 클릭합니다.
    나. 또는 Deepview 페이지 하단으로 스크롤하고 + New Deepview 를 클릭합니다.

참고 : 사전 제작된 템플릿과 달리 사용자 지정 Deepview 템플릿은 모든 플랫폼 (iOS, 안드로이드 및 데스크톱)에서 공유하며 생성 후에는 삭제할 수 없습니다.

  1. 다음은 Deepview 편집 화면으로 이동합니다. Deepview 편집 화면에는 두 개의 탭이 있습니다.

가. Basic : 새 템플릿을 표시하며 링크에 대해 명시되지 않은 경우 사용되는 기본 폴백 OG 태그를 수정할 수 있습니다.
나. Editor : 편집기 탭에서는 템플릿의 원시 HTML 및 CSS를 편집 할 수 있습니다. 마크업을 수정하면 렌더된 템플릿이 업데이트됩니다.

  1. 다음 단계에서 설하는 필드는 앱의 기본값 link settingsSocial Media Preview 섹션과 중복됩니다. 모든 업데이트는 두 위치 모두에 적용됩니다. 다음을 설정하십시오.
  2. Deepview 설정:
    1. 제목 : 참조용 내부 이름
    2. : 링크를 만들 때 참조할 값입니다. 예 : $ios_deepview: [key]
  3. 앱 설정 :
    1. OG Title: 링크에 대해 $og_title:이 지정되지 않은 경우 사용되는 기본값입니다.
    2. OG 설명: 링크에 대해 $og_description:이 명시되지 않은 경우 사용되는 기본값입니다.
    3. 이미지 URL: 링크에 대해 $og_image_url:이 명시되지 않은 경우 사용되는 기본값입니다.
  4. 완료되면 Save을 클릭합니다. 이제 Deepview를 사용할 준비가 되었습니다! 새 링크 만들기 Create 를 클릭할 때 리다이렉트 설정 옵션이 표시되면 사용을 원하는 Deepview를 선택합니다.

2. Deepview 고급

기본 Deepview 템플릿은 링크의 제어 파라미터 중 3개의 내용을 간단히 표시합니다. 링크를 생성할 때 이 파라미터의 내용을 명시하여 해당 링크의 Deepview에 표시할 내용을 제어할 수 있습니다. 특정 링크에 대해 아무것도 설정되지 않은 경우 Configuration > General > Social Media Preview 에서 전체 앱에 대해 설정된 OG 값으로 적절하게 되돌아갑니다.

$og_title

Deepview에 표시할 제목

$og_description

Deepview에 표시할 설명

$og_image_url

Deepview에 표시할 이미지의 URL

📘

나의 OG 태그 호스팅

다른 곳에서 호스트하는 OG 태그를 사용하려면 이 파라미터를 비워 두고 링크를 만들 때 $desktop_url 제어 파라미터를 지정하십시오. Branch 유저가 지정한 URL의 OG 태그를 사용하여 Deepview를 채우기 위해 일회성 스크레이프를 수행합니다.

쿼리 파라미터를 추가하여 링크를 만드는 경우, URL에 파라미터만 추가하시면 됩니다. 링크가 깨지지 않도록 모든 것을 URL로 인코드하십시오.

"https://[branchsubdomain]?%24og_title=MyApp%20is%20disrupting%20apps&$og_image_url=http%3A%2F%2Fmyapp.com%2Fimage.png"

모바일 SDK를 통해 링크를 생성할 때 OG 태그 파라미터를 설정하면 됩니다. 다음은 몇 가지 예이나 여기에서 모든 플랫폼을 확인할 수 있습니다.

  • iOS - Objective C

    
    BranchUniversalObject *branchUniversalObject = [[BranchUniversalObject alloc] initWithCanonicalIdentifier:@"item/12345"];
    // Facebook OG tags -- this will overwrite any defaults you set up on the Branch Dashboard
    branchUniversalObject.title = @"My Content Title";
    branchUniversalObject.contentDescription = @"My Content Description";
    branchUniversalObject.imageUrl = @"https://example.com/mycontent-12345.png";
    
    // Add any additional custom OG tags here
    [branchUniversalObject addMetadataKey:@"$og_video" value:@"http://mysite/video.mpg"];
    
  • iOS - Swift

    let branchUniversalObject: BranchUniversalObject = BranchUniversalObject(canonicalIdentifier: "item/12345")
    // Facebook OG tags -- this will overwrite any defaults you set up on the Branch Dashboard
    branchUniversalObject.title = "My Content Title"
    branchUniversalObject.contentDescription = "My Content Description"
    branchUniversalObject.imageUrl = "https://example.com/mycontent-12345.png"
    
    // Add any additional custom OG tags here
    branchUniversalObject.addMetadataKey("$og_video", value: "http://mysite/video.mpg")
    
  • Android

      BranchUniversalObject branchUniversalObject = new BranchUniversalObject()
                     .setCanonicalIdentifier("item/12345")
     // Facebook OG tags -- This will overwrite any defaults you have set on the Branch Dashboard
                     .setTitle("My Content Title")
                     .setContentDescription("My Content Description")
                     .setContentImageUrl("https://example.com/mycontent-12345.png")
    
     // Add any additional custom OG tags here
                     .setContentMetadata(new ContentMetadata().addCustomMetadata("$og_video", "http://mysite/video.mpg"));
    

참고 : Deep Link 섹션은 대부분의 링크 제어 파라미터를 허용하지만 $og_title, $og_description$og_image_url 는 여기에 지정할 수 없습니다.

링크 별 Deepview 활성화

Deepview를 전체적으로 활성화하지 않으려면 사용자 지정 링크 제어 파라미터 링크 제어 파라미터를 삽입하여 링크 별로 각 플랫폼에 대해 해당 사항을 수행할 수 있습니다.

쿼리 파라미터를 추가하여 데스크톱 Deepview를 활성화합니다.

"https://[branchsubdomain]?%24desktop_deepview=default_template&%24ios_deepview=default_template"

SDK를 통해 iOS 및 안드로이드 Deepview를 활성화합니다. 다음은 몇 가지 예이나 여기에서 모든 플랫폼을 확인할 수 있습니다.

  • iOS - Objective C

     BranchLinkProperties *linkProperties = [[BranchLinkProperties alloc] init];
     linkProperties.feature = @"sharing";
     linkProperties.channel = @"facebook";
     [linkProperties addControlParam:@"$ios_deepview" withValue:@"default_template"];
     [linkProperties addControlParam:@"$android_deepview" withValue:@"default_template"];
    
  • iOS - Swift

     let linkProperties: BranchLinkProperties = BranchLinkProperties()
     linkProperties.feature = "sharing"
     linkProperties.channel = "facebook"
     linkProperties.addControlParam("$ios_deepview", withValue: "default_template")
     linkProperties.addControlParam("$android_deepview", withValue: "default_template")
    
  • Android

    LinkProperties linkProperties = new LinkProperties()
                   .setChannel("facebook")
                   .setFeature("sharing")
                   .addControlParameter("$ios_deepview", "default_template")
                   .addControlParameter("$android_deepview", "default_template");
    

링크 별 Deepview 비활성화

Deepview를 전체적으로 활성화한 경우 간혹 특정 용도에 대해서는 비활성화를 원할 수도 있을 것입니다. 하나의 링크에 대한 Deepview 활성화의 지침을 따르고 false로 키 값을 하나 이상 설정하면 수행 가능합니다.

$ios_deepview

false

$android_deepview

false

$desktop_deepview

false

3. Deepview 분석

Branch에서 Deepview를 통해 유저의 플로우를 추적할 수 있습니다. 해당 정보는 Branch 대시보드의 summary page 에서 확인할 수 있습니다.

Deepviews를 사용하여 모바일 웹 사이트에서 딥링킹할 시 알아두어야 할 메트릭이 여러 가지 있습니다.

  • 조회 수: 유저가 모바일 사이트를 조회했을 때 기록됩니다.
  • 클릭: 유저가 Deepview CTA를 클릭했을 때 기록됩니다.
  • 설치: 유저가 처음으로 앱을 설치했을 때 기록됩니다.
  • 업그레이드: 유저가 이전 버전에서 앱을 다시 열거나 업그레이드했을 때 기록됩니다.

앱이 없는 유저 만이 해당 플로우를 거칩니다. 차트의 각 단계에서 총 수와 전환율을 볼 수 있습니다.

🚧

Deepview CTA 클릭 없음

앱이 없는 유저가 Active Deepview가 활성화된 Branch 링크를 클릭했지만 Deepview CTA를 클릭하지 않으면 기존 링크 클릭이 다운스트림 활동 (예 : 설치, 구매)에 기여하지 않을 것입니다.

용어 사전

Active Deepviews

Active Deepview는 앱이 설치되지 않았을때 (혹은 다이렉트 딥링킹이 Facebook 웹뷰에서와 같이 작동하지 않을 때)만 나타나며 Deepview 페이지에서 일시 중지해야 합니다. 이를 통해 유저는 앱 설치를 원하는지 여부를 궁극적으로 결정하는 콘텐츠를 미리 볼 수 있습니다. 유저는 적절한 App이나 Play Store 페이지로 이동하려면 Get The App 의 Call-To-Action(CTA)을 클릭해야 합니다.

기본 템플릿
$ios_deepviewiOS에 사용할 템플릿의 이름default_template
$android_deepviewAndroid에 사용할 템플릿의 이름default_template
$desktop_deepview데스크톱에 사용할 템플릿의 이름입니다.default_template
Passive Deepviews

Passive Deepview도 앱이 설치되지 않은 경우에만 나타나야 하지만 Deepview 페이지에서 일시 중지하는 대신 유저가 동작을 실행하지 않고 즉시 App/Play Store로 리다이렉트를 시도합니다. 유저가 링크를 클릭하여 앱을 설치한 후 브라우저에 흰색 공백 화면을 남기지 않고자 할 때 해당 옵션을 사용해야 합니다. 이 옵션은 Store 페이지로 리다이렉트하고자 할 때 Safari iOS 10.3 및 Facebook iOS 웹보기에서는 자동으로 활성화된다는 점을 참고하십시오.

Passive Deepview를 비활성화하려면 링크 데이터에서 값을 false 으로 설정하십시오.

기본값
$ios_passive_deepviewiOS에 사용할 템플릿의 이름default_template
$android_passive_deepviewAndroid에 사용할 템플릿의 이름default_template

다른 템플릿을 기본 Passive Deepview로 활성화하려면 'Set as Passive Default' 옵션을 선택합니다. 제어 파라미터에서 템플릿 이름을 제공하여 링크 레벨로 템플릿을 변경할 수도 있습니다. 쿼리 파라미터를 추가하여 링크를 만드는 경우 파라미터를 URL에 추가하면 됩니다. 링크가 깨지지 않도록 모든 것을 URL 인코드하십시오.

FAQ

12일 전에 업데이트됨


다음 단계

Deepviews FAQ

딥뷰


제안된 편집은 API 참조 페이지에서 제한됩니다.

Markdown 본문 콘텐츠에 대한 편집만 제안할 수 있지만 API 사양에는 제안할 수 없습니다.