마케팅 캠페인에 헤드리스 커머스 플랫폼을 사용하는 방법은 무엇입니까?

헤드리스 커머스 플랫폼이란?

헤드리스 전자 상거래 플랫폼 또는 API 기반 플랫폼 - 프론트 엔드(또는 "헤드")가 분리되거나 완전히 제거되고 백엔드만 남겨진 소프트웨어입니다.

이러한 플랫폼을 뒷받침하는 아키텍처 개념은 CMS 세계에서 시작되었습니다. 비즈니스는 레이어를 분리함으로써 새롭고 새로운 마케팅 채널에서 콘텐츠를 더 빠르게 전달하는 데 방해가 되는 장애물과 싸우기를 원했습니다.

기존 CMS 소프트웨어를 사용하면 개발자가 직면한 하위 수준 문제:

• 디자인은 레거시 프레임워크에 의해 제한되며 사전 정의된 경험 세트만 사용 가능합니다.
• 작은 프론트 엔드 변경은 데이터베이스 및 백엔드 코드의 변경을 요구할 수 있으므로 테스트 시간이 증가하여 작업의 총 비용이 증가합니다.
• 백엔드 코드를 변경하면 프론트엔드에서 예기치 않은 오류가 발생할 수 있습니다.

시간이 지남에 따라 축적되어 비즈니스용 핸드 브레이크로 변환되었습니다.

• 개인화의 여지가 거의 없거나 전혀 없습니다.
• 작은 소프트웨어 변경을 완료하는 데 오랜 시간이 걸리는 이유에 대한 혼란과 상호 오해;
• 새로운 마케팅 채널은 미개척이거나 너무 늦게 제공되는 우선순위가 낮은 소프트웨어를 우회합니다.

그 결과 "API 우선", "API 기반" 또는 "헤드리스 CMS"가 만개했습니다. 그러나 이는 곧 전자 상거래 및 마케팅을 포함한 다른 디지털 영역으로 확장되었습니다.

헤드리스 플랫폼을 처음 접했다면 내 마지막 기사인 API 기반 플랫폼 이해가 흥미로울 것입니다. 또한 Paul은 Headless eCommerce 소개에서 API 기반 도구로 구축된 애플리케이션의 실제 예를 보여줍니다.

헤드리스 플랫폼 – 아이디어에서 생산 준비가 된 POC까지 하루 만에

우리가 정말 그렇게 빨리 유연한 소프트웨어를 만들 수 있는지 확인해 봅시다. 요즘 탑 브랜드들이 사용하는 마케팅 전략을 재현해 보겠습니다. 간단히 말해서 다음과 같습니다.

• 고객의 위치를 ​​파악합니다.
• 그들에게 개인화 된 할인 쿠폰을 할당하십시오.
• 푸시 알림으로 고유 쿠폰 코드를 전달하십시오.

Uber와 같은 회사가 이 소프트웨어에 12명의 개발자 인력 또는 그 이상을 투자했을 것이라고 상상하는 것은 어렵지 않습니다.

임의의 할인 코드를 할당하는 가장 단순한 작업처럼 보일 수 있는 작업에는 주의 사항이 있습니다. 우리 팀이 3년 동안 작업했기 때문에 나는 이것을 힘들게 배웠습니다. 점점 늘어나는 새로운 코너 케이스의 수와 관리 오버헤드는 단순한 시스템처럼 보이는 것조차 소진될 수 있습니다.

다행히 헤드리스 플랫폼이 우리를 도왔습니다.

우리는 세 가지 개발자 친화적인 SaaS 플랫폼을 사용하여 작동하는 솔루션을 만들 것입니다.

• 레이더 - 지리적 위치 API
• Voucherify - 프로모션 관리 API
• Braze - 알림 API

헤드리스 접근 방식을 통해 제공되는 진정으로 개인화된 프로모션을 통해 고객을 경외하기 위해 이들을 함께 결합하는 방법을 살펴보겠습니다.

참고: 다음 솔루션에서는 Radar, Voucherify 및 Braze에 활성 계정이 있다고 가정합니다. 또한 개인을 고유하게 식별하는 데 사용할 수 있는 필드를 포함하여 모든 항목을 고객 데이터베이스로 채워야 합니다.

레이더로 고객이 귀하의 장소에 들어오는 순간 감지 - 헤드리스 위치 정보

레이더의 개념은 간단합니다. 플랫폼은 3가지 컨텍스트 유형을 사용하여 앱의 지리적 위치를 찾습니다.

