brunch

You can make anything
by writing

C.S.Lewis

by charian Jul 05. 2016

쇼핑몰 이탈률 잡기 세 번째! - 소셜 로그인 도입

소셜 로그인 도입은 신의 한 수!

본 글은 @junq89 님의 요청에 의해 작성하는 글입니다.

소셜 로그인에 대한 문의를 주셨는데, 마침 제가 사용한 플러그인과 같은 것을 두고 고민하고 계셔서

다른 분들과 함께 정보공유를 하는 차원에서 작성합니다.

아래 본문은 작성 편의상 그간 해왔던 대로 경어체는 생략하고 진행합니다.




소셜 로그인을 도입했다고 지난 포스트에서 언급한 바 있다.

https://brunch.co.kr/@dengine/51


고려하게 된 계기는 너무나도 명료하다.

유입 대비 가입 전환율이 너무 적은 것.

5월 11부터 소셜 연동을 시작했으니 벌써 두 달 가까이 지났다.

물론 그간 여러 마케팅 활동이나 또 다른 광고 캠페인을 통해 유입을 늘린 탓도 있지만, 분명히 말할 수 있는 점은 소셜 연동을 통해 가입자가 적지 않게 늘었다는 사실이다.

게다가 가입자의 60% 수준이 페이스북 연동을 통해 가입했다는 것은 꽤 고무적인 일이다.

자세한 가입 수치를 밝힐 수 없는 점 양해 부탁드립니다.


소셜 로그인 도입은 페이스북 광고를 시작하는 날과 합을 맞추었다.

페이스북을 통해 유입되는 잠재고객을 페이스북 로그인을 빌미로 묶어둘 셈이었다.

결과적으로는 성공이었다.


Ultimate members - Social Login Extension

소셜 로그인은 Ultimate membersSocial Login Extension을 사용하였다.

Extension이기 때문에 Ultimate members가 이미 워드프레스에 설치가 되어 있어야 하고, 이는 워드프레스의 회원관리를 Ultimate members를 통해 한다는 의미이다.


설치 자체는 어렵지 않다.

일단 Extension을 구입을 하고, (아래 사진)

Ultimate members - Social Login Extension 구입완료! 35불!


License Keys를 발급받는다.

extension을 다운로드한 후 일반적인 plugin 설치방법과 같이 설치를 해주고,

Ultimate member - Setting - Licenses 페이지로 접근한다.

아까 발급받은 License Key를 입력해준다. (아래 사진)

라이선스 키 입력


그리고 사용할 방식을 설정하게 된다. (아래 사진)


General에선 Ultimate members 의 어카운트 페이지에서 소셜에 대한 탭을 노출할 것인가에 대한 질의이고, (아래 사진)

히빈드라이 마이페이지 - 소셜 커넥트 탭이 새로 생겨났다


그다음엔 회원가입페이지와 로그인 페이지에 기본 제공하는 폼을 넣을 것이냐에 대한 질의이다.

당연히 나는 회원가입 페이지와 로그인 페이지를 별도로 튜닝해서 사용하고 있으므로 기본값은 제거를 하였고

아래와 같이 [ultimatemember_social_login id=11234] Shortcode를 생성하여 삽입해 주었다. (아래 사진)

모든 폼은 숏코드로 생성하여 관리할 수 있다


Visual Composer로 숏코드 넣는 방법


자, 여기까진 굉장히 쉽다.

위에 설정한 것처럼 내가 생성한 숏코드 폼에는 페이스북과 인스타그램을 사용한다라고 체크가 되어 있다.

그럼 위와 같이 2개의 소셜 버튼이 생성된 채로 노출이 되는데, 여기서 끝나지 않는다.

각각의 소셜마다 앱을 생성하여 개발자 연동을 진행해야만 소셜 연동을 진행할 수 있다.


페이스북과의 연동은 아래의 링크를 참조하면 되고

http://docs.ultimatemember.com/article/20-facebook-app-setup


인스타그램과의 연동은 아래의 링크를 참조하면 된다.

http://docs.ultimatemember.com/article/143-instagram-app-setup


인스타그램은 대단치 않은 경우의 수가 몇 가지가 있어 곤욕을 치렀는데

위 이미지처럼 REDIRECT URI 에 인스타그램을 통한 로그인 처리를 할 수 있는 모든 주소를 적어줘야지만 에러가 안 난다.

즉 회원가입, 로그인, 마이페이지, 마이페이지의 소셜 어카운트 등 모두 등록해줘야 한다는 이야기.

페이스북 수준의 개발자 지원이 아닌 것이 꽤 아쉬운 대목이다.

헌데, 회원가입은 100% 페이스북을 통해 진행하고 있으니 인스타그램은 안 넣어도 무방하지 싶다.


각 소셜에서 app id 나 client id 등을 발급받으면 이제 Ultimate member에 각 정보를 넣을 차례다.

여기까지 하면 소셜로그인의 설정은 모두 끝이 난다.


어렵다면 어렵고 쉽다면 쉬운 수준인데, 개개인이 사용하고 있는 호스팅의 사정이나 혹은 워드프레스의 버전에 따라 안될 가능성은 있을 순 있을것 같다.


굿럭!


소셜로그인이 구현되어있는 웹사이트 구경하기

https://heebeandry.com/register


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari