Journeys 고급 설정

Journeys 웹사이트 리디렉션 옵션

다음 작업을 통해, 유저를 웹사이트로 리다이렉션 하도록 Journeys 배너를 설정할 수 있습니다.

리디렉션 키 설정

  • $android_url - 앱을 설치하지 않은 안드로이드 유저를 Journey에서 보내는 위치를 제어합니다. 그렇지 않으면 유저가 설치된 경우 앱에 딥링크(Deep Link)됩니다.
  • $ios_url - Journey에서 앱을 설치하지 않은 iOS 유저를 보내는 위치를 제어합니다. 그렇지 않으면 유저가 설치된 경우 앱에 딥링크(Deep Link)됩니다.
  • $fallback_url - 앱을 설치하지 않은 유저를 Journey에서 보내는 위치를 제어합니다. 그렇지 않으면 유저가 설치된 경우 앱에 딥링크(Deep Link)됩니다.
  • $journeys_cta - Controls where the journey link will redirect to.
    • 유저는 앱 설치 여부에 관계없이 설정된 위치로 리디렉션됩니다.
      • 예를 들어 모든 Journeys 클릭을 모바일 웹으로 리디렉션하거나, 혹은 교차 프로모션을 위해 유저를 다른 앱으로 딥링크(Deep Link)하려는 경우에 사용합니다.
    • 이 키는 다른 모든 키를 우선합니다.
    • 참고: 고객의 링크가 CTA에 사용되면 Journeys 클릭률을 트래킹하는 기능이 제거됩니다. Branch는 클릭을 얻지 못하므로 설치, 열기 또는 전환 이벤트를 어트리뷰션으로 표시할 수 없습니다.

대시보드를 통한 설정

Journeys Template를 설정할 때:

  • VIEW EDITOR 탭에서 선택한 템플릿의 UI에 있는 CTA 버튼을 클릭합니다.
  • DEEP LINK DATA 섹션에 key-values pairs를 추가하세요.
  • Save&Close를 클릭합니다.

Web SDK를 통한 설정

.setBranchViewData()를 사용하여 데이터 배열 내에서 위의 리디렉션 중 하나 이상을 프로그래밍 방식으로 설정합니다.

  • branch.setBranchViewData({data: {'$journeys_cta': 'https://example.com',}});

Journeys 이미지 권장사항

Journeys 솔루션은 모바일 웹 유저를 앱으로 끌어들이는 데 매우 효과적입니다. 그러나 가장 좋은 효과를 거두려면 Journey가 보기 좋으면서도 페이지에 잘 어울려야 합니다. 이 조건에서 어려운 점은, Journeys 솔루션을 매우 다양한 모양과 크기로 사용할 수 있다는 것입니다. 본 가이드는 가장 많이 사용된 Journeys 템플릿 몇 가지를 살펴보며 사이즈에 대한 결정을 내리는 데 도움을 드릴 것입니다.

이미지 형식에 대한 요구 사항

템플릿 배경 이미지를 업로드할 때 "Upload Image" 툴을 통해 지원되는 형식은 jpeg, png, gif, pdf, mp4 또는 mov입니다.

전체 페이지 이미지

전체 페이지 Journey는 템플릿 자체가 스마트폰의 크기에 따른 반응형이기 때문에 다소 까다롭습니다. 이렇듯 잠재적으로 변동될 수 있는 크기를 감안하기 위해선 사용중인 이미지에 일부 여유공간을 마련해야 합니다.

배경 위치

중앙

배경 크기

종횡비를 유지하며 꽉 채우기 (cover)

크기

512x1024px

주요 콘텐츠 영역

414x736px

부분 페이지 이미지

부분 페이지 Journey는 조금 더 처리하기가 쉬운 편입니다. 템플릿 자체가 (필요한 경우) 가로 크기에만 반응하거나 세로 크기의 퍼센트에 따라 반응하기 때문입니다. 이렇게 변경될 수 있는 수치를 고려하려면 사용중인 이미지에 일부 여유공간을 구축해야 합니다.

고정 높이

배경 위치

중앙

배경 크기

종횡비를 유지하며 꽉 채우기 (cover)

사이즈 예시

512x321px

주요 콘텐츠 영역

350x321px

