Swift 시작 가이드

이 가이드에서는 Swift에서 iOS 앱을 만들고 구현하여 Google 태그 관리자 (GTM)로 화면 열기 및 버튼 누름 이벤트를 추적하는 방법을 설명합니다.

1. 새 프로젝트 만들기

1. Xcode를 엽니다.
2. 새 Xcode 프로젝트 만들기를 클릭합니다.
3. Single View Application을 선택합니다.
4. 다음을 클릭합니다.
5. 프로젝트 이름을 지정하고 추가 옵션을 선택합니다. 프로젝트 이름과 앱 이름은 제품 이름과 동일합니다.
   
6. 다음을 클릭합니다.
7. 프로젝트 위치 (디렉터리)를 선택합니다.
8. 만들기를 클릭합니다.

2. Google 태그 관리자 종속 항목 설치

1. Xcode를 종료합니다.
2. 터미널에서 다음 명령어를 실행하여 Cocoapods를 설치합니다.

   $ sudo gem install cocoapods
   

3. 프로젝트 디렉터리로 변경합니다.
4. 다음 명령어를 실행하여 Podfile라는 파일을 만듭니다.

   $ pod init
   

5. Podfile에서 use_frameworks!의 주석 처리를 삭제하고 pod 'GoogleTagManager'를 타겟에 추가합니다.

# Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. 다음 명령어를 실행하여 프로젝트에 Google 태그 관리자 (GTM) 종속 항목을 다운로드하고 설치합니다.

   $ pod install
   

   이 명령어는 작업공간 GtmSwiftTutorial.xcworkspace도 만듭니다. 이제부터 이 작업 공간을 사용하여 GtmSwiftTutorial 앱을 개발하세요.

3. Objective-C 라이브러리용 브리징 헤더 추가

브리징 헤더 파일을 만들려면 다음 안내를 따르세요.

1. Xcode를 엽니다.
2. File > New > File을 클릭합니다.
3. iOS > 소스에서 헤더 파일을 선택합니다.
4. 다음을 클릭합니다.
5. 헤더 파일 이름 BridgingHeader.h를 입력합니다.
   
6. 만들기를 클릭합니다.
7. 헤더 파일에 다음 import 문을 추가합니다.

   #ifndef BridgingHeader_h
   #define BridgingHeader_h
   
   #import <GoogleTagManager/TAGManager.h>
   #import <GoogleTagManager/TAGContainer.h>
   #import <GoogleTagManager/TAGContainerOpener.h>
   #import <GoogleTagManager/TAGDataLayer.h>
   #import <GoogleTagManager/TAGLogger.h>
   
   #endif /* BridgingHeader_h */
   

빌드 설정에 Objective-C 브리징 헤더를 추가하려면 다음 단계를 따르세요.

1. Xcode에서 프로젝트를 클릭합니다.
2. 편집기 영역에서 Build Settings를 클릭합니다.
   
3. 모두 및 결합을 선택하고 브리징을 검색합니다.
   
4. Objective-C 브리징 헤더가 포함된 행의 오른쪽 열에 BridgingHeader.h을 입력합니다.
   

4. 프로젝트에 기본 컨테이너 추가

프로젝트에 기본 컨테이너를 추가하기 전에 모바일 컨테이너 바이너리를 다운로드합니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 메뉴 바에서 버전을 클릭합니다.
4. 선택한 컨테이너 버전에서 작업 > 다운로드를 클릭합니다.
다운로드한 파일의 이름은 컨테이너 ID입니다(예: GTM-PT3L9Z).

프로젝트에 기본 컨테이너 바이너리를 추가하려면 다음 안내를 따르세요.

1. Xcode를 엽니다.
2. Dock에서 Finder 아이콘을 클릭합니다.
3. Downoloads 폴더를 클릭합니다.
4. Downloads 폴더에 있는 컨테이너 바이너리 파일을 드래그하여 Xcode 프로젝트의 루트 폴더에 놓습니다.

5. Google 태그 관리자를 앱에 연결

1. Xcode에서 AppDelegate.swift 파일을 엽니다.
2. AppDelegate 클래스에서 TAGContainerOpenerNotifier 클래스를 확장하도록 합니다.

   import UIKit
   
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
     // ...
   }
   

   클래스를 확장하면 Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' 오류가 발생합니다. 다음 단계로 이 오류를 수정합니다.

3. AppDelegate 클래스 정의 하단에 다음 함수를 추가합니다.

   func containerAvailable(container: TAGContainer!) {
     container.refresh()
   }
   

4. application 함수에서 return true 문 앞에 다음 코드를 추가합니다.

   let GTM = TAGManager.instance()
   GTM.logger.setLogLevel(kTAGLoggerLogLevelVerbose)
   
   TAGContainerOpener.openContainerWithId("GTM-PT3L9Z",  // change the container ID "GTM-PT3L9Z" to yours
       tagManager: GTM, openType: kTAGOpenTypePreferFresh,
       timeout: nil,
       notifier: self)
   

6. 화면 열기 이벤트 추적

화면 열기 이벤트를 추적하는 방법은 다음과 같습니다.

1. 추적 ID를 저장할 변수를 만듭니다.
2. screenName이라는 데이터 영역 변수를 만듭니다.
3. 화면 조회수라는 제목의 GTM 태그를 만듭니다.
4. 화면 추적 코드를 추가합니다.

a. 추적 ID를 저장할 변수 만들기

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 변수를 클릭합니다.
4. 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
5. 제목 없는 변수를 클릭하여 변수 이름 추적 ID를 입력합니다.
6. 변수 유형으로 상수를 선택합니다.
7. 추적 ID (UA-XXXXXXXX-X 형식, 여기서 X는 숫자)를 변수 값으로 입력합니다.
   UA-47605289-5을(를) 사용하세요(삭제 예정).
