momentJS를 angularJS 필터에서 사용하기

Problem

스크린샷 2016-01-25 오후 6.55.20

angularJS로 ERP를 만드는 중이다.
ng-repeat로 반복되는 칼럼에 타임스탬프가 안 예쁘게 찍혀서 moment.js로 가독성을 높이려 한다.

javascript에서 가로채서 솰라솰라 하는거 말고 angular로 예쁘게 하는 방법은 없을까?

 

Solution

angularjs filter를 사용한다.

sandiApp.filter('moment', function() {
    return function(dateString, format) {
        return dateString? moment(dateString).format(format): null;
    };
});

이 jsfiddle을 참고하고, 값을 입력 안하면 null이 반환되게 살짝 추가해두었다.

<td>{{ invoice.ordered_time | moment:'YYYY년 MMMM Do dddd a h:mm' }}</td>

원하는 출력 형태를 써주면 filter에서 moment(원래적히던값).format(적어준포맷)으로 모멘트를 통과해서 뿌려준다.

Outcome

스크린샷 2016-01-25 오후 7.03.20

예뻐짐.

Advertisements

django, bower, grunt로 사이트 구조잡기

상황

재고/창고관리 웹페이지를 만들려고 한다.
전체적으로 djangodocker로 돌아가고, 화면은 6개 정도 되는 크지 않은 admin페이지다.
나는 프론트엔드 담당이다.

생각하기

앞단을 짜는 것엔 두 가지 방법이 있다.
1. django템플릿을 써서 서버사이드 렌더링을 한다.
2. api를 받아와서 ajax로 만든다.

관리자 페이지니 봇이 긁어가야 할 필요도 없고, 이미 api들이 만들어지고 있는 상태라 2번을 사용하기로 했다. 기간이 2주뿐이라 조금이나마 익숙한 ang`ular를 쓰기로 했다(리액트 써보고 싶다 힝).

구조 잡기

현재 디렉토리 구조는

- api
    + migrations
    + serializers
    + test
    + views
    + (등등 django REST Framework기반의 api서버이다.)
- conf
    + development
    + production
    + testing
- etc
    + (docker들어가있음)
- stock
    + (django 메인 앱)
    + __init__.py
    + settings.py
    + urls.py
    + wsgi.py
- web
    + (여기다 웹 프론트를 짜면 된다)
- manage.py 등 장고 관련 파일들

로 되어있다. 나는 web에다 프론트를 짜면 된다.
angularjsone page web을 만들 예정이라 루트(/)로 접속했을 때 web/base.html로 연결되도록 stock/urls.py에 명시해주어야 했다.

static file 사용하기

urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r'^$',
        TemplateView.as_view(template_name='base.html'),
        name='main'),
    url(r'^api/', include('api.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

base.html을 템플릿뷰로 연결해주었다. 하지만 그냥 url만 적어주면 web폴더 내의 base.html은 템플릿파일로 인식을 못하기에 뒤에 static을 연결해준다.

settings.py

TEMPLATES = [
    {
        ...
        'DIRS': [
            'web'
        ],
        ...
    },
]

...

STATICFILES_DIRS = [
    ("web", os.path.join(BASE_DIR, "web")),
]

settings.py TEMPLATES내부의 DIRS에 폴더명을 적어준다.
그리고 밑의 STATICFILES_DIRSweb이란 이름으로 BASE_DIRweb폴더를 연결해둔 패스를 지정해준다. 그 후로부턴 저 BASE_DIR/web폴더 내부 staticfile을 사용할 때 앞에 ‘web’이란 이름을 적어주면 된다.

web/base.html

{% load staticfiles %}

base.html위에 staticfiles를 로드해주고

<link rel="stylesheet" href="{% static 'web/dist/css/base.css' %}">

불러올 땐, 폴더를 아까 정해준 이름(web)으로 호출하면 된다.

의존성 관리 – Bower

의존성 관리 툴은 bower와 npm을 사용하였다.
최상위 폴더에 bower 설정파일을 만들어준다.

bower.json

{
"name": "sandi",
"dependencies": {
"admin-lte": "latest",
"fastclick": "latest"
}
}

이름과 dependencies만 적어주었다.
admin-lte라는 admin사이트 만드는 곳에 특화된 부트스트랩 템플릿과, 모바일에서 touch evnet를 도와주는 fastclick을 설치하였다.
콘솔에서 bower install하면 이들이 bower_componenets폴더 내에 설치된다.
이도 staticfile로 접근해야하니, settings.py에 한번 더 명시해준다.

settings.py

STATICFILES_DIRS = [
    ("components", os.path.join(BASE_DIR, "bower_components")),
    ("web", os.path.join(BASE_DIR, "web")),
]

components란 이름으로 연결해주었다.

<link rel="stylesheet" href="{% static 'components/admin-lte/bootstrap/css/bootstrap.min.css' %}">

이는 아까와 같이 사용할 수 있다(web대신 componenets라고 명시)

프론트엔드 태스크 자동화 – grunt

태스크 자동화는 grunt로 하였다. 저번 프로젝트는 gulp로 했었는데, admin-lte가 준 grunt파일이 좋아보여 얘로 결정!

web/package.json

{
"name": "sandi",
"version": "0.1.0",
"repository": {
"type": "git",
"url": `https://github.com/haha`
},
"devDependencies": {
"R2": "^1.4.3",
"grunt": "~0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-csslint": "^0.5.0",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-less": "^0.12.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-cssjanus": "^0.2.4",
"grunt-image": "^1.0.5",
}
}

