본 포스팅은 SK플래닛의 생활코딩 플라랩에서 진행하는 스터디의 일환으로 만든 포스팅 입니다. 생활코딩 플라랩은 매주 화요일 점심시간마다 모여서 스터디를 진행하는 SK플래닛(P1 + P3)의 자발적 스터디 모임입니다.

    T스토어 이벤트 페이지에 GA를 달아보자.

    마루타가 필요 했는데, 마침 사업팀에서 아래와 같은 마케팅 계획이 있음을 알려주셨고, 해당 페이지에 스터디 구성원들과 같이 필요한 GA코드를 달아보기로 했습니다.

    티스토어의 1월 이벤트 패키지는 아래와 같습니다~ 많이 참여해주세요.

    구분 16년1월_쿠폰팩+출석체크
    랜딩 페이지 * http://tstore.co.kr/images/event/EVENT_160115111849/preview/main.html
    페이지 내 버튼 1: url_즉시당첨 http://m.onestore.co.kr/mobilepoc/tstore/promptWinEvent.omp?eventNo=PW0000000303
    페이지 내 버튼 2: url_쿠폰함 http://skpla.net/gYZH
    캠페인 소스 * 페이스북, 인스타그램, 트위터, 카울리(인앱배너), 아담(인앱배너), 시럽애드(인앱배너), 허니스크린(잠금화면 배너)
    캠페인 매체 * 배너
    캠페인 키워드 -
    캠페인 콘텐츠 -
    캠페인 이름 * T스토어 쿠폰팩 + 출석체크 프로모션

    이벤트 페이지의 구성을 파악하자.

    이 랜딩 페이지는 7개의 매체에 뿌려질 예정이며, 이벤트 페이지에 들어와 보면 큰 버튼이 2개가 있습니다. 위에 버튼은 누르면 즉시 당첨 페이지(다른 웹사이트)로 이동하고, 나머지 링크는 T스토어 모바일 앱(Android)의 상세페이지(뷰)로 이동하게 됩니다.

    각각 다른 사이트/앱으로 이동하기 때문에 다소 노가다가 필요한데.. 일단은 간단하게 실습할 만한 주제는 아래와 같습니다. (나머지는 심화편에서 할 것)

    1. 7개의 매체에 뿌려질 캠페인 주소만들기
    2. 이벤트 페이지의 각 버튼에 GA 이벤트를 넣기
    3. 다른 웹사이트로 이동하는 경우 1번의 UTM_파라미터를 넘겨주기

    1) 7개의 캠페인 태그 만들기

    가장 먼저 할 일은 캠페인 파라미터를 만드는 것 입니다. 해당 내용은 Google Analytics Academy 의 아래 강의를 참고하시면 더 자세히 알 수 있습니다.

    내부적으로는 이번 기회에 통합 Sheet를 만들어볼까.. 하고 엑셀작업질을 좀 해봤습니다. 예전에 파인트리 (pine-t.com) 강의를 들으러 갔을 때 받은 자료를 나름 저희가 쓰기 좋게 바꿔 놓은 것 입니다. (믓군님 감사!)

    2) 이벤트 페이지에 GA 코드를 달기

    간단한 jQuery 코드로 이벤트를 잡아보겠습니다. js도 상관없지만 제가 쓸줄 잘 몰라서.. jQuery로 하길 했습니다.

    ga('send', 'event', [eventCategory], [eventAction], [eventLabel]);
    

    이벤트를 잡기 위해서는 eventCategory, eventAction, eventLabel
    을 정의해야 합니다. (나머지 이벤트 값 등은 일단은 넘어갑니다.)

    일일이 버튼마다 텍스트로 작성하는 방법도 있지만, 가급적이면 한번 만들어서 영원히 써먹을 수 있도록… 모든 a태그 버튼에서 범용적으로 쓸 수 있도록 아래와 같이 만들기로 합니다.

    • eventCategory = 이벤트 페이지 타이틀
    • eventLabel = 누르는 버튼의 Text
    • eventAction = 이건 그냥 텍스트로 “button click”

    크롬 개발자 도구에서 위 내용이 잘 동작을 하는지를 한번 눌러봅니다.


    [ 대충 상태를 파악한다. ]

    잘 동작하는 것을 확인 했으니 아래와 같이 코드를 만듭니다.

    $('a').click(function(){
        var eventCategory = document.title;
        var eventLabel = $(this).text();
        var eventtargetids = $(this).attr('class');
    
        ga('send', 'event', eventCategory, "buttonClick", eventLabel);
    });
    

    적용을 완료했으면, Google Analytics에서 해당 이벤트가 잘 들어오고 있는지를 확인합니다. 잘 들어오면 성공입니다.

    [물론 상용에서 테스트하는 것은 비추입니다. QA환경이나 console.log를 사용하세요.]

    이제 1번에서 작업한 각 매체별 통계와 함께 이 페이지의 모든 버튼 클릭은 구글 애널리틱스에 쌓이고 있습니다.
    이제 무슨 광고를 보고 들어와서 뭘 눌렀다. 까지는 알 수 있습니다.

    3) 다른 웹사이트/앱으로 이동하는 경우 파라미터를 넘겨주기

    본 이벤트 페이지는 다소 복잡한 구조를 가지고 있습니다. 버튼을 누르면 도메인이 다른 웹사이트와 Android 앱으로 이동을 하게 되는 것 입니다.

    이로 인해서 이 이벤트 페이지에서 다른 페이지/앱으로 이동하는 경우 고객의 동선이 끊기는 문제가 발생합니다. 기껏 페북광고를 했는데, 실제 전환이 발생하는 페이지에서는 이 고객이 어디서 왔는지를 전혀 모르는 것이죠. 레퍼러가 잡히기야 하겠지만 그것만으로는 부족하죠.

    따라서 이를 통합 분석해서 CDJ(Customer decision journey )를 파악해야 하겠지만… 당장 바로 실습하기에는 다소 난이도가 있습니다. (일단 웹 <->앱 연동은 저도 아직 혼란이 많아요..)

    대신, 각각의 분석창에서 손쉽게 분석을 할 수 있도록 본 이벤트 페이지에서 작성한 데이터를 파라미터로 넘겨주는 것은 간단하게 바로 해볼 수 있습니다.

    일단은 url을 파싱하는 라이브러리를 설치합니다.
    저는 js-url을 썼는데, 다른 url파싱 lib을 쓰거나 직접 파싱해도 됩니다. (전 파싱을 잘 못하고 맨날 실수를 해서..)

    <!-- url min -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-url/2.1.0/url.min.js"></script>
    

    설치된 url()가 잘 작동하는지를 확인합니다.

    [url()는 url 뒤에 오는 각종 쿼리나 파라미터를 손쉽게 쓸 수 있게 해줍니다. ]

    잘 작동을 하면 DOM을 불러올 때, 이벤트 페이지의 각 url마다 파라미터를 넘겨줄 수 있도록 뒤에 붙여주는 작업을 합니다. 기존에 파라미터?eventNo=PW0000000303가 있는 경우에는 &로 연결해서 파라미터를 붙여줍니다.

        $('document').ready(function(){
    
            $('a').each(function(i) {
                // a 태그의 url 주소를 받아온다.
                var orignal_url = $(this).attr('href');
                // 파라미터를 빼고 주소랑 패스만 뽑는다.
                var re_url = url('protocol', orignal_url) + "://" + url('hostname', orignal_url) + url('path', orignal_url);
                // 파라미터를 뽑는다.
                var query = url('query', orignal_url);
                // 현재 주소창의 파라마티러르 뽑는다.
                var utm = url('query');
    
                // url 주소가 있으면
                if( url('hostname', orignal_url) !== '' ) {
                    // 원본 url에 파라미터가 있으면 기존에 href 에도 파라미터를 붙여줌
                    if( utm !== undefined ) {
                        if( query !== undefined ) {
                            $(this).attr('href', re_url + "?" + query + "&" + utm );
                        } else {
                            $(this).attr('href', re_url + "?" + utm );
                        }
                    } else {
                        $(this).attr('href', orignal_url );
                    }
                } else {
                    $(this).attr('href', orignal_url);
                };
            });
    });
    

    제대로 작동하는지를 확인합니다.



    이제 다 됐습니다. 본 이벤트 페이지는 접속하는 UTM파라미터를 이후 이동하는 다른 property의 GA 계정으로 전달을 해주기 때문에 각 프로퍼티의 GA에서 나름의 분석을 할 수 있고, 엑셀 작업 등 후처리를 잘하면 전체적인 CDJ를 볼 수 도 있습니다.

    다음 포스팅(실습#2)에서는 이렇게 쌓은 데이터를 가지고 리포팅을 설정하는 방법과 이벤트가 아닌 가상페이지 방식으로 고객 행동을 측정하는 방법을 알아보겠습니다.

    끝.


    Posted by ShellingFord

티스토리 툴바