• 지오펜스 - Radar는 무제한 지오펜스, 폴리곤 지오펜스 및 정지 감지에 대한 플랫폼 간 지원을 통해 기본 iOS 또는 Android 지오펜싱보다 더 강력하다는 것을 자랑스럽게 생각합니다. 이는 모든 지오펜싱 및 이벤트 생성이 서버 측에서 발생하기 때문입니다.
• 장소 - 레이더는 Facebook 데이터베이스를 사용하기 때문에 광범위한 장소 목록을 인식할 수 있습니다. 그리고 가장 멋진 점은 기본 제공 범주(예: 주요 공항) 또는 체인(예: 스타벅스)으로 작업할 수 있다는 것입니다.
• Insights - 그들의 위치 엔진은 또한 사용자가 집과 사무실에 들어오고 나가는 것을 대략적으로 추정하는 방법을 배울 수 있습니다.

Radar는 사용자가 장소를 방문하거나 떠나는 것을 감지하면 웹훅으로 애플리케이션에 알릴 수 있습니다.

개발자가 해야 할 일은 소프트웨어 개발 키트(iOS, Android, 웹) 중 하나를 사용하여 추적 옵션을 인증 및 구성하고 미세 조정하는 것입니다(예: 백그라운드 또는 포그라운드에서 추적하려는 경우).

그러면 레이더 헤드리스 플랫폼이 작동하는 모습을 봅시다!

1. 계정 설정

레이더.io로 이동하여 계정을 등록한 다음 테스트 API 키를 사용하여 아래와 같이 레이더 위젯을 초기화합니다.

{{암호}}

<script src="https://js.radar.io/v1.0.0/radar.min.js" 무결성="sha384-TFQktvQ2F2ST3MCcepqaOHqwc36jDy7r/gAj7dOvU6VXtJ4m4Dj2hByxZ59d4MjK" 교차

<스크립트 유형="텍스트/자바스크립트">

Radar.initialize("YOUR_KEY");

</script>{{ENDCODE}}

2.사용자 추적

마지막 단계는 추적이 작동하는지 확인하는 것입니다. 이를 위해 Radar가 위치 변경을 감지하면 호출되는 trackOnce 메서드를 사용할 것입니다.

코드를 실행하고 Radar가 제공하는 정보를 살펴보겠습니다(브라우저에서 위치 추적을 허용하는 것을 잊지 마십시오).

{{암호}}

Radar.trackOnce(함수(상태, 위치, 사용자, 이벤트) { console.log({ 상태, 위치, 사용자, 이벤트 });});

{{ENDCODE}}

산출:

{{암호}}

이벤트: [] (0)

위치: 좌표 {위도: 50.25462479999998, 경도: 19.061743829999994, 고도: null, 정확도: 165, heightAccuracy: null, …}

상태: "성공"

사용자: {userAgent: "Mozilla/5.0(Macintosh; Intel Mac OS X 10_14_4) Ap… (Gecko와 같은 KHTML) Version/12.1 Safari/605.1.15", ip: "93.179.216.18", locationAccuracy: 165, deviceType: "웹", 중지됨: true, …}

{{ENDCODE}}

OK - 레이더가 우리의 은신처를 찾았습니다. 그러나 컨텍스트가 없으면 이 정보로 무엇을 해야 할지 모릅니다. 레이더의 정보를 연구합시다.

우리는 당신이 체크인한 장소의 이름을 줄 것입니다 - 일반적으로 (레이더에서도) 이 위치 컨텍스트를 지오펜스라고 합니다. 이 작업을 수행하는 방법은 다음과 같습니다.

• 지오펜스 생성기로 이동합니다.
• 각각의 소스 유형을 선택하고 장소로 이동하여 쿼리로 my company를 입력하겠습니다.
• 결과적으로 Radar는 지리 좌표를 조회하고 지오펜스 경계를 ​​제안합니다.

• 위치가 적합하면 CREATE로 지오펜스를 확인하십시오.

이제 페이지를 새로고침하고 콘솔을 살펴보겠습니다. 레이더는 이제 우리에게 몇 가지 이벤트 를 보냅니다.

{{암호}}

{

"createdAt":"2019-04-16T16:08:49.645Z",

"라이브":거짓,

"유형":"user.entered_geofence",

"위치":{

"좌표":[

19.062212,

50.254927099999996

],

"유형": "포인트"

},

"위치정확도":20,

"자신감":3,

"actualCreatedAt":"2019-04-16T16:08:49.645Z",

"사용자":{

"_id": "5cb5f2ba36581b002a3534ca",

"userAgent":"Mozilla/5.0(Macintosh, Intel Mac OS X 10_14_4) AppleWebKit/537.36(Gecko와 같은 KHTML) Chrome/73.0.3683.103 Safari/537.36",

"장치 ID": "a96ec0db-969c-4a77-996c-361a0530660a"

},

"지오펜스":{

"_id": "5cb5f7d3a60e95002b009ebd",

"설명": "관점",

"유형": "원",

"기하학 반경": 100,

"기하학 센터":{

"유형": "점",

"좌표":[

19.062346299999945,

50.25495069999999

]

}

},

"_id":"5cb5fe117cd3430025b9ee0d"

}

