레이블이 태그매니저인 게시물을 표시합니다. 모든 게시물 표시
레이블이 태그매니저인 게시물을 표시합니다. 모든 게시물 표시

2016년 7월 22일 금요일

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";
}

2016년 7월 21일 목요일

블로거에 구글 태그 매니저 스니펫 추가

구글 블로거(Blogger)에 GTM 스니펫을 삽입할때 이슈와 해결 방안을 기록한다.

스니펫 코드 입력 후 저장하면 다음 알람을 접한다.

XML을 구문분석하는 중 오류 발생(1272행, 43열): The reference to entity "l" must end with the ';' delimiter.
**
XML에서 <, >, &는 tag와 entity를 표시를 위한 예약문자임으로 아래와 같이 변경한다.
< :-> &lt;
> :-> &gt;
& :-> &amp;

스니펫 코드를 구문 오류를 해결하기 위해서 아래와 같이 변경한다.

'dataLayer'?'&l :-> 'dataLayer'?'&amp;l

2016년 7월 20일 수요일

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

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

다음은 {{출생년도}} 변수를 {{연령대}}변수로 가공하는 맞춤 자바스크립트 코드이다.
: {{출생년도}}를 '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

2016년 7월 14일 목요일

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

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

컨텐츠 그룹
컨텐츠 그룹의 규칙 그룹들을 페이지 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)
구글 검색엔진에서 어떤 검색어에 의해서 웹사이트의 어떤 페이지들이 얼마나 노출 되고 클릭 되는지를 보고한다.
구글 웹마스터 도구와 계정 연결이 필요하다.
웹마스터 도구와 웹사이트를 연결하기 위해서는 사이트 소스 접근 권한이 필요하다.


2016년 5월 31일 화요일

구글 태그 매니저

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

주요 기능

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

권장 사항

페이지에서 발생되는 변수들은 가능하다면 데이터 레이어(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)을 위한 조건을 명세한 트리거들을 만든다.

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

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

측정 기준 조회 범위

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

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

사용자
현재 단일 세션의 모든 조회가 최종 값으로 적용된다.
변경이 없다면 미래 세션의 조회로 적용이 지속된다.

잘 작성된 참고 자료

참고

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

표지 그림