PhonegapアプリにAdobe Mobile SDKを入れる

投稿日 by

まずはMac上でPhonegapアプリを作るところから始めた。

ググると結構古い情報がヒットして困ったが、Phongegapの中身はCordovaなので、Cordovaの環境を揃えれば良いそうだ。

Xcodeはインストール済みだったので、
Xcodeコマンドラインツールを入れる。

あと、gitもインストール済みなので、そのまま使う。

で、今度はNode.jsを入れる。
node.jsに含まれるnpmコマンドを使うためである。
https://nodejs.org/en/

そしてcordovaをインストールする

$ sudo npm install cordova -g

インストールしたら、早速テストプロジェクトを作る

$ cordova create test-project

そしてiOSとAndroidのプラットフォームを追加

$ cordova platforms add ios
$ cordova platforms add android

そうするとtest-project/platforms配下にiosとandroidというディレクトリがそれぞれ出来上がるので、それらをbuildしたのち、エミュレーターで起動できます。

$ cordova build ios
$ cordova emulate ios

というわけで、次はAdobeのSDKを入れます。
管理画面からPhonegap pluginというのもダウンロードしておきます。
https://marketing.adobe.com/resources/help/en_US/mobile/ios/phonegap.html
最初はiOS。通常のiOSアプリと同じくADBMobileライブラリとADBMobileConfig.jsonをプロジェクトに追加します。

そして、ADBMobile_PhoneGap.h と ADBMobile_PhoneGap.m プロジェクトのpluginsフォルダにコピー。

それから、test-project/platforms/ios/www にPhonegapプラグインに含まれるADBHelpler.jsをコピーする。

で、config.xmlに下記の要素を貼り付けるとあるが、config.xmlがプロジェクトのrootとplatforms/ios/の２箇所にあるんだが、どっちだ？
とりあえず両方に入れといたw

<feature name="ADBMobile_PhoneGap">
    <param name="ios-package" value="ADBMobile_PhoneGap" />
</feature>

ここまでやったら、次はADBHelper.jsの実装。
とりあえずwwwの中のindex.htmlに入れる。
閉じタグの直前に、ADBHelper.jsをインクルード。

<script type="text/javascript" charset="utf-8" src="ADB_Helper.js"></script>

あとは各ADB.trackStateをコールすればビーコンが飛ぶ、はずなのですが、どうやらCordovaアプリ内ではonDeviceReadyイベントが発生してからじゃないと制御出来ない。

で、とりあえずjs/index.js内でonDeviceReadyで実行されるコールバック関数があったので、その中にADB.trackStateを入れたら動いた

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
        
        /* ここでAdobe Analyticsのコードを実行 */
        ADB.setDebugLogging(true);
        ADB.collectLifecycleData();
        //pageNameにHelloCordova、prop1にhogeをセット
        ADB.trackState("HelloCordova", {"&&c1":"hoge"}); 
    }

trackingServerへの送信ビーコンの中身はXcodeのコンソールに出てくるので、それで確認。
Phonegapプラグインがちゃんとpluginsフォルダにコピーされてないとプラグインが見つからないというエラーが出てきて怒られるので注意。

以上iOS

Androidも大体やる事は同じ。
https://marketing.adobe.com/resources/help/en_US/mobile/android/phonegap.html
しかしbuildしたらtargetが見つからないとかで怒られる。

$ cordova build android

というわけでAndroid SDK Managerを起動してもろもろバージョンアップしたりインストールしてretryしたら動いた。