Braze에 이메일 업로드

Emailify의 Braze 연동으로 Figma 플러그인에서 HTML 이메일을 Braze 템플릿에 바로 업로드할 수 있어요.

영상 튜토리얼: Braze에 이메일 업로드(영어)

이 영상에서는 Figma Emailify 플러그인에서 Braze로 HTML 이메일을 업로드하는 방법을 보여 줘요.

Emailify 내보내기 패널의 드롭다운 목록에서 Braze (API) 옵션을 선택한 다음, 유효한 Braze API 키와 REST 엔드포인트 리전을 붙여 넣으세요. 이 값은 Braze 대시보드 페이지에서 확인하고 만들 수 있어요.

Braze에서 이메일을 만들려면 templates.email.create 권한이 켜진 Braze API 키가 필요해요.

준비가 되면 Upload To Braze 버튼을 클릭하세요. Figma에서 선택한 이메일을 HTML로 내보내고 Braze 마케팅 템플릿에 자동으로 업로드해요. 업로드한 템플릿은 Braze 계정에 로그인한 뒤 사이드바의 Templates 항목을 클릭하고, Email Templates를 클릭하고, HTML Editor 옵션을 클릭한 다음 아래의 Saved HTML Templates 목록에서 확인할 수 있어요.

중요: Inline CSS 설정 끄기 ​

Braze 계정에서 Braze Inline CSS 설정이 켜져 있으면, Braze가 CSS 스타일시트의 스타일을 HTML 이메일 본문으로 옮기면서 HTML을 다시 처리해요. 이 작업은 Emailify가 이미 처리했기 때문에, 이 토글이 켜져 있으면 다른 스타일이 제거되어 모바일과 데스크톱 레이아웃 일부가 깨져요.

Sending Settings -> Advanced 섹션의 Enable Inline CSS가 꺼져 있는지 꼭 확인하세요. Emailify가 HTML을 자동으로 인라인 처리하고 압축하기 때문에, Braze에서 다시 처리하면 코드가 깨져요.

이메일 하나에만 Inline CSS를 끄려면 Braze Drag & Drop Editor의 Edit Sending Info -> Advanced 탭으로 이동해 Inline CSS를 끄세요. Braze의 Settings -> Email Preferences에서 전역으로 설정할 수도 있어요.

이전 버전의 Braze를 쓰고 있다면 전역 Inline CSS 토글(끌 항목)은 Manage Settings -> Email Settings -> Inline CSS에 있어요.

Emailify에서 업로드한 Braze 템플릿 업데이트 ​

Braze 템플릿을 매번 새 템플릿으로 만들지 않고 자동으로 업데이트하고 싶다면, 플러그인 내보내기 설정에서(Braze (API) 옵션을 선택한 상태로) Enable Updatable Templates 토글을 켜세요.

그러면 업로드한 Figma 프레임의 레이어 이름 뒤에 brazeTemplateId 값이 자동으로 추가되고, 다음에 플러그인에서 내보낼 때 같은 프레임을 API로 Braze에 다시 업로드하면 그 ID를 다시 사용해요.

참고로 처음 템플릿을 업로드하기 전에 Enable Updatable Templates 토글도 켜져 있는지 확인해야 해요. 그래야 Braze에 처음 업로드한 템플릿의 Braze 템플릿 ID가 Figma 프레임 이름에 추가돼요. 이후 Enable Updatable Templates 토글이 계속 켜져 있다면, 다시 업로드할 때마다 이 ID로 Braze 계정의 같은 템플릿을 업데이트해요(매번 새 템플릿을 만들지 않아요).

Braze에서 이메일을 업데이트하려면 templates.email.update 권한이 켜진 Braze API 키가 필요해요.

Emailify 링크를 SparkPost용 유니버설 링크로 바꾸려면 URL 끝에 [[data-msys-sublink='open-in-app']]를 추가하세요(예: http://www.example.com[[data-msys-sublink='open-in-app']]). 그러면 <a> 링크 태그에 data-msys-sublink 데이터 속성이 자동으로 들어가요(예: <a href="https://example.com" data-msys-sublink="open-in-app">).

그런 다음 앱이 사용자 지정 경로를 제대로 처리하도록 설정되어 있는지 확인하세요. SparkPost의 딥 링크에서 SparkPost 클릭 추적 사용하기 문서를 참고하세요. 이 문서에는 iOS와 Android용 예제 코드가 들어 있어요.

Emailify 링크를 SendGrid용 유니버설 링크로 바꾸려면 URL 끝에 [[universal='true']]를 추가하세요(예: http://www.example.com[[universal='true']]). 그러면 <a> 링크 태그에 universal 데이터 속성이 자동으로 들어가요(예: <a href="https://example.com" universal="true">).

그런 다음 앱이 사용자 지정 경로를 제대로 처리하도록 설정되어 있는지 확인하세요. SendGrid의 딥 링크에서 SendGrid 클릭 추적 사용하기 문서를 참고하세요. 이 문서에는 iOS와 Android용 예제 코드가 들어 있어요.