8. 변수 만들기를 클릭합니다.

b. screenName이라는 데이터 영역 변수를 만듭니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 변수를 클릭합니다.
4. 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
5. 제목 없는 변수를 클릭하여 제목 화면 이름을 입력합니다.
6. 변수 유형으로 데이터 영역 변수를 선택합니다.
7. 데이터 영역 변수 이름으로 screenName을 입력합니다.
8. 기본값 설정을 클릭합니다.
9. 기본값인 unknown screen을 입력합니다.
10. 변수 만들기를 클릭합니다.

c. 화면 조회수라는 제목의 GTM 태그를 만듭니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 태그를 클릭합니다.
4. New(새로 만들기)를 클릭합니다.
5. 제목 없는 태그를 클릭하여 태그 이름 Screen View를 입력합니다.
6. Google 애널리틱스 제품을 선택합니다.
7. 목록에서 추적 ID를 선택합니다.
8. 트랙 유형으로 앱 보기를 선택합니다.
9. 설정 더보기를 클릭합니다.
10. 설정할 필드를 클릭합니다.
11. + 필드 추가를 클릭합니다.
12. 필드 이름 screenName과 해당 값 Screen Name을 선택합니다.
13. 계속을 클릭합니다.
14. 실행 대상에서 모든 이벤트를 선택합니다.
15. 태그 만들기를 클릭합니다.

화면 조회 GTM 태그를 만드는 스크린샷을 참조하세요.

d. 화면 추적 코드 추가

1. Xcode에서 ViewController.swift 파일을 엽니다.
2. ViewController 클래스 내에서 dataLayer라는 변수를 정의합니다.

   var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
   

3. viewDidLoad() 함수에서 OpenScreen 이벤트를 데이터 영역으로 푸시합니다.

   dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
   

ViewController 클래스의 정의는 다음과 같습니다.

import UIKit

class ViewController: UIViewController {
  var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer

  override func viewDidLoad() {
    super.viewDidLoad()
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that cant be recreated
  }
}

7. 버튼 누르기 이벤트 추적

버튼 누르기 이벤트를 추적하는 방법:

1. eventAction이라는 데이터 영역 변수를 만듭니다.
2. Event라는 맞춤 이벤트 변수를 만듭니다.
3. 제목이 Button Pressed인 GTM 태그를 만듭니다.
4. 버튼을 만들고 버튼을 눌렀는지 추적하는 코드를 추가합니다.

a. eventAction이라는 데이터 영역 변수를 만듭니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 변수를 클릭합니다.
4. 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
5. 제목 없는 변수를 클릭하여 제목인 이벤트 액션을 입력합니다.
6. 변수 유형으로 데이터 영역 변수를 선택합니다.
7. 데이터 영역 변수 이름으로 eventAction을 입력합니다.
8. 기본값 설정을 클릭합니다.
9. 기본값인 unknown event를 입력합니다.
10. 변수 만들기를 클릭합니다.

b. Event라는 맞춤 이벤트 변수를 만듭니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 변수를 클릭합니다.
4. 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
5. 제목 없는 변수를 클릭하여 변수 이름 이벤트를 입력합니다.
6. 변수 유형으로 맞춤 이벤트를 선택합니다.
7. 변수 만들기를 클릭합니다.

c. '버튼이 눌림'이라는 제목의 GTM 태그를 만듭니다.

1. Google 태그 관리자 계정에 로그인합니다.
2. 모바일 컨테이너를 선택합니다.
3. 왼쪽 탐색 메뉴에서 태그를 클릭합니다.
4. New(새로 만들기)를 클릭합니다.
5. 제목 없는 태그를 클릭하여 태그 이름 Button Pressed를 입력합니다.
6. Google 애널리틱스 제품을 선택합니다.
7. 목록에서 추적 ID를 선택합니다.
8. 추적 유형으로 이벤트를 선택합니다.
9. 이벤트 카테고리를 선택합니다.
10. 이벤트 액션을 선택합니다.
11. 계속을 클릭합니다.
12. 실행 대상에서 모든 이벤트를 선택합니다.
13. 태그 만들기를 클릭합니다.

버튼 누름 GTM 태그를 만드는 스크린샷을 참조하세요.

d. 버튼을 만들고 버튼을 눌렀는지 추적하는 코드를 추가합니다.

1. Xcode 프로젝트를 엽니다.
2. Main.storyboard를 엽니다.
3. Xcode 툴바에서 맨 오른쪽 상단의 버튼을 클릭하여 유틸리티 영역 (오른쪽 사이드바)을 엽니다.
4. 유틸리티 영역 하단에서
   

   Show the Object library(객체 라이브러리 표시) 버튼(파란색 버튼)을 클릭합니다.

   
5. 검색창에 button을 입력합니다.
   
6. 버튼을 스토리보드로 드래그하여 왼쪽 상단에 놓습니다.
   
7. Xcode 툴바에서 어시스턴트 편집기 버튼 을 클릭합니다.
8. Ctrl 키를 누른 상태에서 버튼을 드래그하여 ViewController 클래스 정의 하단으로 드래그합니다.
   
9. 대화상자에서 Action 연결을 선택하고 함수 이름 buttonPressed를 입력한 후 Connect를 클릭합니다.
   

   이렇게 하면 ViewController 클래스 정의 끝에 다음 함수가 추가됩니다.

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   이 함수는 버튼을 누를 때마다 실행됩니다.

10. buttonPressed 함수에서 다음 코드를 추가하여 ButtonPressed 이벤트를 일 레이어에 푸시합니다.

    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. 앱 빌드 및 실행

Xcode에서 Product(제품) > Run(실행)을 클릭합니다. Xcode가 앱을 빌드하고 실행합니다.