{{ENDCODE}}

새로 생성된 지오펜스에 진입했다는 것을 이해하는 것 같습니다. 같은 장소에 앉아 있기 때문에 이후의 새로 고침은 새로운 이벤트를 가져오지 않아야 합니다. 그러나 위치를 변경하면 레이더도 이를 감지합니다.

테스트하려면 컴퓨터를 잡고 지오펜스 영역 밖으로 나가서 거기에서 다시 로그인하세요.또는... Chrome 도구에서 센서를 사용할 수 있습니다.

충분히 먼 곳을 선택하여 위치를 속이고 페이지를 다시 새로 고칩니다. 이제 레이더는 user.exited_geofence 를 보여줍니다.

편리한 Radar 대시보드를 사용하여 등록 및 미등록 모든 사용자의 지리적 위치 이벤트를 실시간으로 추적할 수 있습니다.

헤드리스 메시징을 통해 외부 앱에 알림

따라서 레이더의 추적은 이제 우리의 위치 컨텍스트를 이해합니다. 그러나 우리의 시나리오에 사용하려면 Radar가 외부 세계와 공유해야 합니다. 그리고 그것은 여러 면에서 그렇게 합니다. 그 중 하나는 웹훅을 사용하는 것입니다.

웹훅 은 애플리케이션이 다른 애플리케이션에 실시간 정보를 제공할 수 있는 방법을 제공하는 API 개념입니다.

여러 시스템에서 고객 데이터를 수집하고 교환하는 데 도움이 되는 플랫폼인 Segment에 따르면 웹훅의 인기가 빠르게 증가하고 있습니다.

일반적인 웹훅 구현을 통해 애플리케이션 사용자는 다음을 수행할 수 있습니다.

• 외부 시스템(또는 여러 시스템)에 알림
• API 호출로
• 특정 사건이 발생한 순간.

이러한 메커니즘을 사용하면 앱 사용자가 실시간 변경 사항을 파악하기 위해 데이터를 자주 폴링할 필요가 없습니다.

외부 API에 요청을 보내는 것은 프로세스의 한 쪽일 뿐입니다. 웹훅 주기를 완료하려면 수신 클라이언트가 웹훅 주기를 성공적으로 소비해야 합니다.

HTTP 세계에서 이것은 일반적으로 2** 상태로 응답하는 것을 의미합니다. 그렇지 않으면 웹훅 엔진이 나중에 다시 시도합니다(재시도 정책은 정의된 정책 작성자에 따라 다름).

우리의 경우 Radar는 위치를 제공된 엔드포인트로 변경할 때 본 이벤트 페이로드를 보냅니다. 웹훅이 작동하는지 보기 위해 하나를 추가해 보겠습니다.

1. 통합으로 이동합니다.
2. 테스트 환경 및 단일 이벤트 전달 을 선택합니다.
3. 알림을 받을 끝점을 제공합니다. 여기에 몇 가지 옵션이 있습니다. 다음을 수행할 수 있습니다.

• 컴퓨터에서 간단한 웹 서버를 분리하고 ngrok을 사용하여 트래픽을 채널링합니다.
• 글리치를 사용하여 엔드포인트를 즉시 배포하고,
• webhook.site 또는 requestbin과 같은 온라인 웹훅 캐처 중 하나를 탭하십시오.

4. 고유한 URL을 양식에 붙여넣고 확인합니다.
   

5. ACTIONS 열에서 테스트를 클릭하여 첫 번째 이벤트를 시작합니다. 올바르게 설정했다면 아래 그림과 같이 웹훅 페이로드가 표시되어야 합니다.

여태까지는 그런대로 잘됐다. 결과는 꽤 유망합니다. 일부 복사 및 붙여넣기와 JavaScript 스니펫을 사용하여 사용 사례의 지리적 위치 부분을 다뤘습니다. 현재 단계에서 Radar는 쿠키에 저장된 장치 ID 외에는 사용자를 식별할 수 없습니다. 더 강력하게 만들기 위해 이메일로 사용자를 식별해 보겠습니다. Radar의 SDK를 사용하면 한 줄로 표시됩니다.

{{암호}}

Radar.setUserId(“[email protected]”);

{{ENDCODE}}

대시보드에서 새 ID를 즉시 확인할 수 있습니다.

따라서 이제 개인 할인 요구 사항인 고유한 쿠폰 코드를 처리해야 합니다.

레이더와 Voucherify 헤드리스 프로모션 엔진 연결

Radar와 마찬가지로 Voucherify의 API는 처음부터 시작할 경우 발생하는 비용의 일부에 대해 유연한 쿠폰 기능을 제공합니다.

곧 알게 되겠지만, 이는 미래의 마케팅 채널의 현재와 함께 제공될 수 있는 할인, 추천 또는 로열티 프로그램과 같은 다른 판촉 캠페인을 지원합니다.