가변 높이 (화면의 33% 높이) - 상단

배경 위치

상단 중앙

배경 사이즈 설정

종횡비를 유지하며 꽉 채우기 (cover)

사이즈 예시

512x321px

주요 콘텐츠 영역

414x250px

가변 높이 (화면의 33% 높이) - 하단

배경 위치

하단 중앙

배경 사이즈 설정

종횡비를 유지하며 꽉 채우기 (cover)

사이즈 예시

512x321px

주요 콘텐츠 영역

414x250px

앱 아이콘 이미지

권장 크기: 180x180px

Interstitial 6

최소 크기

배경 이미지 크기

410 x 732px

앱 아이콘 크기

78 x 40px

앱 배너 크기

해당 사항 없음

Banner Tall Banner Bottom 1

최소 크기

배경 이미지 크기

410 x 343px

앱 아이콘 크기

해당 사항 없음

앱 배너 크기

410 x 151px

Banner Tall Banner Top 4

최소 크기

배경 이미지 크기

375 x 360px

앱 아이콘 크기

해당 사항 없음

앱 배너 크기

375 x 151px

Template 3

최소 크기

배경 이미지 크기

375 x 176px

앱 아이콘 크기

63 x 63px

앱 배너 크기

해당 사항 없음

Template 4

최소 크기

배경 이미지 크기

410 x 732px

앱 아이콘 크기

63 x 63px

앱 배너 크기

해당 사항 없음

Journeys 동적 레이아웃 커스터마이징

웹 세션이 발생한 유입경로에 따라 Journey의 디자인을 커스터마이즈 할 수 있는 기능을 지원합니다. 즉 유저가 특정 링크를 통해 귀하의 웹사이트를 방문하게 되면 웹사이트의 제목 또는 이미지를 다르게 보여줄 수 있습니다. 이런 기능이 구현 가능하도록 key와 value가 정의된 Branch 링크를 만들 수 있습니다.

Link Data KeyExample Value
$journeys_button_get_has_app앱이 현재 설치된 경우 액션 호출 버튼"앱에서 열기"
$journeys_button_get_no_app앱이 현재 설치되지 않은 경우 액션 호출 버튼"앱 설치하기"
$journeys_titleJourney의 제목 또는 본문"지금 앱을 다운로드하세요!"
$journeys_description프레임의 설명 또는 부제목"이 앱을 사용하시면 다른 앱은 필요없습니다."
$journeys_icon_image_url레이아웃에 표시되는 앱 아이콘"<a href="https://mysite.com/image.png" target="" title="">https://mysite.com/image.png"

모든 템플릿이 모든 오버라이드 키를 지원하는 것은 아닙니다. 예를 들어, 플로팅 버튼은 제목, 설명 또는 아이콘 이미지 URL을 서포트하지 않습니다 (플로팅 버튼은 아래에 자세히 설명된 커스텀 리퀴드 태그를 서포트합니다). 템플릿이 렌더링되고 지정한 키가 존재하지 않는 경우 Branch는 템플릿을 렌더링하는 동안 이를 무시할 것입니다.

동적 Journeys 레이아웃 맞춤화를 위한 커스텀 태그

사전 정의된 키(예: $journeys_title)를 사용하여 Journey의 모양/내용을 동적으로 커스터마이징 하는 것 외에도 custom liquid tag를 사용할 수 있습니다. Journeys 솔루션 템플릿을 설정할 때 View Editor와 CSS Editor 모두에 커스텀 태그를 삽입할 수 있습니다. 그런 다음 setBranchViewData()를 사용하여 이러한 태그에 대한 값을 동적으로 삽입할 수 있습니다. Branch 메타 태그가 있는 페이지에 이러한 값을 정적으로 삽할 수도 있습니다.

템플릿에 커스텀 리퀴드 태그를 포함하고 사전 정의된 키 (예: $ journeys_title) 값을 setBranchViewData()으로 설정하면 사전 정의된 키 값이 우선합니다.

Custom liquid tag의 형식은 다음과 같습니다. 포함하는 모든 커스텀 태그에 대해 기본값을 지정해야 합니다:

{{ key_name | default_value }}

