Firebase 앱분석 설치 가이드

구글에서 2014년 인수한 백엔드 서비스인 Firebase의 앱분석 설치 과정을 다룬다.

크게 보면 아래 두 가지 내용이다.
가. iOS 기반에서 firebase analytics 를 사용하는 방법
나. 구글 태그 매니저 연동 방법

먼저 iOS 기반에서 firebase analytics를 사용하는 방법이다.

맥에서 CocoaPods를 설치한다.
아마도 에러가 발생한다.
ERROR:  Error installing cocoapods:
activesupport requires Ruby version >= 2.2.2.

구글 커뮤니티는 다음 차선책을 제시한다.
sudo gem install activesupport -v 4.2.6
sudo gem install cocoapods

**
gem: 세련된 루비 패키지 관리자
CocoaPods: Cocoa 라이브러리 패키지 관리자

xcode 도구에서 개발 프로젝트를 생성한다.
프로젝트 생성 폴더에서 Firebase 라이브러리를 가져온다.
pod init :-> Podfile이 생성된다.
vi Podfile :-> pod ‘Firebase’를 추가한다.
pod install

Firebase에서 서비스 프로젝트를 생성한다.
GoogleService-Info.plist 파일을 내려받아 개발 프로젝트에 추가한다.
GoogleService-Info.plist 내용에 IS_ANALYTICS_ENABLE을 True로 변경한다.

프로젝트에 코딩 작업을 한다.
AppDelegate.swift에 가이드 코드를 추가한다.
import Firebase

func application(application: UIApplication, didFinishLaunchingWithOptions  …) -> Bool {
        // Override point for customization after application launch.
        FIRApp.configure()
        return true
    }

ViewController.swift에 이벤트 로그 코드를 삽입한다. 
import FirebaseAnalytics

FIRAnalytics.logEventWithName(“<eventName>”, parameters: [
“<keyName>”: “<keyValue>”,
… ])

Analytics 디버깅 옵션을 추가한다.
Product > Scheme > Edit Scheme… > Arguments (tab) > Arguments Passed On Launch
에 -FIRAnalyticsDebugEnabled 값을 추가한다.

<<실제 디버그 내용
2016-07-22 17:26:47.742 myFirebaseA[10445:] <FIRAnalytics/DEBUG> Logging event: origin, name, params: app+gtm, test_event, {
   "_o" = "app+gtm";
   eventAction = "test event action";
   eventCategory = "test event category";
}
2016-07-22 17:26:47.796 myFirebaseA[10445:] <FIRAnalytics/DEBUG> Event logged. Event name, event params: test_event, {
   "_o" = "app+gtm";
   eventAction = "test event action";
   eventCategory = "test event category";
}

디버그 로그로 태그 전송 여부를 추측 할 수 있다.
확실히 하기 위해서, 실시간 확인이 가능한 구글 태그 매니저를 활용한다.

다음은 구글 태그 매니저 연동 방법이다.

태그 매니저에서 iOS용 firebase 컨테이너를 생성한다.
게시 버전의 json 파일을 내려 받고, container/<code>.json 형태로 개발 프로젝트에 참조를 건다.

개발 프로젝트에 태그 매니저 라이브러리를 추가한다.
pod 'GoogleTagManager', '~> 5.0' 를 Podfile에 추가하고,
pod install 한다.

<<실제 디버그 내용
2016-07-22 17:26:47.735 myFirebaseA[10445:649284] GoogleTagManager info: Processing logged event: test_event with parameters: {
    eventAction = "test event action";
    eventCategory = "test event category";
}
2016-07-22 17:26:47.740 myFirebaseA[10445:649284] GoogleTagManager info: Sending universal analytics hit: {
    "&ea" = "test event action";
    "&ec" = "test event category";
    "&el" = "test_event";
    "&ni" = 0;
    "&t" = event;
    "&tid" = "UA-012345678-1";
}

Read More

구글 태그 매니저의 맞춤 자바스크립트 활용 예제