Voucherify 개인화 기능을 활용하려면 먼저 사용자 데이터를 가져와 동기화 상태로 유지해야 합니다.

Voucherify는 개인 속성, 위치 및 Voucherify 상호 작용 기록에 따라 세그먼트로 그룹화할 수 있는 고객 개체에 고객 데이터를 저장합니다.

테스트 고객을 이미 Voucherify로 가져왔다고 가정하고 이제 코드 없이 해당 위치를 Radar와 동기화하는 방법을 살펴보겠습니다.

Zapier – 웹의 접착제

웹훅을 노출하는 모든 플랫폼이 단일 디렉토리에 나열되어 있고 통합된 구조와 블록처럼 연결할 수 있는 기능이 있다고 상상해 보십시오. Zapier를 만나보십시오.

Zapier는 1000개 이상의 웹 앱을 연결하고 백그라운드에서 함께 작동할 수 있습니다.

모든 Zap은 워크플로를 시작하는 앱 중 하나의 이벤트 트리거로 시작됩니다. 다음은 Zapier 문서의 몇 가지 예입니다.

• 새로운 RSS 항목을 Facebook에 게시물로 보내 소셜 미디어 존재를 자동화하십시오.
• 새 Trello 카드를 Evernote에 복사하여 프로젝트를 정리하세요.
• Typeform의 양식 응답자를 MailChimp의 메일링 목록에 추가하여 잠재 고객과 계속 연락하십시오.
• 예정된 Google 캘린더 이벤트를 Slack의 채널에 알려 팀이 회의를 놓치지 않도록 하세요.
• …그리고 더 많은!

이제 "Zapier가 우리를 도울 수 있습니까?"라고 물을 것입니다. 예, 그럴 수 있습니다! Voucherify에 대한 지리적 위치 변경 사항을 업데이트하기 위해 몇 가지 Zap을 사용해 봅시다.

1. Zap 만들기를 클릭하고 Webhooks를 선택합니다.
2. 이 옵션을 사용하여 Zapier는 Radar에서 웹훅을 사용하는 데 사용할 수 있는 엔드포인트(webhook.site와 유사)를 생성할 수 있습니다. 이렇게 하려면 Catch Hook을 선택합니다.
3. 다음 보기는 레이더 웹훅 설정에서 이전 URL을 대체할 끝점 URL을 제공합니다.

4. Radar에 링크를 붙여넣고 테스트를 다시 시작합니다. Radar가 녹색 플래시 막대로 새 끝점을 확인하면 Zapier에서 다음 단계로 이동합니다.
5. 다음 화면에서 테스트 요청의 페이로드를 확인해야 합니다.

6. 양식을 확인하고 Zap의 첫 번째 단계인 트리거가 준비되었는지 확인합니다.

이제 소비된 메시지를 작업에 넣어야 합니다. Zap을 완료하려면 최소한 하나의 작업이 필요합니다(단일 Zap으로 여러 플랫폼을 연결할 수 있음).

1. 액션 익스플로러에서 상품권을 선택하세요. 참고 Voucherify Zap은 "초대에 의해" 사용할 수 있습니다. 여기 링크가 있습니다.

2. 고객 업데이트 옵션을 선택하고 템플릿 설정 양식으로 진행합니다.
3. 이것은 핵심 부분입니다. 이 양식에서 Zapier를 사용하면 입력을 출력으로 매핑할 수 있습니다. 편집기는 강력하고 직관적입니다. 여기에는 키와 값으로 들어오는 JSON을 탐색할 수 있는 스마트 검색 필드가 있습니다. 두 개 이상의 입력 필드를 하나의 나가는 필드로 쉽게 연결할 수도 있습니다.

우리의 경우 source_id로 고객을 식별하고 이벤트에 따라 사용자 정의 필드 "rspectiveHQ"를 업데이트하기를 원하므로 매핑은 다음과 같습니다.

상품권: 소스 ID - 레이더: 사용자 ID
상품권: 메타데이터 -> rspectiveHQ - 레이더: 이벤트 유형

4. 테스트를 건너뛰고 양식을 작성하세요. ZAP가 켜져 있고 기다리고 있습니다!
   

Radar의 웹훅을 구성하고 Voucherify Zap을 설정했습니다. 전체 파이프라인이 작동하는지 테스트해 보겠습니다. 웹 앱으로 이동하여 위치를 다시 한 번 변경하여 레이더 감지기에 알리십시오.

따라야 할 사항은 다음과 같습니다.

• 레이더는 2개의 이벤트를 추적하고 사용자는 지오펜스로 나가고 있습니다.
• Zapier는 그에 따라 2개의 웹훅을 포착합니다.
• Voucherify는 고객 프로필 업데이트를 추적합니다.

