[RN] Firebase Dynamic Link 붙이기

도디·2020년 12월 23일

React Native

목록 보기

20/28

뉴스 앱 '오늘의헤드라인' rn 개발자 도디입니다.

회사 앱에 공유하기 기능이 생긴다. 그에 필요한 dynamic link를 알아보고 붙여볼거다.
생각보다 여러단계로 이루어져있고, 단계단계가 복잡하기 때문에 삽질을 많이 했다.
분명 문서로도 손쉽게 할 수 있는 사람들 많겠지만
내 블로그 글이 도움이 되었으면 좋겠다!

dynamic link?

다이나믹 링크는 firebase에서 제공하는 기능으로, 그 역할은? (참고)

모바일 웹 사용자를 기본 앱 사용자로 전환
사용자 간 공유를 통한 전환 증가
소셜, 이메일, SMS 마케팅 캠페인으로 더 많은 설치 유도
데스크톱 사용자를 모바일 앱 사용자로 전환

크게 이렇게 기능을 소개하는데, 내가 원하는 기능은 아래와 같다.

PC에서 눌렀을때 > 내가 정해놓은 웹사이트로 이동
미설치 > 스토어로 이동
설치 > 앱으로 이동 (앱의 특별한 화면으로 이동하기)

위의 기능들이 한 링크로 작동해야한다!
그럼 긴말않고 바로 시작하자. Dynamic Link 기능을 붙이는 단계는 이러하다.

url 프리픽스 추가하기

android dynamic link setup 하기

ios dynamic link setup 하기

링크 만들기 (firebase console, rest api)

앱에서 dynamic link

1. URL 프리픽스 추가하기

다이나믹 링크를 시작하려면, 그 링크의 도메인이 필요하다.
나는 회사의 도메인이 있는데, 이미 사용하고 있는 도메인이라면 사용할 수 없다.
Google에서 무료로 제공하는 url 프리픽스를 사용하길 적극 권장한다.
시작하기 버튼을 누르고 mydomain.page.link url 프리픽스를 만든다.

본인의 도메인을 등록하는 과정은,
여기서 DNS 제공업체에 아래 TXT 레코드를 추가하여 oheadline.com의 소유자임을 확인하세요.
이런 과정이 필요한대, 본인의 DNS 제공업체의 TXT레코드를 추가하는 법을 참고해서 단계를 밟아나가면 된다.

제발 google에서 무료로 제공하는 무료 url 프리픽스를 사용하자. 너어무 편하고 좋지 않은 점이 1도 없다.

2. Android Dynamic Link setup 하기

android set up 하는 방법은 여기 - rnfirebase에 나오는 것들 차근차근 따라하면 된다.

firebase console > 프로젝트 개요 > 설정 > 일반 > 내앱 의 Android 앱에 SHA 인증서를 추가해야된다.
SHA인증서는 터미널에서 프로젝트의 android로 들어가 아래를 치면 SHA 인증서들이 나온다.

./gradlew signingReport

여러 SHA 인증서가 뜨는데 release의 SHA-256인증서를 복사해 붙인다.

3. iOS Dynamic Link setup 하기

ios set up 하는 방법은 여기 - rnfirebase에 나오는 것들 차근차근 따라하면 된다.

(1) firebase console에 설정

firebase console > 프로젝트 개요 > 설정 > 일반 > 내앱 의 iOS 앱에 App Store Id와 Team Id 를 추가하라는데,

App Store Id: app store connect에 들어가서 본인 app으로 들어가면 url에 10자리의 숫자가 있다.
혹은 앱스토어에 본인의 앱 url 맨 뒤에 id0000000000 이렇게 되어있는데 id를 뺀 10자리 숫자가 앱스토어 아이디이다.

Team Id: app store console에 입장하면 url 맨뒤에 숫자와 대문자가 섞인 10자리가 Team Id이다.

firebase에 데이터들이 잘 들어갔는지 확인하려면 your domain]/apple-app-site-association로 들어가서 열리는 데이터를 확인해보면 알 수 있다.

(2) provisioning profile 수정하기

여기서 나는 프로비저닝 프로파일의 Enabled Capabilities에 Assoicated Domains
를 어떻게 추가해야할지 좀 헤맸다.

앱스토어 커넥트의 Certificates, Identifiers & Profiles > Identifiers 안에 들어가서
Capabilities에 Associated Domains을 추가해서 저장하면 된다.

Idetifiers를 수정했으니, Certificates, Identifiers & Profiles > Profiles의 프로비저닝 프로필들 모두 하나하나 수정해주어야 한다. 따로 고쳐줘야할건 없고 Edit, Save 만 누르면 잘 반영된다.

(3) Xcode 수정

signing & capabilities > signing에 세팅되어있던 프로비저닝 프로파일을 다시 다운받아 추가해주어야 한다. 프로비저닝 프로파일을 넣는 방법이 import profile...과 download profile...이 있는데, 난 download profile...로 하고, 들어가서 업데이트 된 프로파일을 select profile한다.
signing & capabilities 상단에 + Capability를 눌러 Associated Domains를 밖으로 꺼낸다. 그러고 아래와 같이 추가한다.