npm 설정파일을 만들어 필요한 grunt파일들을 넣어준다.

web/Gruntfile.js

module.exports = function (grunt) {

  'use strict';

  grunt.initConfig({
    watch: {
      files: ["static/less/*.less", "build/less/skins/*.less", "static/js/app.js"],
      tasks: ["less", "uglify"]
    },
    /* LESS Compile */
    less: {
      development: {
        options: {
          compress: false
        },
        files: {
          "dist/css/base.css": "static/less/base.less",
        }
      },
      production: {
        options: {
          compress: true
        },
        files: {
          "dist/css/base.css": "static/less/base.less",
        }
      }
    },
    /* Javascript Uglify */
    uglify: {
      options: {
        mangle: true,
        preserveComments: 'some'
      },
      my_target: {
        files: {
          'dist/js/app.js': ['static/js/app.js']
        }
      }
    },
    /* Image Compression */
    image: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'static/img/',
          src: ['**/*.{png,jpg,gif,svg,jpeg}'],
          dest: 'dist/img/'
        }]
      }
    },

    // Validate JS code
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      core: {
        src: 'static/js/app.js'
      }
    },

    csslint: {
      options: {
        csslintrc: 'static/less/.csslintrc'
      },
      dist: [
        'dist/css/base.css',
      ]
    },

    /* Compression 전 이미지 삭제 */
    clean: {
      build: ["static/img/*"]
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-image');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-csslint');

  grunt.registerTask('default', ['watch']);
};

web/static폴더에 less, js, img를 넣고,
grunt를 돌리면 web/dist폴더 minify되고 컴파일되고 compression된 css, js, img가 들어가도록 해두었다.(+ validation)

gitignore

dist

### Frontend ###
node_modules
bower_components

distribution에서 사용하는 dist폴더와,
npm으로 설치한 node_modulesbower로 설치한 bower_components는 git에서 제외시켜뒀다.
이로서 깨끗한 깃헙이 되었다!!! >.<

돌리자!

다른 개발자들을 위해 README.md에 써준다.

bower install
cd web
npm install
grunt