Zapier는 그 이상입니다. 워크플로 구성 옵션을 살펴보면 상당히 복잡한 프로세스를 구축할 수 있는 톱니바퀴를 발견할 수 있습니다. 조건, 필터 또는 지연과 같은 도우미 단계는 입력 데이터를 처리하고 요약하고 그에 따라 출력 형식을 지정하는 데 도움이 됩니다.

단계 중 하나에서 더 많은 유연성이 필요한 경우 사용자 정의 코드(JavaScript 및 Python으로)를 작성할 수도 있습니다. 일련의 트리거-액션 쌍을 연결할 수 있다고 이미 말했습니까?

Zapier 빠른 시작 문서에서 시간을 절약할 수 있는 방법을 이해할 수 있는 기회를 제공하십시오.

헤드리스 프로모션 엔진을 통해 지리적 위치에 있는 사용자를 위한 고유 쿠폰 생성

Voucherify의 필수 기능 중 하나는 실시간으로 고객의 프로필을 기반으로 할인을 개인화하는 것입니다. 이는 고객 속성과 고객이 장바구니에 담았던 항목을 모니터링하고 일부 비즈니스 규칙에 따라 작업을 실행하는 동적 세그먼트 덕분에 가능합니다.

우리의 경우, 고객이 지오펜스를 입력한 경우 정보를 저장하는 사용자 정의 필드(rspectiveHQ)를 확인하는 세그먼트를 만들 것입니다. Voucherify API의 단일 엔드포인트로 이를 달성할 수 있지만 가장 빠른 방법은 단순히 대시보드를 사용하는 것입니다.

고객으로 이동하여 세그먼트 생성기를 엽니다. 이제 아래 그림과 같이 해당 메타데이터 필드를 사용하여 고객을 필터링합니다.

필터를 확인하고 새로고침 을 누르면 세그먼트와 일치하는 모든 고객이 표시됩니다. 테스트 사용자에게 지오펜스를 떠나고 세그먼트를 다시 로드하여 통합이 예상대로 작동하는지 확인하도록 "요청"할 수 있습니다.

보이는 것이 현실을 반영한다면 세그먼트를 저장하십시오.

다음 단계는 위치에 대한 정보를 사용하여 할인을 적용하는 것입니다.

하지만 자세히 알아보기 전에 잠시 멈추고 백엔드 코드를 하나도 작성하지 않고 지금까지 우리가 얼마나 많은 것을 달성했는지 분석해 보시기 바랍니다. 동시에 Radar와 Voucherify는 필요할 때마다 연결할 수 있는 풍부한 API와 헤드리스 아키텍처를 제공하기 때문에 변경을 위해 솔루션을 닫지 않았습니다.

마지막 단계는 다음을 수행하는 배포 를 설정하는 것입니다.

• 고유 쿠폰 코드 보내기
• 감지된 고객에게
• 미리 정의된 채널로

우선 모든 사용자에 대해 고유한 프로모션 코드를 생성해 보겠습니다. 10% 할인해 드리겠습니다. 캠페인 작성자로 이동하여 대량 코드 옵션을 선택하고 정의할 단계를 따르십시오.

• 할인의 종류와 금액,
• 기간,
• 길이, 접두사, 접미사 및 문자 집합을 포함하는 코드 패턴,
• 초기 코드 수,
• 및 기타 세부 사항.

생성자의 4단계인 유효성 검사 규칙이 특히 흥미롭습니다. 여기에서 코드를 사용할 수 있는 사람과 조건을 정의할 수 있습니다. 우리는 지오펜스를 방문한 고객에게만 사용을 제한하고자 함을 기억하십시오. 세그먼트를 사용하여 이 단계를 완료합니다.

이 도구는 훨씬 더 많은 필터링 옵션을 제공합니다. 고객 확보 또는 유지 캠페인을 진행하는 경우 많은 코드 라인을 절약할 수 있으므로 유효성 검사 규칙 참조를 확인하는 것이 좋습니다.

Voucherify가 대량 생성을 완료하면 다음과 같이 나열되어야 합니다.

세그먼트와 프로모션 코드가 있으므로 이제 마케팅 아웃바운드 채널에 연결해 보겠습니다.

Voucherify API 및 웹훅으로 구현할 수 있지만 배포를 충족하는 더 빠른 방법이 있습니다.

이 기능을 사용하면 새로운 고객이 세그먼트에 입력(또는 이탈)했는지 감지하고 고유한 쿠폰 코드를 할당하여 이메일, SMS, 푸시 알림, 라이브 채팅 또는 소셜 미디어 광고와 함께 보낼 수 있습니다. 또한 시각적 편집기를 사용하여 개인화된 프로모션 사본을 만들 수 있습니다.