구글 태그 매니저에서 {{출생년도}}라 정의한 데이터 레이어 변수를 전달 받는다고 가정하자.
전달 받은 값을 가공할 필요가 있을때, 맞춤 자바스크립트를 통해서 간편하게 적용 할 수 있다.

다음은 {{출생년도}} 변수를 {{연령대}}변수로 가공하는 맞춤 자바스크립트 코드이다.
: {{출생년도}}를 '19880917'를 받았을때, {{연령대}}가 '20대'가 된다.

<<EOF
function (){
    // 태어난 년도를 기준으로, 연령대를 계산한다.
    var paramYear={{출생년도}};
    if ( paramYear === '' || isNaN(paramYear) ) {
        // 빈값이거나 숫자가 아니면, 오류로 보고 제외한다.
        return;
    } else {
        // 한국 나이를 기준으로, 연령대를 매핑한다.
        var currentYear=parseInt(new Date().getFullYear()); 
        var bornYear=parseInt(paramYear.substr(0,4));
        var age = currentYear - bornYear + 1;
        if ( age <= 0 || age > 200 ){
            // 미래에서 온 사람과, 200세 이상의 사람은 오류로 본다.
            // 기네스북: 역사상 가장 오래 산 사람은 1997년에 122세 나이로 세상을 뜬 프랑스 여성
            return;
        }
        var userAges;
        switch ( parseInt( age / 10 ) ){
            // IF 반복을 제외하는 이점이 크다고 본다.
            case 0:
                // 희박한 경우라 정렬을 고려하지 않고, 가독성을 높인다.
                userAges = "10대미만";
                break;
            case 1:
                userAges = "10대";
                break;
            case 2:
                userAges = "20대";
                break;
            case 3:
                userAges = "30대";
                break;
            case 4:
                userAges = "40대";
                break;
            case 5:
                userAges = "50대";
                break;
            case 6:
                userAges = "60대";
                break;
            case 7:
                userAges = "70대";
                break;
            default:
                userAges = "80대이상";
        }
        return userAges;
    }
}
EOF

Read More

구글 애널리틱스 유용한 기능 요약

구글 애널리틱스 사용 시, 자주 사용하는 유용한 기능들을 요약한다.

컨텐츠 그룹
컨텐츠 그룹의 규칙 그룹들을 페이지 URL에 기반한 패턴을 정의한다.
(2016년 7월 1일 기준, 무료 5개 제공)
**
컨텐츠 그룹의 규칙 그룹 단위로 행동 흐름(방문형태)를 한눈에 볼 수 있다.

측정 기준
hit, 세션, 사용자, 제품 범위의 측정 기준을 제공한다.
(2016년 7월 1일 기준, 무료 20개 제공)
**
성별, 연령, 로그인 여부 등의 확장 기준들을 손쉽게 추가 할 수 있다.

채널 그룹
기본 채널 이외에 맞춤 채널을 만들 수 있다.
사이트로 유입 될때, 식별 가능한 정보의 패턴으로 정의 한다.
**
특정 유입 경로(채널)를 그룹화 식별 할 수 있다.

세그먼트
리포트는 세그먼트 단위로 분리해서 볼 수 있다.
조건 필터의 경우 ‘세션’과 ‘사용자’ 단위임에 주의한다.
**
리포트 결과를 다양하게 분류 하여 볼 수 있고, 갤러리를 통해서 공유 할 수 있다.

고급 필터
세그먼트가 전체 데이터에 대한 분류 그룹을 제공하는데 비해서,
이 것은 보고서의 결과 데이터를 여과한다.

맞춤 자바스크립트 변수 (태그 매니저)
HTML 구성 요소를 파싱하여 변수로 사용 할 수 있다.
상품 상세 페이지들에 경로가 아닌 상품 이름을 측정 기준으로 사용할 때 유용하다.
**
예제)
본문 중에,
<h2 id=“test_id”>상품 이름</h2>
맞춤 자바스크립트,
function() {
  var elem = document.getElementById(“test_id”);
  return elem.innerText;
}

