Titaniumで使うiOS/Android両方に対応しているGoogle Analyticsモジュール(2015年4月版） #GoogleAnalytics

少し前にTitaniumアプリにGoogle Analyticsを組み込むことがあったのですが、探してみると情報が古くなってしまっているものもあったので、改めて調べてみました。

SDK	バージョン
for iOS SDK	v3
for Android SDK	v4

Analyticsモジュールの選定

条件

ここ最近の環境の変化として、

iOSは64bit対応したモジュールが必須になっている
AndroidのGoogle Analyticsはv4からGoogle Play Services SDKを使うようになっている

というようなことがありますので、この2点に対応しているもので、さらにiOS/Android両方に対応している（両プラットフォーム向けに提供されており、同じインターフェイスで使える）もの、という条件で探してみました。

候補

上記の条件で探してみて、見つかったのが以下の3つでした。

モジュール	iOS SDK バージョン	iOS 64bit対応	Android SDK バージョン
Sitata/titanium-google-analytics	v3.10	○	v4
benbahrenburg/Ti.GA	v3.10	○	v4
appcelerator-modules/ti.googleanalytics	v3.07	○	v3

選定

appcelerator-modules/ti.googleanalytics はAndroidのSDKが古いようだったので、最新のSDKには対応している残りの2つから、 Sitata/titanium-google-analytics を使ってみることにしました。

READMEを見比べた感じ、 Sitata/titanium-google-analytics の方が若干機能が多い点と、元々公式のMarketplaceで配布されていたものを引き継いでメンテされているという点で実績もありそうということで、採用しました。

使い方

基本的な使い方について書いておきます。

GitHubの testフォルダに、モジュールを組み込んだサンプルプロジェクトがありますので、これも参考になると思います。

事前準備

基本的なTitanium iOS/Androidの開発環境はできている前提です
Androidの場合 Android SDK Managerで、Google Play Servicesがセットアップされている
Google Analyticsアカウントを持っていて、トラッキングコードを発行済み

トラッキングコードの発行（を含む基本的なGoogle Analyticsの組み込みまで）については、以下のQiitaエントリが参考になりました。

プロジェクト作成

まずはプロジェクトを作成します。

以下はTitanium CLIでの例ですが、Titanium Studioで開発されている方も同じように設定していただければ大丈夫だと思います。

$ titanium create --type app --platforms iphone,android --name TiGADemo --id com.example.tigademo
$ alloy new ./TiGADemo

Alloyベースのアプリプロジェクト
対象プラットフォームはiPhoneとAndroid
プロジェクト名( --name )や、ID( --id )はお好みで

モジュールの導入

モジュールの導入には大きく2つのパターンがあり、色々なプロジェクトで使えるようにグローバルに配置する方法と、プロジェクト単体に導入する方法とありますが、今回は後者の方法で紹介します。

グローバルへ導入する方法については、公式ドキュメントのInstalling modules あたりが参考になるかと思います。

モジュールのダウンロード

GitHubのreleasesページから、iOSとAndroidのモジュールをダウンロードします。

私がためしたときは、iOS/Androidともに3.1.0というバージョンでした。

モジュールの配置

ダウンロードしたZIPファイルを展開すると、どちらも modules というフォルダが現れますので、これを作成したプロジェクトの直下に配置します。

tiapp.xmlの編集

tiapp.xml の <modules> タグ内に、iOS/Androidそれぞれのモジュールの読み込む記述を追加します。

version 部分は、ダウンロードしたときのモジュールのものに合わせてください。

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
  ...
  <modules>
    <module platform="iphone" version="3.1.0">analytics.google</module>
    <module platform="android" version="3.1.0">analytics.google</module>
  </modules>
  ...
</ti:app>

プロジェクト直下で $ titanium module コマンドを実行してみて、以下のように Project Modules に認識されていれば、大丈夫だと思います。

$ titanium module
Titanium Command-Line Interface, CLI version 3.4.2, Titanium SDK version 3.5.1.GA
Copyright (c) 2012-2015, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

Project Modules
Android
  analytics.google
    3.1.0   /Users/myhome/workspace/TiGADemo/modules/android/analytics.google/3.1.0

iPhone
  analytics.google
    3.1.0   /Users/myhome/workspace/TiGADemo/modules/iphone/analytics.google/3.1.0

Global Modules
...

トラッキングの実装

トラッキングコードの設定

サンプルでは、 app/config.json にトラッキングコードを設定していました。

{
  "global": {
    "trackingId": "UA-XXXXXXXX-XX"
  },
  "env:development": {},
  "env:test": {},
  "env:production": {},
  "os:android": {},
  "os:blackberry": {},
  "os:ios": {},
  "os:mobileweb": {},
  "dependencies": {}
}

ここで設定した値は、JavaScriptのコード内で Alloy.CFG.trackingId で参照できるようになります。

トラッカーの生成

app/controllers/index.js に、トラッカーの生成コードを実装します。

var GA = require('analytics.google');

GA.trackUncaughtExceptions = true;
GA.optOut = false;
GA.dryRun = false;
GA.dispatchInterval = 15;

var tracker = GA.getTracker(Alloy.CFG.trackingId);

モジュールを読み込み後、app/config.json に設定したトラッキングコードを使って、 getTracker() でトラッカーを生成しています。

その間にあるオプションについては、モジュールのREADMEやGoogle Analytics公式ページを参照して、必要に応じて設定してください。

画面遷移のトラッキング

基本的なトラッキングの一つである画面遷移のトラッキングは、以下のように実装します。

tracker.trackScreen({
  screenName: 'Home Screen'
});

画面が遷移したタイミングで trackScreen() を呼び出していけば、Google Analytics上で、どの画面が多く見られているかや、どういった行動フローをしているか、などの情報が取得できます。

イベントのトラッキング

もうひとつの基本的なトラッキングであるイベントのトラッキングは、以下のように実装します。

tracker.trackEvent({
  category: 'Home',
  action: 'click',
  label: 'label1',
  value: 1
});

ボタンをクリックした回数など、ある操作に対するイベントを取得します。

引数のうち category と action は必須ですが、 label や value はオプションなので、取得したい情報に合わせて活用してください。

サンプルと実行例

実行したところ、Google Analyticsのリアルタイムページに反応が現れました。

また、「Hello World」ラベルをクリックしたタイミングでイベントトラッキングをしているのですが、こちらも反応しました。

どんな感じでデータが採れて、どのように見れば良いのかについての概要は、こちらのブログがわかりやすかったです。

アプリで飯を食う: iOSアプリをGoogle Analyticsでアクセス解析するとこんな感じ

また、ここで実装したサンプルは、 GitHub に置いてありますので、参考になれば幸いです。

iOSとAndroidでトラッキングコードを分ける

上記の例では、iOSとAndroidで共通のトラッキングコードを使う形でしたが、別々のコードを設定したい場合は、 app/config.json を以下のように設定するという方法もあります。

{
  "global": {},
  "env:development": {},
  "env:test": {},
  "env:production": {},
  "os:android": {
    "trackingId": "UA-XXXXXXXX-XX"
  },
  "os:blackberry": {},
  "os:ios": {
    "trackingId": "UA-YYYYYYYY-YY"
  },
  "os:mobileweb": {},
  "dependencies": {}
}

その他

他にもカスタムディメンションやメトリクス、例外トラッキング、eコマース用のトランザクションなどにも対応しているようなので、気になる方はREADMEやサンプルをご覧になってください。

Titaniumで使うiOS/Android両方に対応しているGoogle Analyticsモジュール(2015年4月版）

最新のGoogle Analytics SDKのバージョン