앱스플라이어 스마트스크립트 딥링크 (앱링크)를 적용한 과정입니다.

딥링크 용어 설명 및 방식

딥링크 (Deep Link): 특정 콘텐츠로 사용자를 연결해주는 링크입니다. 특정 주소나 값을 입력하면 앱이 실행되거나 앱 내의 특정 화면으로 이동합니다.

딥링크의 2가지 방식

• 1. URI 스킴 방식: 앱에 URI 스킴(scheme) 값을 등록하여 딥링크를 사용합니다.
     • 앱 설치 O → 앱으로 이동
     • 앱 설치 X → 딥링크 동작하지 않음
     • 단점: 앱 개발 시 스킴 값이 중복된 경우 확인이 어려울 수 있음
  2. 유니버셜 링크와 앱링크: 도메인 주소를 딥링크 실행값으로 사용합니다.
     • Android: 앱링크
     • iOS: 유니버셜 링크
     • 앱 설치 O → 앱으로 이동
     • 앱 설치 X → 각각의 앱 스토어로 이동
     • URI 스킴 방식 이해
  3. 디퍼드 딥링크 (Deferred Deep Link): 앱 설치 과정에서 딥링크가 유실될 수 있는 문제를 극복하기 위해 사용합니다.
     • 앱 설치 O → 앱 내 특정 페이지로 이동
     • 앱 설치 X → 앱 스토어로 이동 후 설치 → 앱 내 특정 페이지로 이동
  4. 다이나믹 딥링크 (Dynamic Deep Link): 하나의 링크를 사용하여 자동으로 앱 내 특정 페이지로 이동합니다.

디퍼드 딥링크 용어 설명 및 예시

디퍼드 딥링크: 앱 설치 되는 과정에서 딥링크가 유실되는 경우가 있음 이를 극복하기 위해 디퍼드 딥링크를 사용하게 됨 OS마다 각각의 디퍼드 딥링크를 구현해줘야 함.

    
      // ex.
      - 앱 설치(O) → 앱 내 특정 페이지로 이동
      - 앱 설치(X) → 앱 스토어로 이동 → 설치 → 앱 내 특정 페이지로
    
  

다이나믹 딥링크, 앱스플라리어, 원링크, 스마트스크립트 용어 설명

• 다이나믹 딥링크 (Dynamic Deep Link): 하나의 링크를 사용하여 자동으로 앱 내 특정 페이지로 이동합니다.
• 앱스플라이어 (AppsFlyer): 모바일 마케팅 분석 및 기여 플랫폼입니다.
• 원링크 (OneLink): 다이나믹 딥링크를 지칭하는 앱스플라이어의 용어입니다.
• 스마트스크립트 (Smart Script): 광고 → 웹 → 앱으로 전환되면서 클릭 전환 메트릭과 딥링크 수집이 안되는 문제를 해결합니다.
  • 웹 페이지로 연결되는 수신 URL을 사용하여 앱 스토어로 연결되는 고유한 발신 OneLink URL을 자동으로 생성합니다.
  • 모든 미디어 소스에 대한 정확한 웹-앱 메트릭 수집을 제공합니다.
  • 딥링크에 사용할 수 있습니다.
  • 모든 웹 페이지 또는 방문 페이지에서 원활하게 실행됩니다.

설정 방법

가이드 참고해주세요.

브랜디 예시) 네이버를 통해 진입한 경우
모바일 웹 url은 https://www.brandi.co.kr/event/1234?utm_source=naver 가 됨
팝업 [앱으로 싸게 보기] 버튼을 클릭시 앱으로 이동할 수 있는 원링크가 생성되고
https://brandi.onelink.me/wLd5?pid=naver&af_dp=brandiapplication://event/1234
생성된 원링크를 통해 앱 내 특정 페이지로 이동

작업 내용

브랜디에서 작업한 내용입니다:

1. js 파일 다운로드 (위의 가이드를 참고)
2. index.html에 script 코드 추가
3. 앱으로 전환되는 팝업 컴포넌트에 적용

// AppDownloadNoti.vue
    <template>
      <img @click="moveAppDownloadLink" :src="`/${assetsPath}/images/notice-popup-image-4@3x.png`" alt="앱으로 싸게 구매하기" />
    </template>
    
    <script>
    const APP_URL = 'https://brandi.onelink.me';
    const DEFAULT_APP_LINK = `${APP_URL}/8g7c/233854a3`;
    const currnetPathName = window.location.pathname;
    const fullPathName = window.location.hostname + currnetPathName;
    const onelinkGenerator = new window.AF.OneLinkUrlGenerator({
      oneLinkURL: `${APP_URL}/8g7c`,
      pidKeysList: ['utm_source'],
      pidStaticValue: ['website'], // utm_source 값이 없을 경우 pid 기본 값
      campaignKeysList: ['utm_term'],
      campaignStaticValue: ['website'] // utm_term 값이 없을 경우 pid 기본 값
    });
    export default {
      name: 'AppDownloadNoti',
      methods: {
        moveAppDownloadLink() {
          const generateUrl = onelinkGenerator.generateUrl();
          const appLink = `${generateUrl}&af_dp=brandiapplication://applink${currnetPathName}&af_web_dp=${fullPathName}&is_retargeting=true&af_force_deeplink=true`;
          const url = (generateUrl && this.isMobile) ? appLink : DEFAULT_APP_LINK;
          this.movePage(url);
        }
      }
    };
    </script>
  

결과

– 광고를 통해 웹으로 진입한 경우
https://www.brandi.co.kr/products/35771207?utm_source=naver&utm_medium=CPC&utm_term=10_naver_brand_pc&af_ref=naver.com 진입 → https://brandi.onelink.me/8g7c?pid=naver&c=10_naver_brand_pc&af_js_web=true&af_df=brandiapplication://applink/products/35771207 링크 생성 → 이동됩니다.

– 그냥 웹으로 진입한 경우
https://www.brandi.co.kr/products/35771207 진입 → https://brandi.onelink.me/8g7c?pid=website&c=website&af_js_web=true&af_df=brandiapplication://applink/products/35771207

사용자 흐름

– 내용: 모바일웹 → 앱 으로 이동시
(ex. 보들 라운드 캐시 반팔니트 상품 모바일 웹 진입 → 앱 유도 팝업 열리고 [앱으로 싸게 구매하기] 버튼 클릭 → 보들 라운드 캐시 반팔니트 상품상세 앱으로 이동)

케이스:

1. 앱 설치된 경우: 모바일 웹 A상품상세 → [앱으로 싸게 구매하기] → 앱 A상품상세
2. 앱 미설치된 경우:모바일 웹 A상품상세 → [앱으로 싸게 구매하기] → 앱스토어, 앱 설치 → 온보딩화면 오픈(관심사 설정화면) → 관심사 설정 완료 → 앱 A상품상세

**웹에는 있는 화면이지만 앱이 없는 경우: 앱 홈으로 이동됨

그럼 딥링킹과 다른점? 딥링킹은 어트리뷰션 데이터의 확장 또는 활용

예시) 광고 클릭 → 웹 → 앱으로 넘어갈 때
어트리뷰션 제공업체(앱스플라이어)는 앱을 다운로드할 수 있는 적절한 앱 스토어로 사용자를 유도
설치 또는 클릭을 통해 사용자가 앱을 실행하면 어트리뷰션(앱스플라이어) SDK가 사용자의 데이터를 순간 포착하고 사용자를 ‘매칭’하기 위해 데이터를 시스템으로 전송합니다.
앱스플라이어 참고 링크