각 채널에는 메시지의 고유한 템플릿이 있습니다. 푸시 알림을 찾는 방법을 살펴보겠습니다. 하지만 진행하려면 Braze 계정에 가입하고 API 키로 Voucherify와 연결해야 합니다.

Braze로 푸시 알림을 통해 프로모션 코드 보내기

Braze(구 AppBoy)는 모바일 마케팅 도구의 선두 주자 중 하나입니다. 우리는 그들의 기능 중 일부만 사용할 것이므로 그들의 문서를 확인하여 제안에 대한 자세한 내용을 찾는 것이 좋습니다.

시나리오 구성에는 3단계가 필요합니다.

• 푸시 알림 캠페인 만들기
• Voucherify에서 Braze로 쿠폰 코드 보내기
• 앱에서 웹 푸시 알림 구성.

푸시 알림 캠페인

Voucherify와 유사하게 Braze는 고객 속성에 대한 실시간 변경 사항을 기반으로 몇 가지 작업을 트리거할 수 있습니다. 이 특별한 경우에 우리가 Voucherify에서 생성한 배포는 대량 코드 캠페인의 고유 코드로 채워진 사용자 정의 필드를 설정합니다.

이 변경 사항을 감지하고 고객이 로그인한 앱 인스턴스에 대한 푸시 알림을 실행하는 방식으로 Braze 캠페인을 정의합니다.

1. 앱 그룹 관리를 열어 앱 컨텍스트를 정의합니다.
2. API 공개 키를 얻으려면 웹 앱을 선택하십시오.
   

3. 이제 캠페인으로 이동하여 새 푸시 알림 캠페인을 만들 수 있습니다.
4. 쿠폰 코드 {{custom_attribute.${coupon}}}가 포함된 메시지를 작성하고 테스트 탭을 선택한 다음 나 자신에게 테스트 보내기를 사용합니다. 웹 알림을 허용하면 오른쪽 상단에서 메시지가 미끄러지는 것을 확인해야 합니다.

5. 이 사용자 정의 속성을 사용자에게 추가하지 않았기 때문에 테스트 메시지의 쿠폰 코드는 비어 있습니다. 캠페인 초안을 저장하고 수동으로 코드를 사용하여 테스트 사용자를 생성해 보겠습니다.
   
   다음 행을 따라 간단한 CSV 파일을 만듭니다.

{{암호}}

external_id, 쿠폰

[email protected], xyz

{{ENDCODE}}

그리고 사용자 가져오기로 이동하여 업로드합니다.

6. 이제 테스트 데이터와 "수신인의 속성 무시..." 옵션이 선택되었으므로 대체된 변수를 볼 수 있습니다.
7. 배달 탭에서 배달 유형을 액션 기반으로 변경하고 아래 그림과 같이 사용자 지정 속성 값 트리거 변경을 선택합니다.

8. 다음 단계에서 캠페인에 "모든 사용자"를 등록하고 다른 설정은 그대로 둡니다. 준비가 되면 오른쪽 하단에서 캠페인 시작을 클릭합니다.

Braze에 쿠폰 코드 제공

Voucherify를 Braze에 연결해야 하는 순간입니다. 다행히 Voucherify는 기본 통합으로 Braze를 지원합니다. 이 두 마케팅 플랫폼을 연결하기 위해 남은 유일한 것은 통합으로 이동하여 Braze를 선택하고 API 엔드포인트와 키를 제공하는 것입니다.

이제 배포 초안을 다시 열고 마지막 단계를 완료할 수 있습니다. Voucherify가 고유한 코드와 그 값을 할당하는 사용자 정의 필드의 이름을 제공하십시오:

그리고 라이브로 설정합니다. 이제부터 Radar가 지오펜스 이벤트를 감지하여 고객 세그먼트를 업데이트할 때마다 Voucherify는 이 고객에게 쿠폰 코드를 할당하고 Braze의 사용자 프로필에 게시합니다.

Braze 캠페인은 새로운 필드 변경을 감지하고 웹 알림을 보내려고 합니다.

푸시 알림 수신

거의 다 왔어! 프로모션 체인을 마무리하는 가장 마지막 단계는 푸시 알림이 앱으로 흐르도록 하는 것입니다.

헤드리스 플랫폼의 경우 평소와 같이 수동으로 구현할 필요가 없습니다. 진정한 개발자 우선 플랫폼인 Braze는 웹용 오픈 소스 SDK를 제공합니다.

실행하려면 짧은 스니펫을 붙여넣고 공개 API 키로 채워야 합니다.

{{암호}}

<스크립트 유형="텍스트/자바스크립트">

const test_user = {

이름: "마이크",

성: "Sedzielewski",

이메일 : "[email protected]"

}