사용자 ID (User ID)
기본적으로 제공되는 Client ID는 기기나 브라우저 별 익명으로 식별한다.
웹 : 최초 접속때 생성되고 1차 쿠키에 2년간 유지 된다.
모바일 : 설치된 어플리케이션의 최초 인스턴스 구동 시에 무작위로 생성된다.
이는, 접속 인스턴스를 기반으로 행동 패턴을 추적하는 것을 말하며, 재생성 시에 사용자 정보 또한 갱신된다.
User ID는 회원 코드를 활용하여 (접속 인스턴스에 종속되지) 않는 통합 관점의 사용자 행동 패턴을 추적하는 방법을 제공한다.


목표 시각화
목표 도달을 한 눈에 볼 수 있는 두 가지의 흐름 시각화를 제공한다.

유입경로 시각화
 - 지정한 단일 유입 경로를 표현한다.
 - 세션에 유입 위치가 있으면 순서에 관계 없이 지정한 유입 경로로 이루어진 것으로 본다.
 - 목표 지정 이후 부터 데이터가 쌓인다.

목표 흐름
 - 루프를 포함한 실제 유입 경로를 표현한다.
 - 기존 데이터를 소급하여 바로 보여준다.

공통
 - 무료 버전에서 수집 데이터 집계는 하루 정도 소요된다.
 - 세션 단위 집계로 1 세션에서는 1회 목표 도달된 것으로 표현된다.


향상된 링크 기여
* 특정 페이지의 2개의 다른 링크가 같은 하나의 페이지로 갈때,
* 특정 페이지에서 같은 하나의 링크가 상황에 따라 다른 페이지로 갈때,
와 같이, 더 향상된 인페이지 분석이 필요 할때 사용한다.

애널리틱스의 속성 설정에서 변경하고 사이트에 태그를 추가한다.
태그 매니저에서는 태그의 고급 속성에서 “거짓”을 “참”으로 변경한다.


구글 웹마스터 도구 (Search Console)
구글 검색엔진에서 어떤 검색어에 의해서 웹사이트의 어떤 페이지들이 얼마나 노출 되고 클릭 되는지를 보고한다.
구글 웹마스터 도구와 계정 연결이 필요하다.
웹마스터 도구와 웹사이트를 연결하기 위해서는 사이트 소스 접근 권한이 필요하다.

Read More

구글 애널리틱스에서 알 수 없는 값 요약

구글 애널리틱스에서 알 수 없는 값에 대한 처리를 어떻게 하는지 정리한다.


먼저, 실시간 이벤트를 통해서 리포트에 보여지는 내용을 본다.


**
이벤트 라벨에 empty string (‘’), null, undefined 를 입력한 결과이다.
empty string과 undefined는 (not set)으로 보여진다.
null은 null이라는 값으로 보인다.

위 결과에서,
이벤트 액션과 같이 리포팅 될 때는 알 수 없는 값을 표현할 때 쓰인다.
이벤트 라벨 스스로를 측정 기준으로 할 때는 null에 대한 값만 리포팅 된다.


가끔 접하는 알 수 없는 값에 대해서 알아본다.

(none)은 없다는 것으로 정의된 값이다.
예를들면) (direct)/(none) 웹 브라우저의 URL 타이핑을 통해서 접속한 것을 말한다.

(not set)은 식별 할 수 없는 값이다.
예를들면) (direct)/(not set) 이메일, 뉴스레터, 내부 웹 사이트처럼 GA에서 식별 할 수 없는 비 온라인 매체에서 접속한 것을 말한다.

(not provided)는 의도적으로 제공되지 않는 값이다.
예를들면) organic/(not provided) 구글에 로그인 되어 있는 사용자의 개인 정보 보호를 위해 키워드를 제공하지 않을 때를 말한다.

알수 없는 값에 미묘한 차이를 알아본다.

