Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
Firebase AnalyticsGoogle Tag Manager
ネイティブアプリ解析 環境構築⼿順書Ver.02 2016.06.18
1
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
⼿順書 概要
1. 環境構築の前提条件
2. Apple IDの作成
3. Xcodeのダウンロードとインストール
4. iPhoneアプリの作成
5. Firebase Analyticsの導⼊
6. Google Tag Manager の導⼊
2
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
1 環境構築の前提条件
1. インターネット接続環境
2. Mac OS X 10.11 or later El Capitanl
3. Xcode iPhoneアプリ開発⽤統合環境
4. iPhone本体(実機確認時のみ必要)
Apple Developer Program 登録https://developer.apple.com/
3
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
2 Apple IDの作成
https://appleid.apple.com/#!&page=create
4
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
3 Xcodeのダウンロードとインストール(インストール⼿順省略)
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12
5
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 iPhoneアプリ作成(Firebase Analyticsの検証⽤で使う)
6
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 iPhoneアプリ作成(Firebase Analyticsの検証⽤)
7
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 iPhoneアプリ作成(Firebase Analyticsの検証⽤)
⼀意
個⼈名で⼀意にするでも可
8
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 iPhoneアプリ作成(Firebase Analyticsの検証⽤)
TestApp
場所は任意
TestAppフォルダ
9
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 iPhoneアプリ作成(Firebase Analyticsの検証⽤)
こんな感じでプロジェクトが作成される
確認
10
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 マップ作成ライブラリーの追加
MapKit.frameworkを選択
11
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4 エディタエリアを調整
MapKit.frameworkを選択
画⾯いっぱいに拡げる
ドラッグ&ドロップ
1
2
3
4
12
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4
Add Missing Constraintsを選択
Add Missing Constraints
選択中のコンポーネントについて、レイアウトを決定するのに⼗分な制約が設定されていない場合に、不⾜している制約を⾃動的に追加します13
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
4
任意の機種を選択
ビルド開始
14
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5
Firebase Analyticsの導⼊
15
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
https://firebase.google.com/ へアクセス
プロジェクト名は任意
16
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
plistを⼊⼿、Xcodeプロジェクトの所定のフォルダへ配置。
P10で表⽰されているBundle Identifierを記述
jp.co.web-kaizen.TestApp
17
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
配置は、ドラッグ&ドロップでOK
ドラッグ&ドロップ
18
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
確認
19
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
CocoaPodsをインストール。そのあと、podコマンドでFirebaseライブラリを追加していく。
1. CocoaPods をインストール
2. ターミナルを起ち上げ、pod init でPodfileを⽣成する
3. Podfileを編集
4. pod install を実⾏して、FirebaseライブラリーをXcodeに作成したプロジェクトへ追加する
次ページ以降で具体的な⼿順を紹介
20
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
Cocoapodsのインストール
sudo gem install cocoapods
上記で上⼿くいかない可能性がある。その場合は、下記コマンドで対応する。
sudo gem install -n /usr/local/bin cocoapods<http://qiita.com/AcaiBowl/items/4bb4708de03e6ee14a4a>
21
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
TestAppのディレクトリまで移動①。そのあと、pod initを実⾏②。そうすると、Podfileが⽣成される③。
1
2
Podfileが⽣成 3
22
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
Podfileを編集する (viコマンドで編集する。viがわからない場合は、テキスト直接開いて編集、保存でも可)2⽂を追記する。
Pod ʼFirebaseʼ を追記ついでに
pod 'GoogleTagManager', '~> 5.0ʼも追記しておく
最後に保存(:wq!)。
23
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
pod install を実⾏。下記のように表⽰されればOK
24
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
開いているXcodeプロジェクトを⼀旦保存、すべて閉じる( X切りでOK )。そして、再度、開く。xcworkspaceをopenすること。
25
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
Firebase関連のライブラリーが追加されていることを確認しておく。IS_ANALYTICS_ENABLED をYESにしておく。
YES
確認
26
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
総仕上げ。AppDelegate.swiftファイルに書きを追記。そして、終了。
import Firebase
FIRApp.configure()
確認27
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
5 Firebase Analyticsとの関連付け
開いているXcodeプロジェクトを⼀旦、すべて閉じる( X切りでOK )。そして、再度、開く。右下コンソールにFirebase Analtyics Enabeledが表⽰されているはず。
24時間内にシステムで⾃動収集するイベントレポートが
上がってくる。
28
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
6
Google Tag Manager の導⼊
https://developers.google.com/tag-manager/ios/v5/#add-gtm-to-project
29
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
6 Google Tag Manager との関連付け
アカウントを作成。そのあと、GTM疎通確認⽤のイベントタグを作成。
30
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
GTM検証⽤のイベントを追加する。トリガーは、コンテナが読み込まれた時。
6 Google Tag Manager との関連付け
31
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
Google Tag Manager から、適当なバージョンのjsonファイルをダウンロードする
6 Google Tag Manager との関連付け
32
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
6 Google Tag Manager との関連付け
containerというフォルダを作成しておき、TestAppプロジェクトフォルダの直下に配置しておく①。そして、containerフォルダへ、jsonファイルをドラッグ&ドロップする②。保存。
12
33
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
6 Google Tag Manager との関連付け
リビルド。
34
Copyright © 2016 株式会社ウェブ改善・分析企画開発リサーチ All Rights Reserved.
6 Google Tag Manager との関連付け
24時間以内で、Google Tag Manager から設定されたEV Add From GTMイベントがレポートされる。レポートされていれば、関連付けは成功。
24時間内にEV_Add_From_GTMのイベントレポートが上
がってくる。
35