AndroidとPendo連携してみた


# AndroidとPendo連携してみた



PendoはWebアプリの解析やガイド作成が注目されがちですが、実はモバイルアプリとも容易に連携が可能です。AndroidとiOS両対応しています。

[Pendo Mobile]([Pendo.io - プロダクト体験とデジタルアダプションのソリューション](https://jp.pendo.io/?_ga=2.175191650.1971481567.1660871865-980667956.1641830997))

今回はAndroidとPendoを連携してみました。
Android ProjectにPendo SDKをインポートする必要はあるものの、一回入れてしまえばほぼほぼノーコードでアプリのユーザー行動追跡と、ガイドの表示ができるようになります。

インストール作業の概要：

1. PendoにAndroidアプリケーションを追加
2. AndroidのPendoインストールキーを取得する
3. Android projectにpendo sdkを追加し、初期化メソッドを追加
4. インストール後、Pendoとの接続テストを行う
5. ページや機能のタグ付けを行う
6. ガイドの作成





# PendoにAndroidアプリケーションを追加

app.pendo.ioを開きアプリケーションの追加を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/de29d5f9-756e-7699-5509-46b2740b109c.png)


今回はAndroidアプリを追加するので、Native Androidを選択します。名前をつけて保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/3cb028a0-22af-a00c-89b6-1c32a25f016a.png)



# AndroidのPendoインストールキーを取得する

アプリの追加が完了すると、SDKを追加する手順が表示されます。PendoのAPI Keyもコード中に表示されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/ca693088-6604-2696-5e0f-29418b24ccfe.png)




# Android projectにpendo sdkを追加し、初期化メソッドを追加

Build.gradleにPendoのSDKを追加

```groovy
implementation group:'sdk.pendo.io' , name:'pendoIO', version:'2.12.+', changing:true
```

パッケージのリポジトリを追加

```groovy
repositories {
    maven {
        url "https://software.mobile.pendo.io/artifactory/androidx-release"
// AndroidXではない場合、は以下を追加 
// url "https://software.mobile.pendo.io/artifactory/android-release"
    }
    mavenCentral()
}
```

*Gradleのバージョンによってはbuild.gradleではなくsettings.gradleにレポジトリを追加する必要があります



### MainActivityにPendo.setupを追加

`Oncreate`に以下を追加

APIKEYはPendoアプリのinstall タブに表示されています[install画面参照](https://qiita.com/daichiiiiiii/private/32746a7ce1d066bb67b5#android%E3%81%AEpendo%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%AD%E3%83%BC%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)

```java
import sdk.pendo.io.*;

String pendoAppKey = "APIKEY” 

Pendo.setup(
    getApplication(),
    pendoAppKey,
    null,
    null
);
```

### ユーザー情報が初期化される画面でPendoも初期化

ユーザーの属性情報が取得できる画面(ログイン後の画面等)でPendoを初期化しメタデータを送ります

```java
String visitorId = "daichi"; //Visitor ID
String accountId = "ishida"; //Account ID

//Visitor IDを送信
HashMap<String, Object> visitorData = new HashMap<>();
visitorData.put("age", 36);
visitorData.put("country", "JAPAN");

// send Account Level Data
HashMap<String, Object> accountData = new HashMap<>();
accountData.put("Tier", 1);
accountData.put("Size", "Enterprise");

Pendo.startSession(
        visitorId,
        accountId,
        visitorData,
        accountData
);

```

### 権限の追加

Manifestファイルに以下権限を追加します。
```xml
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
```

### ページ/機能トラッキングを有効化する

Manifestファイルに以下を追記し、ページ・機能トラッキングを追跡できるようにします

```groovy
<activity android:name="sdk.pendo.io.activities.PendoGateActivity" android:launchMode="singleInstance" android:exported="true">
   <intent-filter>
       <action android:name="android.intent.action.VIEW"/>
       <category android:name="android.intent.category.DEFAULT"/>
       <category android:name="android.intent.category.BROWSABLE"/>
       <data android:scheme="pendo-c2ecf598"/>
   </intent-filter>
</activity>
```

### アプリをビルドして実行

ログに以下メッセージが表示されていればインストール成功です
`I/PendoInternal: Pendo Mobile SDK was successfully integrated and connected`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/b7aec13e-8cff-5f85-7116-f74a6c1bef9a.png)



# Pendoと接続テスト
Pendoアプリ(app.pendo.io)のinstallタブ画面右下のStart Vertificationボタンを押下します
表示されるＱＲをデバイスで読み込むもしくはＵＲＬを開いてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/5a143910-a1f0-e13b-d3bf-dce9552c83a1.png)

## 接続テスト
接続に成功するとアプリケーション上にPendoアイコンが表示されます。
ページをナビゲートしたり、ボタンをクリックしてみてください。
データが正しく送信されているとPendo側の画面が切り替わります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/8cbf33f6-86d7-a222-ce9d-0695c8e194e6.png)


# ページと機能のタグ付け

## ページ特定
Pendoアプリ上からページタグ付けを選択
Androidアプリ上にカメラボタンが表示されます。カメラボタンを押すとページのタグ情報がPendoに送信されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/fb58bc99-1729-1174-0291-8a5c9a04fa8e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/a894fab2-ca24-1910-2b27-53b2c7bbf625.png)


## ページ送信成功の図
送信に成功すると先ほどのページのスクショがPendo上に表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/fa24645a-5283-ad5b-f185-6c3ee47a7914.png)


## 機能のタグ付け
ページ内のタグ付けはPendoアプリ上から行うことができます。
さきほど送信したページ情報を元にボタン等をタグ付けできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/d7d5e5ce-8d33-6d12-1c1f-807f33903a63.png)


# ガイド作成
Web版ガイド同様にドラッグアンドドロップでガイドを作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/6b254f01-3816-53e8-c2da-44c4e40fd565.png)


モバイルガイドのアクティベーションは４種類用意されています。Webとは違いtrack eventをガイドのトリガーに設定できます。
1. App launch 
    - アプリ起動時
2. Page View
    - 特定ページを開いた後
3. Target Element
    - 特定のエレメントを線選択した後
4. Track Event
    - Track Eventの送付が完了した後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/b9bd8f8e-6f83-6dfd-cc69-a9539370ea5a.png)



## ガイドのテスト

ガイド作成画面右上のPreviewボタンからガイドをデバイス上でテストすることができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/94a24e8f-9d9b-afa2-565c-9bf21e83fda4.png)



# Demo
## ページと機能のタグ付け
<iframe width="560" height="315" src="https://www.youtube.com/embed/HkPcvZMNyiU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



## ガイドの作成→起動方法を特定のボタンに結び付け→エミュレータでガイドの起動テスト
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXBsvO7kXS0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>