[A/B TEST] 카페24 로그인/아웃에 따라서 다른 화면 보여주기

안녕하세요. 하바입니다.

이번시간에는 구글 옵티마이즈 실험을 할때에 자주 사용하는 로그인/아웃에 따라서 다른 화면을 보여주는 방법을 알아보도록 하겠습니다.

개발환경은 가장 많이 사용되는 카페24입니다.

 

실험의 예시는 상세페이지에서 회원가입시 쿠폰을 제공하는 로직입니다.

상세페이지에 진입하면, 회원가입쿠폰을 볼수 있다.

로그인이 되어있는 경우 쿠폰이 보여지지 않는다.(이미 회원가입이 완료되었기 때문에)

 

이 작업을 위해서는 두가지를 완료하면 된답니다.

1. 카페24에 로그인/아웃 조건 만들기

2. 옵티마이즈에서 만든 조건에 맞추어 코딩하기

 

카페24에 로그인/아웃 코드 삽입

 

*참고한 카페24 가이드

sdsupport.cafe24.com/module/layout/statelog.html

스마트디자인 서포트

우선 로그인/아웃을 처리하기 위해서는 카페24의 가이드에 따라서 조건을 만들어 주어야 합니다.

 

가이드에 따르면

 

로그아웃  <div module="Layout_statelogoff"></div>

 

로그인  <div module="Layout_stateLogon"></div>

 

이렇게 확인이 가능합니다.

쇼핑몰 관리자페이지로 진입하시고, 저는 모바일쇼핑몰 실험을 진행할 예정이기 때문에 모바일쇼핑몰 클릭

쇼핑몰 디자인 수정을 눌러보겠습니다.

이렇게 수정을 원하는 화면(페이지)을 띄어놓고 카페24에서 제공하는 코드를 입력합니다.

저는 구분을 위해서 id값을 주었습니다. 추후에 개발자가 코드를 알아볼 수 있도록 저희회사이름도 id값에 포함시켜 주었어요.

 

자 그러면 옵티마이즈로 넘어가 보겠습니다.

우선 실험을 하고자 하는 페이지에 쿠폰을 만들어줍니다.

 

제작된 쿠폰에 자바스크립트를 사용해서 조건을 만들 거예요.

조건은 어떻게 되냐면, 

if(document.getElementById("labbit_login") 만약 로그인이 된다면

래빗쿠폰.style.display = "none"; 래빗쿠폰이라는 아이디를 갖은 친구를 보여주지마요.

else 그게 아니라면,

래빗쿠폰.style.display = "block"; 래빗쿠폰이라는 아이디를 갖는 친구를 보여주세요.

입니다.

 

웹사이트 최적화를 진행할때,

타겟팅의 맥락으로 바라보자면, 신규 고객과 기존 고객에 따라 다른 방법으로 혜택을 제공하는 것을 추천드립니다.

실제로 이런 실험들이 회원가입 전환율을 높여주고 전자상거래 전환율까지 높이기도 한답니다.

 

유용하게 사용하시면 좋겠습니다. ^^