맞춤 측정 기준의 세션이나 사용자 범주(scope)를 볼때, empty string과 undefined는 차이를 보인다.
둘다 없는 값(not set)을 뜻하지만, empty string은 값이 없다라는 것을 덮어 쓰고, undefined는 아무런 영향을 주지 않는다.
이는 세션 이상의 범주에서 결과에 영향을 미치게 된다.
따라서, 태그에 특정 키에 값을 실어 보낼때, 특정 키를 보내지 않는 drop 효과를 가지기 위해서는 undefined 처리가 필요하다.
function() {
      if ( {{측정기준_X}} === '') {
            return;
      } else {
            return {{측정기준_X}};
      }
}
**
javascript에서 비교 조건 ==은 타입 변환한 결과 비교를 허용한다.
string 10과 int 10은 true이다.
But, === 에서는 타입이 일치 하지 않아서, false 이다.

Read More

구글 태그 매니저

구글의 태그 매니저 사용 하면서 정리한 내용 입니다.

주요 기능

실시간 디버깅이 가능한 미리보기 도구를 제공한다.
변경 사항에 대한 체계적인 버전 관리가 가능하다.
다양한 분석 제품군을 기본 지원하고, 사용자 맞춤 태그 또한 지원한다.
구글 계정 단위 협업 기능을 제공한다.

권장 사항

페이지에서 발생되는 변수들은 가능하다면 데이터 레이어(dataLayer)를 이용한다.
전역변수나 DOM의 경우 유지보수 하면서 변경 가능성이 높다.
스니펫(추적 코드)는 호환성을 높이기 위해서  <BODY> 바로 다음에 추가한다.
분석 제품 추적 ID와 같이 자주 사용하는 값들은 변수에 등록해서 사용한다.

변수 설정 예제

자바 스크립트 전역 변수 선언
globalVariable = 10;
반대로, 지역 변수는 var를 붙인다.
var localVariable = 10;

데이터 레이어 변수 생성
dataLayer.push({‘key’:’value’})

데이터 레이어 이벤트 생성
dataLayer.push({‘event’:’event_name’})

**
dataLayer는 스니펫에서 정의되어 있는 예약어이다.
스니펫 코드에서 다음 위치 이름 수정(new_dataLayer_name)으로 변경 가능하다.
… (window,document,'script’,’new_dataLayer_name,’GTM-XXXX') …

맞춤 자바스크립트 변수 선언 (함수 반환값)
function() {
var now = new Date();
return now.getTime();
}

이벤트 수집 예제

분석 제품군: 구글 어낼리틱스 사용 가정

1. [웹 사이트] 이벤트 코드 삽입
    : dataLayer.push({‘event’:’event_test’})

2. [태그 매니저] 이벤트 이름이 event_test인 조건에 트리거 생성

3. [태그 매니저] 생성한 트리거에 따라 전송될 이벤트 정보 등록
    : 이벤트 카테고리, 작업(액션), 라벨 …

4. [태그 매니저] 미리 보기 및 디버깅 도구 실행

5. [웹 사이트] 이벤트 코드 수행 후 전송 확인

6. [구글 어낼리틱스] 실시간 이벤트 확인

7. [태그 매니저] 게시 (태그 적용)

구글 애드워즈 연결

리마케팅
리마케팅 목록을 등록한다.
리마케팅 스니펫 코드가 제공된다.

전환추적
전환 여부를 확인한다.
전환 스니펫 코드가 제공된다.

**
스니펫 코드는 웹 페이지에 직접 삽입 하거나,
식별 코드 정보를 통해서 태그 매니저에서 생성 할 수 있다.

주요 용어

계정
컨테이너를 그룹으로 관리한다.

컨테이너
웹/모바일 환경에 따른 추적 태그 생성 단위이다.
컨테이너를 기반으로 트리거, 태그, 변수의 설정 값이 관리된다.

버전
변경 환경에 버전 관리 기능을 제공한다.

관리자
사용자 권한 관리 및 컨테이너 관리 기능을 제공한다.
“컨태이너 가져오기/내보내기” 기능을 통해서 설정 환경을 다른 계정으로 복제 할 수 있다.