+function(a,p,P,b,y){appboy={};appboyQueue=[];for(var

s="초기화 파괴 getDeviceId 토글AppboyLogging setLogger

openSession changeUser requestImmediateDataFlush requestFeedRefresh

subscribeToFeedUpdates 요청ContentCardsRefresh

subscribeToContentCards업데이트 logCardImpressions logCardClick

logCardDismissal logFeedDisplayed logContentCardsDisplayed

로그인앱메시지노출로그인앱메시지클릭

logInAppMessageButtonClick logInAppMessageHtmlClick

subscribeToNewInAppMessages removeSubscription

removeAllSubscriptions logCustomEvent logPurchase isPushSupported

isPushBlocked isPushGranted isPushPermissionGranted

registerAppboyPushMessages 등록 취소AppboyPushMessages

submitFeedback trackLocation stopWebTracking 이력서WebTracking

WipeData ab ab.DeviceProperties ab.User ab.User.Genders

ab.User.NotificationSubscriptionTypes ab.User.prototype.getUserId

ab.User.prototype.setFirstName ab.User.prototype.setLastName

ab.User.prototype.setEmail ab.User.prototype.setGender

ab.User.prototype.setDateOfBirth ab.User.prototype.setCountry

ab.User.prototype.setHomeCity ab.User.prototype.setLanguage

ab.User.prototype.setEmailNotificationSubscriptionType

ab.User.prototype.setPushNotificationSubscriptionType

ab.User.prototype.setPhoneNumber ab.User.prototype.setAvatarImageUrl

ab.User.prototype.setLastKnownLocation

ab.User.prototype.setUserAttribute

ab.User.prototype.setCustomUserAttribute

ab.User.prototype.addToCustomAttributeArray

ab.User.prototype.removeFromCustomAttributeArray

ab.User.prototype.incrementCustomUserAttribute

ab.User.prototype.addAlias

ab.User.prototype.setCustomLocationAttribute

ab.InAppMessage ab.InAppMessage.Slide에서 ab.InAppMessage.ClickAction

ab.InAppMessage.DismissType ab.InAppMessage.OpenTarget

ab.InAppMessage.ImageStyle ab.InAppMessage.TextAlignment

ab.InAppMessage.Orientation ab.InAppMessage.CropType

ab.InAppMessage.prototype.subscribeToClickedEvent

ab.InAppMessage.prototype.subscribeToDismissedEvent

ab.InAppMessage.prototype.removeSubscription

ab.InAppMessage.prototype.removeAllSubscriptions

ab.InAppMessage.Button

ab.InAppMessage.Button.prototype.subscribeToClickedEvent

ab.InAppMessage.Button.prototype.removeSubscription

ab.InAppMessage.Button.prototype.removeAllSubscriptions

ab.SlideUpMessage ab.ModalMessage ab.FullScreenMessage

ab.HtmlMessage ab.ControlMessage ab.피드

ab.Feed.prototype.getUnreadCardCount ab.ContentCards

ab.ContentCards.prototype.getUnviewedCardCount ab.Card

ab.ClassicCard ab.CaptionedImage ab.배너 ab.ControlCard

ab.WindowUtils는 display.automaticallyShowNewInAppMessages를 표시합니다.

display.showInAppMessage display.showFeed display.destroyFeed

display.toggleFeed display.showContentCards display.hideContentCards

display.toggleContentCards sharedLib".split("

"),i=0;i<s.length;i++){for(var

m=s[i],k=appboy,l=m.split("."),j=0;j<l.length-1;j++)k=k[l[j]];k[l[ 제이]

]=(new Function("반환 함수

"+m.replace(/\./g,"_")+"(){appboyQueue.push(인수); 반품

true}"))()}appboy.getUser=function(){새로 반환

appboy.ab.User};appboy.getCachedFeed=function(){새로 반환

appboy.ab.Feed};appboy.getCachedContentCards=function(){새로 반환

appboy.ab.ContentCards};(y=p.createElement(P)).type='텍스트/자바스크립트

';y.src='https://js.appboycdn.com/web-sdk/2.3/appboy.min.js';y.async

=1;(b=p.getElementsByTagName(P)[0]).parentNode.insertBefore(y,b)}(wi

ndow, 문서, '스크립트');

appboy.initialize('YOUR_KEY', {baseUrl:

"https://sdk.iad-03.braze.com/api/v3"});

appboy.toggleAppboyLogging();

appboy.registerAppboyPushMessages()

appboy.changeUser("[email protected]");

appboy.display.automaticallyShowNewInAppMessages();

앱보이.오픈세션();

</스크립트>

{{ENDCODE}}

그리고 service-worker.js를 등록합니다.

{{암호}}

self.importScripts('https://js.appboycdn.com/web-sdk/2.3/service-worker.js');

{{ENDCODE}}

제자리에 있으면 "개별 사용자 추가" 입력에서 "text@example" 사용자로 다른 테스트를 실행합니다. 앱은 "xyz" 프로모션 코드가 포함된 알림을 받아야 합니다.

이제 쿠폰 필드를 변경할 때 캠페인이 푸시 메시지를 트리거하는지 테스트해 보겠습니다.

먼저 캠페인이 활성 상태이고 웹 앱이 실행되었는지 확인합니다. 둘째, Braze Postman 컬렉션을 다운로드하고 사용자 데이터 카탈로그를 열고 사용자 추적 - 속성 예를 선택합니다. (포스트맨을 모르신다면 여기에서 따라잡으시면 됩니다)

엔드포인트 URL을 할당된 URL로 변경합니다. 제 경우에는 https://rest.iad-03.braze.com/입니다.

그리고 요청 페이로드:

{{암호}}{

"api_key": "YOUR_KEY",

"속성":[

{

"external_id":"[email protected]",

"쿠폰": "123"

}

]

} {{ENDCODE}}

요청을 보내고 업데이트된 쿠폰 코드가 포함된 다른 메시지를 기대하세요.

모든 헤드리스 빌딩 블록 테스트

워크플로가 우리가 요청한 대로 수행되도록 하려면 앱을 열고 센서를 사용하여 다른 장소를 "찾아낸" 다음 다시 지오펜스로 돌아갑니다. 몇 초 안에 개인화된 알림이 화면에 표시됩니다!

이제 사용자는 코드를 가져와 백엔드에서 Voucherify가 검증한 쿠폰 상자에 넣을 수 있습니다.

헤드리스 플랫폼의 장점을 요약하자면 다음과 같습니다.

• 한 시간 정도 만에 우리는 상당히 복잡한 비즈니스 시나리오에 적합한 솔루션을 제공했습니다.
• 코드 기반은 매우 짧고 간단하여 유지 관리 오버헤드가 적습니다.
• 솔루션을 100% 제어할 수는 없지만 API 액세스 덕분에 사용자 정의를 위해 여전히 열려 있습니다.
• 완전한 소유권의 부족은 공급업체 팀의 지원 및 더 나은 도구 품질과 균형을 이룹니다.
• 웹훅과 Zapier와 같은 도구를 사용하면 다양한 부서와 시스템을 순식간에 연결하고 엮을 수 있습니다.

여러 SaaS 공급업체를 사용할 때 주의해야 할 한 가지는 대체입니다. 때때로 플랫폼이 다운되어 시스템에 어떻게 반응해야 하는지 지시해야 합니다(예: 작업을 저장하고 대기열에 넣는 방법). 그러나 개발자 친화적인 플랫폼은 API 가용성을 모니터링하고 적시에 대응하는 데 사용할 수 있는 인터페이스를 제공합니다.

반면에 POC 단계의 애플리케이션에는 매우 강력한 폴백이 필요하지 않습니다.

헤드리스 접근 방식이 어떻게 도움이 됩니까?

간단히 말해서 헤드리스 플랫폼을 활용하여 가치 있는 것을 신속하고 저렴한 비용으로 구축하는 방법을 배우면 취업 시장에서 더 가치 있는 사람이 될 수 있습니다.

오늘날 경쟁 우위를 차지하는 것은 프로그래밍 언어나 프레임워크가 아닙니다. 그것은 종종 매우 다릅니다. 기업이 가능한 최소한의 코드로 문제를 해결하기 위해 사용 가능한 도구를 사용하는 방법입니다. 다시 말해, 다음은 주어진 기술 스택을 마스터하는 것보다 더 중요한 것입니다.

• 시장 출시 시간을 단축하는 방법을 알고 있습니다.
• 유지보수 비용 절감 기술의 개요;
• 개별 기술에 대한 의존도를 줄이는 능력;
• 위의 세 가지를 지원하는 현재 기술의 개요.

헤드리스 커머스 플랫폼은 어디에서 더 찾을 수 있습니까?

좋은 출발점은 다음 목록일 수 있습니다.

프로모션

• 상품권
• 기프빗
• 바우샤르

카탈로그 및 인벤토리

• 리콤비
• 채널레이프
• 결정화

카트

• 짤막한 카트
• 여우 같은

지불

• 줄무늬
• 로 인한
• 정사각형

메시징

• 층
• 미는 사람
• 퍼브넘

예약 및 이벤트

• 타임킷
• 인그레소

배송

• 싯포
• 쉽클라우드
• 솜씨 없는 사람

일반적인

• 탄력있는
• 짤막한 카트
• 몰틴
• 주문클라우드
• 커머스도구

그러나 헤드리스 전자 상거래를 넘어 가고 싶다면 https://www.programmableweb.com을 방문하여 자세히 살펴보는 것이 좋습니다. 조사를 시작하는 또 다른 방법은 Zapier 통합을 탐색하는 것입니다.

또 다른 방법은 Postman API 네트워크로 이동하는 것입니다.

자원:

글리치에 대한 데모 소스 코드