[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

banner-772x250-11

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager


 

Intro

드디어 전자상거래까지 왔네요. 전자상거래 과정은 약간 난이도가 있습니다 (가장 길게 삽질을 했던 부분입니다).
하지만 적용하고 나면 어뫄어뫄한 데이터를 볼 수 있습니다. 함께 적용해보아요!


 

전자상거래

스크린샷 2016-01-14 오후 8.45.31
사용자가 우리 쇼핑몰에 들어와서 하는 구매 과정을 간단히 4가지로 나누어 보겠습니다.

  1. 제품 리스트 보기
  2. 상품 상세 보기
  3. 장바구니 담기
  4. 결제 스텝

우린 이들을 추적하라고 Google Analytics, 그리고  Google Tag Manager에게 알려주어야 합니다. 이는 몇 가지 작업이 필요합니다. 구글에게 우리가 어떻게 알려주면 될까요?

  1. 안녕 구글? 지금 ‘상품 상세 보기‘에 들어왔어.
  2. 상품 고유 ID는 33이고
  3. 가격은 7,800원이고
  4. 카테고리는 사운드북이야.

혹은, 주문하는 페이지에서도 알려줄 수 있겠죠?

  1. 안녕 구글? 지금 ‘주문 완료‘ 페이지에 들어왔어.
  2. 주문번호는 99번이고
  3. 물건은 자동차 사운드북(ID: 33, 이름:자동차 사운드북, 가격:7800, 카테고리:사운드북)이랑
  4. 핑크퐁 대형 인형(ID: 50, 이름:핑크퐁 대형 인형, 가격:20000, 카테고리:인형)을 샀어.
  5. 총 가격은 27,800원이고
  6. 배송비는 없대!

이런 식으로 말이죠. 자, 이젠 이걸 코드에 적어주면 됩니다!


 

Enhanced Ecommerce with Google Tag Manager

우리는 태그매니저를 사용해 Enhanced Ecommerce를 추적할것입니다.
(만약 그냥 Ecommerce만 추적하고싶으신 분은 mine the log의 튜토리얼을 보시면 상세하게 나와있습니다^^. 구매/환불한 데이터를 추적하실 수 있습니다.)

Google_Analytics
Google Analytics 홈페이지로 들어가서 관리>전자상거래 설정 에 들어가서
향상된 전자상거래 설정‘을 ON 해줍니다.
(아래의 Checkout 라벨 설정은 다음에 다시 설명하겠습니다)

Google_Analytics

설정 페이지 들어온 김에 ‘설정 보기’에서 표시 통화를 원하는 통화로 고쳐줍니다.


 

상품 상세 보기 추적

스크린샷 2016-01-14 오후 9.09.00

먼저 ‘상품 상세 보기‘를 추적해 볼까요?
어떤 코드를 넣어야 할지 보기 위해 공식 사이트에 들어가봅니다.

Enhanced_Ecommerce__UA__Developer_Guide_ _ _Google_Tag_Manager_for_Web_Tracking_ _ _Google_Developers
Measuring Views of Product Details‘이것이겠군요!
처음 보면 “그래서 이걸로 어쩌라고“란 말이 나오는 불친절한 설명입니다. 하지만 필요한 정보는 다 있다는거~
일단 저 스크립트를 우리 사이트 디테일뷰 소스코드에 넣어주어야 합니다.
그런데 중요한 건, 이 dataLayer는 Google Tag Manager 스니펫보다 먼저 불려져야 GTM이 데이터레이어를 읽을 수 있게 됩니다. 그리고 dataLayer가 불리기 전에,

dataLayer = [];

처럼 데이터레이어 초기화를 한 번 해 주세요.
말로만 하면 헷갈리니까 북스토어에 적용한 예시를 볼까요?

dataLayer.push({
'ecommerce': {
'detail': {
'products': [{
'name': '{{ product.name }}',
'id': '{{ product.id }}',
'price': '{{ product.sales_price }}',
'category': '{{ product.get_categories_ga }}'
}] } } });

북스토어는 django를 쓰고 있어 django Template Tag로 제품 이름, id, 가격, 카테고리를 넣어주었습니다.
넣을 데이터는 공식 사이트를 참고해 필요한 것들만 넣어주시면 됩니다(name이나 id중 하나는 필수입니다).

사이트 코드에서 필요한 정보를 데이터레이어로 쏘아줬다면, 이제 Google Tag Manager에서 그 쏜 정보를 받아서 이름을 지어줘야겠죠?
공식 사이트 설명 하단의 ‘See the Tag Configuration…’이 바로 그 정보입니다. 그대로만 작성해주면 GTM이 “아! 얘가 디테일뷰에 들어왔다 말하고 있구나”라고 캐치할 수 있게 됩니다.

Google_Tag_Manager
태그매니저로 가서 새로운 태그를 만듭니다.
여기서 공식사이트에서 알려준 정보를 그대로 넣어주면 됩니다.
공식 사이트 하단에 있는 ‘Firing Rule‘은 이 정보대로 트리거를 만들면 된다는 것입니다.

Google_Tag_Manager
그 정보대로 트리거를 만들어줍니다.
Page Path가 디테일뷰일때 gtm.dom이벤트가 일어나는 것을 캐치해준다는 것입니다.
‘matches RegEx’는 정규표현식이 일치하는 것을 지정해준 것인데,
디테일뷰의 Page Path는 /16/처럼 상품번호만 있으니 정규표현식으로
” /로 시작하고 숫자가 들어가고 /로 끝나는 걸 찾아줘”라는 표현식을 만들어 적어주었습니다.
정규표현식을 공부하려면 http://www.regexr.com/ 이 사이트가 좋습니다.

참고로 사이트에 들어와서 자동으로 발발되는 GTM 이벤트를 설명하고 넘어가겠습니다.
순서는 …gtm.js… &gt; …gtm.dom… &gt; …gtm.load으로 실행되고,
처음에 gtm.js가 불리고, 돔이 만들어지면 gtm.dom이 불리고, 모든 요소가 불리면 gtm.load가 불리워집니다. 이 타이밍을 제대로 맞춰야 google tag manager에서 원하는 이벤트를 부를 수 있습니다.
난 잘 넣었는데 왜 안먹지?란 의문이 들 때 GTM Preview를 사용하여 내가 원하는 데이터가 원하는 시점에 잘 박혀 있나 찾아보며 디버깅 해보면 좋습니다.

자동차_동요
GTM Preview로 잘 들어갔는지 확인해봅니다. Summary 말고 원하는 시점(DOM Ready)에 태그가 잘 들어갔나 확인하는 버릇을 가지는 것이 좋습니다(안그러다가 피본 1인)

자동차_동요
DOM Ready‘의 Data Layer를 보면, 내가 원한 detail정보가 gtm.dom시점에 잘 들어간 것을 확인할 수 있습니다. 만세~~ 잘하셨습니다!
(밑의 Impression데이터는, 핑크퐁 북스토어 디테일 페이지엔 ‘추천 상품’도 같이 뜨기 때문에, 그것도 잡아준 것입니다)

스크린샷 2016-01-14 오후 9.44.59
이는 Google Analytics의 ‘전환>전자상거래>제품 실적 – 쇼핑 행동‘에서 확인할 수 있습니다.

스크린샷 2016-01-14 오후 9.48.00
이렇게 적용시 제품별로 Ecommerce 데이터를 확인할 수 있습니다.
다른 활동들을 추가하려면 동일하게 공식 사이트를 참고하여 코드를 삽입하면 되겠죠? ^^


 

결제하려다 포기하지 말아줘

스크린샷 2016-01-14 오후 9.50.10
비슷한 방식으로 ‘Checkout Steps’를 추가하면, 이용자가 결제의 어느 스텝에서 그냥 나가버렸는지도 측정할 수 있습니다. 위와 같은 그래프로 확인할 수 있습니다.
특정 스텝에서 이탈률이 높거나 한다면, 그 단계가 어렵거나 하다는 문제가 있을 수 있다는 것을 예측할 수 있겠죠.


Outro

이것으로 고난이도였던 Google Tag Manager로 Enhanced Ecommerce 적용하기 튜토리얼이 끝났습니다. 처음에는 디버깅 하기가 쉽지 않을테니, 하다 막히면 댓글로 주저없이 문의 주시면 성심성의껏 답해드리겠습니다. 그럼 즐 Google Analytics 하시기 바랍니다!

[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager

maxresdefault
[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

페이지의 인터랙션

스크린샷 2016-01-14 오후 5.40.54

한 페이지에서 일어나는 인터랙션은 여러 가지가 있습니다.

스크린샷 2016-01-14 오후 5.42.13

Google Analytics는 이 모든 과정을 지켜보고 있습니다.
우리는 측정하고 싶은 인터랙션을 캐치해서 ‘이름을 지어줘야‘합니다.

1

비슷한 것 같은 느낌적 느낌

 


 

상단 메뉴별 클릭수를 비교하고 싶어!

핑크퐁_북스토어
핑크퐁 북스토어 상단 GNB엔 카테고리별 메뉴가 있습니다. 이들의 클릭 수를 비교하고 싶어요.
Google Analytics로 이를 측정하려면 어떻게 해야할까요?

  1. 메인 페이지다
  2. 클릭한 것이 ‘메뉴’이어야 한다
  3. 그 이벤트를 통칭해서 ‘menu’라 한다
  4. 전체 / 전집 / 유아책 / 토이 별로 각각 측정되었으면 좋겠다

정도의 flow를 생각하면 되겠죠?


 

이벤트

이렇게 페이지뷰나, 클릭, 폼 전송 등이 일어나면 이를 캐치해서 이름(범주)을 지어주는 행위가 구글 애널리틱스의 ‘Event Tracking‘입니다.

북스토어 카테고리 메뉴 코드는 간략히 아래와 같이 생겼습니다.

<ul class="category-large">
    <li class="category-item"><a href="/category/">전체</a></li>
    <li class="category-item"><a href="/category/series">전집</a></li>
    <li class="category-item"><a href="/category/books">유아책</a></li>
</ul>

공식 문서를 참고해 class가 category-item인것을 눌렀을 때 이벤트를 전송하는 코드를 넣어줍니다.

$('ul.category-large').on('click', 'li.category-item', function() {
var name = $(this).find('a').text();
ga('send', {
hitType: 'event', //이벤트라고 명시
eventCategory: 'home', //메인 화면에서 일어나는
eventAction: 'menu', //메뉴
eventLabel: name //카테고리명
});
});

이 코드를 간단히 풀어보자면,

  1. 클래스가 category-item인것을 누르면
  2. GA에 ‘event’를 보내는데
  3. 그것의 카테고리(대분류)는 home이고 (홈 화면에서 일어나니까 내 맘대로 명명)
  4. 액션(중분류)는 ‘menu’이고 (메뉴니까)
  5. 라벨(소분류/설명)은 그 클릭한 카테고리 명을 넣어준다

이렇게 볼 수 있습니다.

 


 

Google Tag Manager

하지만 위처럼 구글 애널리틱스 코드로만 삽입하는 방식의 단점은

  1. 사이트 코드에 GA코드가 섞인다
  2. 배포까지 해야 적용된다
  3. 실시간으로 잘 적용되는지 확인/디버깅이 어렵다

가 있습니다. 이는 ‘Google Tag Manager‘(a.k.a GTM)라는 서비스로 해결할 수 있습니다.


 

Google Tag Manager를 설치하자

태그매니저 사이트에 들어가서 구글 계정으로 가입합니다 (#1에서 말했던 것처럼, 회사에서 쓸 용도면 회사 공식 계정으로 가입하시기 바랍니다).

설치방법은 역시 공식 사이트에서 보시는 것이 정확합니다.

그리고 Google Analytics를 설치했던 것처럼, 스니펫을 사이트 소스코드에 넣어줍니다(여는 <body>태그 바로 뒤에 넣어줍니다).
이 스니펫은 Admin > Install Google Tag Manager에서 다시 확인할 수 있습니다.
Google_Tag_Manager_및_base_html_-_pinkfong-store-yoolmoo_-____Documents_Programming_pinkfong-store-yoolmoo_

 


GTM – 변수

Google Tag Manager에선 ‘변수‘개념을 사용할 수 있습니다.  반복해서 쓸 것은 변수로 지정해두는 것이 좋겠죠?
그럼 먼저 Google Analytics의 Tracking ID를 변수로 지정해 보겠습니다.

Google_Tag_Manager
GTM 좌측 탭 메뉴에서 ‘Variables‘를 들어갑니다. 첫 접속이라면 아마 ‘Enabled Built-in Variables’가 모두 체크 해제 되어있을텐데, 무엇을 쓸지 감이 아직 안잡히신다면 모두 클릭해두는것도 좋습니다.
이곳에는 GTM에서 유용하게 쓰이는 변수들이 미리 만들어져 있습니다. 클릭한 요소의 Text를 가져온다거나, 현재 페이지의 URL처럼요.
우리는 새로운 변수를 만들기 위해 하단 ‘User-Defined Variables‘에서 ‘New’버튼을 클릭해줍니다.

Google_Tag_Manager

‘trackingID’란 이름을 써주고, 타입은 ‘Constant’, Value는 ‘UA-XXXX’처럼 생긴 구글 애널리틱스 트래킹 아이디를 넣어줍니다. 이 아이디 공유를 통해 GTM과 GA가 이어질 수 있습니다.

 


GTM – 트리거

이제 본격적으로 태그를 만들어보겠습니다.

Google_Tag_Manager좌측 상단의 ‘Publish’옆의 화살표를 눌러 ‘Preview and Debug‘를 눌러줍니다.

핑크퐁_북스토어
GTM을 설치한 사이트에 와서 refresh를 해주면 하단에 신기한 창이 뜰 것입니다. 이것이 Google Tag Manager의 Preview모드입니다. 여기서 지금 무슨 태그가 불렸는지, 이 이벤트의 변수는 무얼 갖고 있는지 등을 Interactive하게 확인할 수 있습니다.
(만약 이 창이 뜨지 않는 분은, Preview를 누르기 전에 Publish부터 한 번 해주시면 잘 뜰 것입니다)

핑크퐁_북스토어
우리가 측정하고 싶은 이벤트를 한 번 실행해 봅니다.
창이 이동해버리는 것을 방지하기 위해 command를 누르며 메뉴의 ‘전체’를 한 번 눌러봅니다.
그럼 ‘gtm.click’이라는 이벤트가 새로 생기면서, ‘Tags Fired On This Event‘라는 창이 뜹니다. 저는 클릭이 일어날때마다 측정하는 태그를 달아놔서 하나가 이미 있고, 처음 하시는 분은 아무 태그도 없을 것입니다.

핑크퐁_북스토어

그 이벤트의 ‘Variables’를 봅니다. 그럼 방금 내가 한 행동에서 따라오는 변수들이 보입니다.
Click Classes는 ‘all’이고, Click Text는 ‘전체’네요. 우리는 클릭했을 때 그것의 상위 li엘리먼트에 ‘category-item’이란 클래스가 있는 것을 캐치하고 싶은데 기본으로 제공되는 변수에는 식별이 불가능하네요(ㅠㅠ). 기본 변수에 없다면 내가 만들면 되죠!

Google_Tag_Manager
아까와 같이, ‘Variables’로 가서 새 변수를 만들어줍니다. Type은 ‘Custom Javascript’, 그리고 Value에는 function() {}으로 감싼 코드를 적습니다.
저는 클릭한 요소의 상위 li 엘리먼트가 ‘category-item’이란 클래스를 가지고 있는지를 boolean값으로 return하는 함수를 만들었습니다.
(TIP: 제이쿼리를 쓰려면 $대신 jQuery라고 써주면 됩니다)

핑크퐁_북스토어_및_base_html_-_pinkfong-store-yoolmoo_-____Documents_Programming_pinkfong-store-yoolmoo_
다시 사이트로 돌아가 메뉴 중 ‘전체’를 눌러봅니다. Variables탭을 보니 ‘isMenu’가 true로 잘 들어갔군요. 그럼 잘 확인되었으니 이걸로 태그를 만들면 되겠군요!

Google_Tag_ManagerGTM으로 가서 Triggers탭에서 새로운 트리거를 만들어 줍니다.
트리거란, 영어 뜻 그대로 ‘방아쇠’같은 것입니다.
위의 사진처럼, Event는 Click, isMenu는 true, Page Path는 /인 트리거를 만들면
“어머어머~~ 방금 메인 페이지에서 isMenu인것을 클릭했나봐~~ 트리거 발동!”
이라며 트리거가 발동됩니다. (…)

Google_Tag_Manager
그리고 그 트리거를 빵 맞을 태그를 만들어줍니다.
태그를 만들 때 드디어 아까 만든 Tracking ID변수를 심어줍니다. 미리 변수를 저장해두지 않았다면 태그를 만들때마다 매번 입력했어야 하겠죠?
그리고 타입을 Event로 해주고, 아까 코드로 삽입했던 것처럼 ‘Category’, ‘Action’, ‘Label’을 지정해줍니다. 라벨은 ‘Click Text’변수를 지정해주었습니다.
‘Fire On’에선 발동될 트리거를 선택할 수 있습니다. 아까 만든 트리거를 지정합니다.

핑크퐁_북스토어
다시 사이트로 가서 ‘전체’메뉴를 눌러볼까요?
그럼 만들어준 태그가 잘 발동되는 것을 볼 수 있습니다. 카테고리, 액션, 라벨도 잘 들어갔군요!
성공했습니다!! 짝짝짝
잘 돌아가는지 확인했다면 GTM 사이트 우측 상단의 ‘Publish‘를 눌러서 올려줍니다. 그럼 완전히 사이트에 반영이 됩니다.

스크린샷 2016-01-14 오후 8.28.03

이 이벤트는 GA의 방문형태>이벤트>인기 이벤트 에서 확인하실 수 있습니다. (잡히는데 약간 시간이 걸립니다)
Google Analytics 이벤트는

  1. 페이지에서 제일 많이 클릭되는 버튼
  2. 상품 상세 페이지에 들어온 사람 중 공유를 하는 사람의 비율
  3. 메뉴별 클릭 순위
  4. 트위터 공유를, 혹은 페이스북 공유 버튼을 더 많이 누르는지

등에서 폭넓게 쓸 수 있습니다.


 

Outro

고생하셨습니다! 이걸로 우리는 Google Analytics부터 Tag Manager까지 사용할 수 있게 되었습니다.
다음 글에선 대망의 Ecommerce를 적용해보겠습니다.
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

 

 

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지

google-analytics

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

Why Google Analytics?

이번에 오픈한 우리 쇼핑몰엔 어떤 사람들이 많이 들어올까요. 남자가 많을까요, 여자가 많을까요?
예상외로 30대가 많이 들어온다면 마케팅의 방향이 달라지지 않을까요.
또 사이트에 들어와 가장 먼저 누르는 곳은 어디일까요, 3페이지에 위치해 있는데 메인에 노출되어 있는 상품보다 잘 팔린다면 그 제품을 어떻게 해야할까요?

이를 위하여 고객의 행동 패턴전자상거래 기록을 수집하는 툴 중 하나가 ‘Google Analytics‘입니다. 사이트 소스코드에 간단히 설치해두면, 구글 애널리틱스 홈페이지에 들어가 구글이 사용자 행태를 분석해 모아둔 데이터를 볼 수 있습니다.


 

삽질냠냠

그런데 간단한 설치로 끝난다는데, 왜 이 글의 제목에 ‘삽질냠냠’이 들어갔을까요? 이는 구글 애널리틱스(a.k.a GA)를 더 뼛속까지 꼭꼭 씹어 이용하려면, 몇 가지 작업이 더 필요하기 때문입니다. 특히 Enhanced EcommerceGoogle Tag Manager는 나온지 오래되지 않은지라 한글 자료는 물론 영어로 된 자료도 많지 않습니다.  전 보통 GA 공식문서와, 거기서도 명시되지 않은 오류들을 디버깅할땐 Simo Ahava님의 블로그를 많이 참고했습니다(감사합니다). 그리고 하용호 님의 ‘오늘 밤부터 쓰는 Google Analytics‘강의와 자료로 GA에 대한 개념을 잡았습니다. 입문자 님들은 슬라이드를 꼭 한번씩 보시길 추천드립니다.


 

그래서 이 튜토리얼에서는

제가 Google Analytics, Google Tag Manager, 그리고 Enhanced Ecommerce를 적용하며 걸은 삽질의 길을 다듬어 적을 예정입니다. 데이터 분석 이전에, 당장 사이트에 GA부터 적용해야 하는 개발자의 입장으로 말이죠.

튜토리얼은 핑크퐁 북스토어에 GA를 적용한 사례를 가지고 진행됩니다(이것이 네이티브 애드). 굳이 난이도를 적어보자면,
1. Google Analytics 설치:
2. Google Tag Manager:
3. Ecommerce 설치: 중상
4. Enhanced Ecommerce 적용:
정도로 될 것 같습니다. 이는 제가 삽질하며 체감한 난이도와 들인 시간을 토대로 작성한 것입니다.


 

Google Analytics란 무엇인가

스크린샷 2016-01-14 오후 2.19.42

GA는 ‘문지기‘입니다. store.pinkfong.com 사이트 코드에 GA 코드 조각을 모두 붙여두면 접속한 사람들이 하는 행태를 모두 기록GA 서버에 보냅니다.

 

스크린샷 2016-01-14 오후 2.20.51

뿐만 아니라 접속한 사람들의 나이, 성별, 그리고 이 페이지에서 평균 몇 분 머물렀는지도 알 수 있습니다.

또한 여러 가지 조합을 통하여

  1. 모바일 접속자인가 데스크톱 접속자인가?
  2. 신규 방문자인가 재방문자인가?
  3. 이번 달 무슨 상품이 가장 많이 팔렸는가?
  4. 카테고리 목록에서 가장 많이 클릭되는 버튼은?
  5. 페이스북에 올린 링크 중 무엇이 가장 도달률이 높은가?
  6. 몇시에 가장 활발히 접속하는가?
  7. 무슨 광고배너가 가장 인기가 많지?
  8. 구매자는 어떤 결제 스텝에서 가장 이탈률이 높은가?

등의 무궁무진한 통계들을 알 수 있습니다.


 

설치하기

그럼 긴 말 없이 설치를 해보겠습니다. 설치는 공식 문서를 보고 하시는 것이 가장 정확합니다.

1. 구글 애널리틱스에 가입합니다
https://analytics.google.com/
(TIP: 회사에서 쓸 용도라면 회사 개인 메일계정 말고, ‘smartstudy@smartstudy.com’처럼 회사 공식 계정으로 가입하시기 바랍니다. 소유권 이전이 되지 않는다는 설이 있기 때문입니다.)

2. 가입하고 새 컨테이너를 만듭니다.
설치하면 바로 ‘추적 코드’가 나오는데, 이는 관리 > 추적 정보 > 추적 코드에서도 다시 볼 수 있습니다.
이 코드를 사이트 소스코드 </head>바로 위에 붙여넣으시면 됩니다. 추적하고 싶은 모든 페이지에 첨부되어 있어야 합니다.
(django를 사용하고 있는 핑크퐁 북스토어는 base.html에 넣었습니다.)
Google_Analytics

3. 설치 완료
Google Analytics 설치가 완료되었습니다! 설치 후 길면 3일 이후부터 google analytics 홈페이지에서 통계를 확인할 수 있습니다.


 

메뉴 소개

적용이 완료되면, 그 때부터 통계가 잡히기 시작합니다. 간단히 좌측 탭 메뉴들을 하나씩 소개해보겠습니다. 이는 하용호님의 슬라이드를 참고하였습니다.

지능형 이벤트

사이트에 특이한 변화가 생겼다 하면,  GA가 자동으로 이 곳에 로그를 쌓아줍니다.
(1월 10일에 세션 시간이 168% 증가한 것을 찾아주었네요)
스크린샷 2016-01-14 오후 4.04.37

실시간

당장 지금 일어나는 일을 보여줍니다.
현재 접속한 사용자 수, 인기 페이지 혹은 어디를 보고 많이 접속해 왔는지가 뜹니다.
스크린샷 2016-01-14 오후 4.04.44

잠재고객

북스토어 유저들의 특징.
재방문자와 신규유저의 비율은? 나이는? 성별은? 평균 머무는 시간은?
(재방문자 58%, 신규유져 42%네요)
스크린샷 2016-01-14 오후 4.04.52

획득

북스토어에 무엇을 통해 들어왔는지.
어떤 링크를 타고 왔고, 어떤 광고를 눌러 왔고, 그렇게 온 사람들이 돈은 얼마나 쓰는지?
스크린샷 2016-01-14 오후 4.04.59

방문 형태

그렇게 유져들이 들어왔으면, 들어와서 무엇을 하는지 보여줍니다.
(e.g. 메인화면에서 어느 버튼을 가장 많이 누르는지)
스크린샷 2016-01-14 오후 4.05.06

전환

제일 중요한 ‘전자상거래’가 들어가있는 전환 탭.
목표 설정과, 쇼핑 행동과 수익 등을 볼 수 있습니다.
스크린샷 2016-01-14 오후 4.05.13


 

GA에 들어와서 가장 먼저 할 일

기간 설정

일단, 기간을 설정합니다.
‘최근 7일’이나 ‘지난 30일’과 같은 옵션을 줄 수도 있습니다.스크린샷 2016-01-14 오후 4.18.12

세그먼트 설정

다음으론 ‘+세그먼트’ 버튼을 눌러 세그먼트를 설정해줍니다.
세그먼트는 ‘필터’같은 것으로,
모바일 / 크롬사용자 / 남자 / Facebook으로 온 사람들
이런 식으로 분류할 수 있게 해줍니다.
(작업에 필요 없다면 안 해줘도 되지만 데스크톱/모바일은 나눠서 보는게 보통 도움됩니다.)

스크린샷 2016-01-14 오후 4.16.14

그러면 이렇게 많은 옵션들이 뜨는데, 필요한 것들을 선택하고 ‘적용’을 누르면 됩니다.

스크린샷 2016-01-14 오후 4.16.25

그럼 이렇게 그래프가 색별로 나뉘어 보여집니다.
나누어 뜯어 보면 전체를 볼 때와 다른 진실을 발견할 수 있습니다.
(오른쪽 그래프를 보면 전체 세션에선 재방문자>새 방문자 인데 데스크톱으로 방문한 사람만 보면 새 방문자가 현저히 많은 것을 알 수 있습니다!)

스크린샷 2016-01-14 오후 4.16.31


 

 Outro

이것으로 구글 애널리틱스에 대한 간단한 소개와, 설치, 그리고 간단한 메뉴 이용법을 적어보았습니다.
다음 글에선 Google Tag Manager 설치 및 사용법을 소개하겠습니다.
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager

Javascript switch문에서 정규표현식 사용하기(feat. google tag manager)

스크린샷 2016-01-11 오후 5.23.49

Problem

Google Tag Manager에서 event를 만드는데 카테고리를 현재 있는 페이지 이름으로 넣고 싶다.
하지만 그냥 page path를 가져오면 가독성이 좋지 않아 한글화를 하고 싶다.
커스텀 자바스크립트 변수로 switch로 분기태워서 나누면 될 것 같은데,
https://store.pinkfong.com/user/order/2521/에서 2521처럼 동적으로 만들어진 path가 있어 보통 switch문으로 되지 않아 정규표현식을 쓰도록 한다.

Solution

switch에 true를 넣어 무조건 안으로 넣어주고, /정규식/.test(원하는변수)식으로 분기를 태워준다.
GTM의 Custom Javascript타입으로 pathName이란 이름의 Variables를 만들고, 사용할 땐 {{ pathName }}으로 사용해주면 된다.

function() {
    var path = location.pathname;
    var name;
    switch(true) {
        case /^\/$/.test(path):
            name = "메인페이지";
            break;
        case /^\/\d+\/$/.test(path):
            name = "제품상세";
            break;
        case /^\/user\/order\/\d+\/done\/$/.test(path):
            name = "구매완료";
            break;
        case /^\/user\/order\/$/.test(path):
            name = "주문";
            break;
        case /^\/user\/order\/\d+\/$/.test(path):
            name = "주문상세";
            break;
        case /^\/cart\/$/.test(path):
            name = "장바구니";
            break;
        case /^\/order\/$/.test(path):
            name = "주문진행중";
            break;
        default:
            name = path;
    }
    return name;
}

refer

http://stackoverflow.com/questions/2896626/switch-statement-for-string-matching-in-javascript