쇼핑몰 이탈률 잡기 두 번째! - 전환시키기
접속 디바이스별로 다른 정보 표현하기
쇼핑몰에서 구매 전환이 잘 일어나지 않는 이유는 열 손가락으로 꼽기도 어려울 정도로 많다.
제품이 본인 마음에 들지 않는데도 불구하고, 눈에 띄는 광고를 보았기에 접속했거나,
구매하기까지의 UX 가 너무 난잡하여 포기하거나,
혹은 변심했거나, 구매과정 중 오류가 났거나.. 뭐 기타 등등.
기술적인 문제도 있고, 디자인적 문제일 수 있고 기획에서의 문제일 수 있다.
다분히 마음에 들지 않는 제품의 경우 달리 방법은 없다.
제품 가격을 염가로 제공하여 마음을 사로잡는 수밖에.
하지만 기술적인 부분이나 디자인, 기획적인 부분은 개선을 할 수 있다.
오늘 다룰 이야기는 위에 서술한 내용들이 복합적으로 작용한 것을 해결하려 한 내용이다.
신규 방문자가 쇼핑몰에 유입이 되어 물건까지 구매하는 비중은 1~3% 내외 수준으로 유지가 되고 있다.
회원가입은 신규 방문 대비 5~8% 수준으로 유지가 되고 있고.
신규 세션이 적은 웹사이트는 방문자 한 명 한 명을 놓치는 것이 굉장히 뼈아프게 다가온다.
그들을 어떻게 회원으로 유치를 하고, 최종적으로 구매 전환을 일으킬 것인가.
요점은 회원 가입이다.
얼마나 회원가입을 간편하게 제공을 할 것인가.
나는 이 부분을 소셜 연동을 통해 해결하려 하였다.
https://brunch.co.kr/@dengine/51
하지만 간과한 게 있다.
고객은 회원가입 자체를 좋아하지 않는다.
아무리 간단한 절차라 해도 달가워하질 않는다는 소리.
그래서 비회원이어도 구매가 가능하도록 오픈을 해두었다.
대략 구매전환이 1% 정도 상승하였다.
좀 더 나아가 보자.
내 쇼핑몰을 스토어팜에도 오픈했다는 소식을 지난번에 전달했었다.
https://brunch.co.kr/@dengine/53
유입을 늘리고자 오픈한 것이지만, 결과적으로 관리 포인트만 늘어나게 되었다.
지식쇼핑의 생태계를 이해하지 못하고 들어간 것이 화근이었다.
첫 페이지에 노출되지 않는 상품은 구매전환으로 이어지질 못하는 구조가 네이버 지식쇼핑이다.
나는 그런 세계에 유입을 늘리겠다고 들어간 셈이었다.
하지만 스토어팜으로 진출하게 되면 분명 장점은 있다.
대한민국 국민 누구라면 가지고 있을법한 네이버 아이디로 간편하게 구매가 가능하다는 점.
나는 여기에 초점을 맞추었다.
각 상품 페이지에 네이버 아이디로 동일 상품을 구매할 수 있다는 점을 어필하기 시작한 것.
여기서 조금 기술적으로 풀어보자.
내 쇼핑몰의 경우 모바일 접속 비중이 70%가 넘어가고, 결제비중은 50%가 넘어가는 수준이다.
모바일 퍼스트를 외쳐도 부족한 지경이다.
제품마다 네이버에서도 동일 상품을 구매할 수 있다고 어필했다 치자.
사람들은 버튼이나 이미지 등을 클릭하여 네이버 스토어팜의 동일 제품 페이지로 유입되었다고 치자.
고객은 다시 네이버 아이디로 로그인해야 하는 상황이 발생할 수 있다.
모바일 웹 브라우저의 세션이 유지되고 있어 로그인 상태라면 바로 구매가 가능하겠지만 말이다.
가장 좋은 방법은 접속 에이전트를 파악해서 모바일 기기에 설치되어 있는 네이버 앱으로 연결시켜 주는 것이 누이 좋고 매부 좋은 방법이다.
로그인 정보가 고스란히 남아 있을 테니 말이다.
내 쇼핑몰 회원가입은 귀찮지만, 본인의 스마트폰에 설치되어 있는 네이버 앱으로 바로 구매가 가능한 것이다.
분기는 단 3가지면 충분하다.
PC와 애플 그리고 안드로이드.
분기시키는 javascript 를 작성하고 적당한 url을 넣어주면, 해당 기기에서 접속한 사람은 본인의 기기에 설치된 네이버 앱으로 전환이 되어 바로 구매가 가능하게 될 것이다.
https://heebeandry.com/%EC%83%81%ED%92%88/2101
현재는 온가족 든든 단호박 칩으로 테스트를 진행 중에 있으며, 수 일 내로 모든 상품에 적용해볼 예정.
접속 디바이스별 작동 여부는 모두 확인해 보았다.
이제 결과만 확인해보면 끗!
그리고 user agent를 판단하여 분기시키는 기능을 구현하기 위한 소스코드를 공개한다.
아래는 내가 작성한 javascript 전문이고,
<script type="text/javascript">
var tmpUser = navigator.userAgent;
if (tmpUser.indexOf("iPhone") > 0 || tmpUser.indexOf("iPod") > 0) // 아이폰 접속일때
{
console.log("ios");
document.write("<div class='notice_for_storefarm'><img src='https://heebeandry.com/wp-content/uploads/2014/08/naver_ci.jpg' alt='히빈드라이 네이버 스토어팜' /><h2>혹시 알고 계세요??</h2><h3>네이버에서도 온가족 든든 단호박칩을 구매할 수 있다는 사실!</h3><p>기존에 가지고 있는 네이버 아이디로 더욱 빠르고 간편하게 구매할 수 있습니다.</p><div class='notice_for_storefarm_btns'><a href='naversearchapp://inappbrowser?url=storefarm.naver.com/heebeandry/products/418865462&target=new&version=1?na_src=heebean_web&na_media=website&na_campaign=%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90%EC%84%9C%EC%9C%A0%EC%9E%85' target='_blank'>네이버에서 온가족 든든 단호박칩 구매하기</a></div><div class='notice_for_storefarm_remark'>네이버 아이디로 구매하실때는 네이버 회원 정보가 히빈드라이 회원 DB에 남지 않습니다.<br>또한 네이버 이용약관을 적용받기 때문에 구매금액의 10%나 되는 히빈드라이 포인트를 받으실 수 없어요.</div></div>");
}
else if (tmpUser.indexOf("Android ") > 0) // 안드로이드 접속일때
{
console.log("and");
document.write("<div class='notice_for_storefarm'><img src='https://heebeandry.com/wp-content/uploads/2014/08/naver_ci.jpg' alt='히빈드라이 네이버 스토어팜' /><h2>혹시 알고 계세요??</h2><h3>네이버에서도 온가족 든든 단호박칩을 구매할 수 있다는 사실!</h3><p>기존에 가지고 있는 네이버 아이디로 더욱 빠르고 간편하게 구매할 수 있습니다.</p><div class='notice_for_storefarm_btns'><a href='http://naverapp.naver.com/inappbrowser/?url=http%3A%2F%2Fstorefarm.naver.com/heebeandry/products/418865462&target=new&version=1?na_src=heebean_web&na_media=website&na_campaign=%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90%EC%84%9C%EC%9C%A0%EC%9E%85&target=new&version=6' target='_blank'>네이버에서 온가족 든든 단호박칩 구매하기</a></div><div class='notice_for_storefarm_remark'>네이버 아이디로 구매하실때는 네이버 회원 정보가 히빈드라이 회원 DB에 남지 않습니다.<br>또한 네이버 이용약관을 적용받기 때문에 구매금액의 10%나 되는 히빈드라이 포인트를 받으실 수 없어요.</div></div>");
}
else // 컴퓨터 접속일때
{
console.log("pc!");
document.write("<div class='notice_for_storefarm'><img src='https://heebeandry.com/wp-content/uploads/2014/08/naver_ci.jpg' alt='히빈드라이 네이버 스토어팜' /><h2>혹시 알고 계세요??</h2><h3>네이버에서도 온가족 든든 단호박칩을 구매할 수 있다는 사실!</h3><p>기존에 가지고 있는 네이버 아이디로 더욱 빠르고 간편하게 구매할 수 있습니다.</p><div class='notice_for_storefarm_btns'><a href='http://storefarm.naver.com/heebeandry/products/418865462?na_src=heebean_web&na_media=website&na_campaign=%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90%EC%84%9C%EC%9C%A0%EC%9E%85' target='_blank'>네이버에서 온가족 든든 단호박칩 구매하기</a></div><div class='notice_for_storefarm_remark'>네이버 아이디로 구매하실때는 네이버 회원 정보가 히빈드라이 회원 DB에 남지 않습니다.<br>또한 네이버 이용약관을 적용받기 때문에 구매금액의 10%나 되는 히빈드라이 포인트를 받으실 수 없어요.</div></div>");
}
</script>
애플 기기에서 네이버 앱을 호출하는 것은
naversearchapp://inappbrowser?url=storefarm.naver.com/heebeandry/products/418865462&target=new&version=1?
안드로이드 기기에서 네이버 앱을 호출하는 것은
http://naverapp.naver.com/inappbrowser/?url=http%3A%2F%2Fstorefarm.naver.com/heebeandry/products/418865462&target=new&version=1?&target=new&version=6
보라색으로 표시한 주소부분은 전환시킬 스토어팜 url을 입력해주면 된다.
PC와 애플, 안드로이드를 분기시켜주는 Javascript는
<script type="text/javascript">
var tmpUser = navigator.userAgent;
if (tmpUser.indexOf("iPhone") > 0 || tmpUser.indexOf("iPod") > 0)
{
console.log("ios");
여기에 애플 기기에서만 보여줄 소스를!
}
else if (tmpUser.indexOf("Android ") > 0)
{
console.log("and");
여기에 안드로이드 기기에서만 보여줄 소스를!
}
else
{
console.log("pc!");
여기에 PC에서만 보여줄 소스를!
}
</script>
어려워 보여도 어렵지 않다.
디자이너인 내가 할 수 있는 수준.
아참.
이거 적용하고 바로 스토어팜에서 주문 1건 달성!
http://storefarm.naver.com/heebeandry