// applinks:google에서 무료 지원한 url프리픽스
ex) applinks:dody.page.link

Info > URL Types 에 추가해야된다. 나는 URL Types에 페이스북 관련 URL Type이 들어있었고, 하나 더 생성해서 URL Schemes에 ios 패키지 이름을 추가했다. 패키지 이름은 알다싶이 com.company.appname 형식의 데이터다.

이렇게 ios set up은 마무리가 되었다.

4. 링크 만들기 (firebase console, rest api)

이제 다이나믹 링크를 만들어보자.
firebase console에서 만드는 방법과 rest api로 만드는 방법을 정리할거다.

firebase console에서 만들면 딥링크 커스텀에 한계가 있다. 하지만 니즈가 없다면 firebase console이 회사 팀원들끼리 링크 내용 공유하기도, 생성하기도, 데이터추적하기도 훨씬 좋다.
rest api를 사용하면 딥링크 커스텀에 자유롭다. 다만, 데이터를 따로 관리해줘야한다.
수동 url을 만들수 있는데 난 긴건 좋지 않아~

각각 방법을 탐색해보고, 중간중간 비교도 해보겠다.
같이 단계 단계를 진행해봅시다. 당신의 선택에 내가 확신을 줄 수 있기를...

(1) firebase console로 만들기

링크 만들기 누른다.
단축 URL 링크 설정
임의의 값으로 링크가 만들어진다. 이건 그대로 진행해도 무관하다. 아래에서 이름을 따로 지어줄 것이기 때문.
url 이름 짓는거에 힘 안써도 되고 너무 좋다.
동적 링크 설정
딥링크 url: 웹에서는 해당 url로 이동한다.
예를 들어 www.dody.com이라고 적으면 웹에서는 그 링크로 이동하고, 앱이 설치된 유저의 경우는 앱이 열리고 앱에서는 www.dody.com로 지정된 화면으로 이동하게 된다.
만약 웹이랑 앱이랑 경로를 다르게 하고 싶다면???
웹에서는 www.dody.com/dody1로 이동하고 싶고, 앱에서는 www.dody.com/dody2로 이동하고 싶은 경우
firebase console에서 불가능하다... 😞😞😞 내가 rest api로 다이나믹 링크를 만드는 첫번째 이유
동적링크 이름: 임의로 만든 url에 이름을 붙여주자.

Define link behavior for iOS
ios 경우를 설정하는 부분이다.
iOS 앱에서 딥 링크 열기를 선택한다.
앱이 설치되지 않은 경우, 패키지 이름을 선택해서 해당 스토어로 이동하게 한다. 맞춤 url로 이동시킬 수도 있다.

Android용 링크 동작 정의
android 경우를 설정하는 부분이다.
Android 앱에서 딩 링크 열기를 선택한다.
패키지 이름 선택해서 google play로 이동하게 한다. 다른 설정은 넘겼다.

캠페인 추적, 소셜태그, 고급옵션 (선택사항)
이것도 필요하다면 그렇게 하는걸로 한다.

이렇게 생성하고 만들어서 웹의 버튼에 링크를 심으면, 그 버튼을 누를 때 관련 액션들이 콘솔에 저장되고 추적이 되게 된다. 데이터 보이는건 진짜 최고다.

(2) rest api로 만들기

rest api 생성하기 참고 문서:
https://firebase.google.com/docs/dynamic-links/restrest
rest api에 들어가는 데이터 참고 문서:
https://firebase.google.com/docs/reference/dynamic-links/link-shortener

예시

설명은 아래에서

const apiServer =
"https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=api_key"

const data = {
  "dynamicLinkInfo": {
    "domainUriPrefix": string,
    "link": string,
    "androidInfo": {
      "androidPackageName": string,
      "androidFallbackLink": string,
      "androidMinPackageVersionCode": string
    },
    "iosInfo": {
      "iosBundleId": string,
      "iosFallbackLink": string,
      "iosCustomScheme": string,
      "iosIpadFallbackLink": string,
      "iosIpadBundleId": string,
      "iosAppStoreId": string
    },
    "navigationInfo": {
      "enableForcedRedirect": boolean,
    },
    "analyticsInfo": {
      "googlePlayAnalytics": {
        "utmSource": string,
        "utmMedium": string,
        "utmCampaign": string,
        "utmTerm": string,
        "utmContent": string,
        "gclid": string
      },
      "itunesConnectAnalytics": {
        "at": string,
        "ct": string,
        "mt": string,
        "pt": string
      }
    },
    "socialMetaTagInfo": {
      "socialTitle": string,
      "socialDescription": string,
      "socialImageLink": string
    }
  },
  "suffix": {
    "option": "SHORT" or "UNGUESSABLE"
  }
}

axios.post(`${apiServer}`, data, {
	headers: {
		'content-type': 'application/json',
	},
});