Journeys & iOS Safari Banner Compatibility

If you have iOS Universal Links enabled on your main domain, you should see Apple's Smart App Banners along with your Journeys banner. This can lead to customer confusion on which call to action to interact with to get to your mobile app.

In order to maximize conversion while maintaining full compatibility of Journeys and Universal Links, we recommend utilizing a Floating Pill Button for your Journeys campaign.

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는 클릭을 얻지 못하므로 설치, 열기 또는 전환 이벤트를 어트리뷰션으로 표시할 수 없습니다.

대시보드를 통한 설정

When configuring your Journeys Template:

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

Web SDK를 통한 설정

Use .setBranchViewData() to programmatically set one or more of the above redirects within the data array

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

Journeys 이미지 권장사항

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

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

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

전체 페이지 이미지

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

부분 페이지 이미지

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

고정 높이

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

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

앱 아이콘 이미지

권장 크기: 180x180px

Interstitial 6

Banner Tall Banner Bottom 1

Banner Tall Banner Top 4

Template 3

Template 4

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

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

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

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

In addition to using pre-defined keys (e.g. $journeys_title) to dynamically customize the appearance/content of a Journey, you can use custom liquid tags. Custom tags can be inserted in both the View Editor and the CSS Editor when you’re setting up a Journeys template. Then, you can use setBranchViewData() to dynamically provide values for these tags. You can also embed those values statically on a page with Branch Meta Tags.

Note that if you include custom liquid tags in your templates and also set a value for a pre-defined key (e.g. $journeys_title) in setBranchViewData(), the value of the pre-defined key will take precedence.

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

{{ key_name | default_value }}

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

{{ fontSize | 12px }}

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

{{ adjective | best }}

Then, to dynamically update values for the “fontSize” and “adjective” variables, you would set values for those variables using setBranchViewData():

branch.init(...);
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. You can choose to do this at the #branch-banner-iframe container level or at the individual #branch-banner objects level.
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;
  }

4. 테스트 기능을 사용하여 배너가 의도한 대로 렌더링 되는지 확인하기 위해 다른 디바이스 모델/크기를 에뮬레이션하면서 별도의 브라우저 인스턴스에서 변경 사항을 미리 볼 수 있습니다. 필요한 경우 페이지의 CSS를 검사하여 이러한 속성이 실제 배너에 반영되는지 확인합니다.
5. Lastly, make sure your logical operators does not have any loopholes or cases left without proper CSS formatting. One approach is an inverse block that reads: @media not screen and (min-device-width: 1px) and (max-device-width: 350px) { to catch all other screen sizes the only block above ignores.