트리거
태그 발송(Fire)을 위한 조건을 명세한 트리거들을 만든다.

태그
기본 및 생성한 트리거로부터 유발된다.
사용할 제품으로 발송할 정보를 만든다.

변수
기본 변수에 사용자 변수를 정의 추가한다.
사용할 제품의 식별자를 상수로 정의하면 편리하다.

측정 기준 조회 범위

조회

값이 설정된 단일 조회에 적용된다.

세션

단일 세션의 모든 조회가 최종 값으로 적용된다.

사용자

현재 단일 세션의 모든 조회가 최종 값으로 적용된다.

변경이 없다면 미래 세션의 조회로 적용이 지속된다.

잘 작성된 참고 자료

참고

구글 태그 매니저 개발 가이드

표지 그림

Read More

구글 태그 매니저(GTM)에 대한 샘플 예제

웹 분석(Web Analytics)을 위해서 태그 생성 및 변경을 도와주는 GTM(Google Tag Manager)의 개괄적인 특징과 예제를 다룹니다.

먼저, GTM의 아름다운 구조(Architecture)를 사용자 입장에서 설명합니다.

준비 작업으로 GA와 GTM의 계정 그리고,

GTM의 컨테이너에서 발급 받은 태그 코드를 분석하고자 하는 모든 페이지에 붙여 넣습니다.

-END-

GTM 컨테이너에서 트리거(TRIGGER)/변수(VARIABLE)를 활용해 태그(TAG)들을 생성하고 게시(Publishing)합니다.

페이지에서 규칙을 만족하는 태그들은 실시간으로 GA로 전송됩니다.

달리 표현해서, 웹브라우저에서 태그 매니저 코드가 있는 사이트에 접속을 하면, GTM 서버로 부터 (사용자가 웹으로 설정한) 태그 정보를 받게 되고,  규칙에 해당되는 태그들을 GA로 발송(Fire) 합니다. 

다음은 데이터 영역 변수(Data Layer)를 활용한 버튼 클릭 이벤트를 예제와 함께 다룹니다.

1. 사용할 변수 및 트리거를 생성합니다.
2. 생성한 변수와 트리거를 가지고 태그를 만듭니다.
3. 미리 보기를 통해서 태그가 잘 동작하는지 확인 합니다.
4. 생성한 태그를 게시 하고 GA 실시간 이벤트를 확인 합니다. 

버튼 클릭 트리거를 만들고, 데이터 영역 변수 값들을 태그를 통해서 보내기 위한 설정입니다.

* 트리거 : "id"가 "demo"이고 "class name"이 "GTM click"인 클릭에 대해서 동작합니다.

* 변수 : 태그에서 사용할 GA 추적 ID를 상수로 미리 지정했고, 페이지의 데이터 영역(Data Layer)에 myLabel,myValue 두 가지 변수를 정의 했습니다.

* 태그 : "버튼 클릭" 트리거가 발생했을때, "my*" 변수를 "GAID"로 전송하는 "버튼 클릭" 태그를 만들었습니다. "링크 클릭"은 무시하면 됩니다.

GTM 웹에서 제공하는 미리 보기 기능으로 잘 동작하는지 확인 합니다.

* 이벤트 버튼을 클릭하면 실행되는 태그와 변수들에 대한 정보를 바로 보여줍니다.

GTM 컨테이너 게시 후에는 GA의 실시간 이벤트 보기에서도 확인 가능합니다.

일반적인 태그의 추가나 변경 작업 시에 IT 부서에 티켓을 발행하고 기다릴 필요가 없습니다. 미리 보기 기능으로 오류를 미연에 방지하고, 버전 관리 기능으로 언제든 복구 가능합니다.

참고

* 본문에서 사용한 HTML 코드

https://bitbucket.org/snippets/juhoon26/5Rkjg

* 구글 공식 도움말

https://support.google.com/tagmanager

* 구글 태그 매니저 학습 코스

https://analyticsacademy.withgoogle.com

Read More