예를 들어, Journeys의 제목 중 하나의 글꼴 크기를 동적으로 제어하기 위해 CSS에 custom liquid tag를 추가하려면 다음과 같은 태그를 사용할 수 있습니다:

{{ fontSize | 12px }}

imageimage

템플릿 텍스트에 custom liquid tag를 추가하는 경우 아래와 같은 태그를 사용할 수 있습니다.

{{ adjective | best }}

imageimage

그런 다음 "fontSize" 및 "adjective" 변수의 값을 다이나믹하게 업데이트하려면 setBranchViewData() 를 사용하여 해당 변수의 값을 설정합니다.

branch.setBranchViewData({
    data: {
        'fontSize': '20px',
        'adjective': 'most entertaining',
    }
});

또는 페이지에 Branch 메타 태그를 포함하여 값을 설정할 수 있습니다.

<meta name="branch:deeplink:fontSize" content="20px" />
<meta name="branch:deeplink:adjective" content="most entertaining" />

특정 화면 크기(CSS)에 대한 Journeys 솔루션 커스터마이징

CSS @media 쿼리를 사용하여 특정 화면 크기 또는 잠재적으로 특정 디바이스에 맞게 배너를 커스터마이징 할 수 있는 기능이 있습니다. 이것은 최신 브라우저의 기능이며 브라우저에서 제공하는 파라미터를 기반으로 로직을 추가하고 CSS 형식을 적용할 수 있습니다.

⚠️이를 위해서는 직접적인 CSS 지식이 필요하며 라이브하기 전에 변경 사항을 테스트하는 것이 좋습니다.

  1. #branch-banner-iframe container 레벨 또는 개별 #branch-banner objects 레벨에서 이 작업을 수행하도록 선택할 수 있습니다.
  2. 변경하려는 속성을 결정하고 사용 가능한 @media 쿼리 파라미터에 연결합니다. 예를 들면:
    • 작은 화면을 가진 디바이스에 맞게 제목, 별표, 리뷰 및 아이콘을 더 작게 만들고 싶습니다.
    • 특정 디바이스 제품군에 대해 특수 형식을 제공할 수 있습니다.
  3. 로직을 CSS 코드로 변환하세요. 구문에 익숙하지 않은 경우 웹에서 리소스를 사용하세요.
    • https://developer.mozilla.org/en-US/docs/Web/CSS/@media
    • 웹 검색 "@media 표준 쿼리"를 사용하여 원하는 경우 특정 디바이스 모델을 대상으로 게시된 일부 작업을 찾습니다.
    • 다음은 화면 너비가 1px에서 350px로보고되는 브라우저의 경우 이 CSS를 설정하는 예입니다.
@media only screen and (min-device-width: 200px) and (max-device-width: 350px) {
  #branch-banner .branch-banner-title {
    font-weight: bold;
    color: #333333;
    padding-bottom: 1px;
    font-size: 10px;
  }
  #branch-banner .branch-banner-stars {
    display: inline-block;
    color: rgba(255, 180, 0, 1);
    letter-spacing: -2px;
    font-size: 14px;
    margin-left: -2px;
  }
  #branch-banner .branch-banner-reviews {
    font-size: 10px;
    color: #777;
    display: inline-block;
    margin-left: 4px;
    position: relative;
    top: -1px;
  }
  #branch-banner .branch-banner-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  #branch-banner .branch-banner-icon {
    float: left;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    padding: 10px 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 2;
  }
  1. 테스트 기능을 사용하여 배너가 의도한 대로 렌더링 되는지 확인하기 위해 다른 디바이스 모델/크기를 에뮬레이션하면서 별도의 브라우저 인스턴스에서 변경 사항을 미리 볼 수 있습니다. 필요한 경우 페이지의 CSS를 검사하여 이러한 속성이 실제 배너에 반영되는지 확인합니다.
  2. 마지막으로 논리 연산자에 적절한 CSS 형식이 없는 허점이나 케이스가 없는지 확인하세요. 한 가지 접근 방식은 다음과 같은 역 블록입니다. @media not screen and (min-device-width: 1px) and (max-device-width: 350px) {은 위의 유일한 블록이 무시하는 다른 모든 화면 크기를 포착합니다.

약 1개월 전에 업데이트 됨


Journeys 고급 설정


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

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