PWA에 대한 투자로 사용자 유지율을 450% 높인 Rakuten 24

웹 앱을 설치할 수 있도록 개선한 결과 트래픽, 방문자 유지, 고객당 판매량, 전환수가 증가했습니다.

Rakuten 24는 일본 최대의 전자상거래 기업 중 하나인 Rakuten에서 제공하는 온라인 상점입니다. 식료품, 의약품, 헬스케어, 주방기구 등 다양한 일상용품을 제공합니다. 지난 1년간 팀의 주요 목표는 모바일 고객 유지율과 재참여율을 높이는 것이었습니다. 웹 앱을 설치 가능하게 만든 결과, 1개월 동안 이전 모바일 웹 흐름에 비해 방문자 유지율이 450% 증가했습니다.

기회 강조

시장점유율을 높이고 사용자 환경을 개선하기 위한 Rakuten 24는 다음과 같은 기회 영역을 확인했습니다.

• 비교적 새로운 서비스인 Rakuten 24는 iOS와 Android 모두를 위한 플랫폼별 앱을 개발하는 데 시간과 비용을 투자할 입장이 아니었으며 이러한 공백을 메울 수 있는 효율적인 대안을 찾고 있었습니다.
• 라쿠텐이치바 (Rakuten의 전자상거래 마켓)는 일본에서 가장 큰 서비스이기 때문에 많은 사람들이 Rakuten 24가 Rakuten-Ichiba의 판매자라고 생각합니다. 그 결과, 브랜드 인지도에 투자하고 더 많은 사용자 유지율을 높일 필요성을 인식하게 되었습니다.

사용한 도구

설치 가능성

위에서 확인한 두 가지 기회를 포착하기 위해 Rakuten 24는 설치 가능성부터 시작하여 점진적으로 프로그레시브 웹 앱 (PWA) 기능을 빌드하기로 했습니다. 설치 가능성을 구현한 결과 트래픽, 방문자 유지, 고객당 판매, 전환수가 증가했습니다.

beforeinstallprompt

설치 대화상자의 동작을 더 유연하게 제어할 수 있도록 팀은 beforeinstallprompt 이벤트를 사용하여 자체 설치 메시지를 구현했습니다. 그 결과 앱이 Android 또는 iOS에 이미 설치되어 있는지 감지하고 사용자에게 더 의미 있고 관련성 높은 환경을 제공할 수 있었습니다.

맞춤 설치 안내

배너에서 PWA를 설치할 수 없는 사용자를 위해 Android 및 iOS 기기 모두에서 PWA를 수동으로 설치하는 방법에 관한 안내가 포함된 맞춤 가이드(배너에서 링크됨)를 만들었습니다.

서비스 워커용 작업 상자

Rakuten 24팀은 Workbox (정확하게 workbox-webpack-plugin)를 사용하여 사용자가 오프라인 상태이거나 네트워크 상태가 좋지 않은 상태에서도 PWA가 제대로 작동하도록 했습니다. 캐시를 제어하는 Workbox API는 Rakuten 24의 이전 사내 스크립트보다 훨씬 잘 작동했습니다. 또한 workbox-webpack-plugin (및 Babel)을 사용하면 다양한 브라우저를 지원하는 프로세스를 자동화할 수 있습니다. 네트워크 복원력을 더 강화하기 위해 CSS 및 JS 애셋에는 캐시 우선 전략을 구현하고 자주 변경되지 않는 이미지에는 stale-when-revalidate를 사용했습니다.

전반적인 비즈니스 실적

설치 가능성을 통해 비즈니스를 개선한 다른 방법

• 브랜드 인지도: 사용자가 홈 화면에서 Rakuten 24에 직접 액세스할 수 있으므로 사용자와 Rakuten 모두 Rakuten 24와 Rakuten-Ichiba를 분리하는 데 도움이 되었습니다.
• 효율성: Rakuten 24는 iOS 및 Android용 플랫폼별 앱을 빌드하는 데 많은 시간과 비용을 들이지 않고도 이러한 성과를 낼 수 있었습니다.

당사의 사명은 혁신과 기업가 정신을 통해 가치를 창출함으로써 사회에 기여하는 것입니다. 이를 달성하기 위한 한 단계는 A2HS를 구현하여 Rakuten 24 고객 환경을 개선하는 것이었습니다. 또한 조만간 Web Push API를 통해 푸시 알림을 개발하여 PWA 참여도와 고객 제안을 개선할 계획입니다.

마사시 와타나베, Rakuten Inc.그룹 마케팅 부서 총괄 책임자

웹으로 확장하기 우수사례 페이지에서 인도 및 아시아의 더 많은 성공사례를 확인하세요.