ChannelTalkのiOS、Androdアプリへの導入方法

# MAMORIOにおけるチャットツールの利用とChannelTalkへの移行

落とし物防止タグのMAMORIOはIoTタグとアプリを連携させる複雑さの問題からユーザーからの問い合わせが多く、２０１８年頃からサポートの体験の質を向上させるためにIntercomというチャットツールを導入していた。

しかし、米国製で主に欧米や中南米諸国をマーケットとしているIntercomは基本的に英語話者向けで管理コンソールもIntercom社員とのやりとりも英語であり、また（便利そうな）自然言語処理を用いたチャットボット機能も一向に日本語対応する気配がなかったため、韓国製でBotやマーケティング機能のコストが安く、かつ日本語圏を優先してくれるChannelTalkへ移行したところ**オペレーターによるサポート負荷を半減させることに成功した**。

以下は弊社オペレーターが書いた記事： https://note.com/tanakosan0508/n/n99af82341ba0

# 導入方法

導入ガイド: https://developers.channel.io/docs

SDKを使用するには以下２つを行う必要がある。

- 1. Plugin Keyの取得
    - <img width="1009" alt="スクリーンショット 2020-08-03 18.59.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38693/06f90ce0-8327-19f1-cf5b-7a7e9cbf12ce.png">
- 2. push通知用証明書のアップロード
    - <img width="790" alt="スクリーンショット 2020-08-03 19.36.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38693/86a6fa17-2d13-4837-1e18-f5b4d6fd8ac2.png">



また注意点としては、Androidでは以下のようにgradleに追加するだけでサクッとパッケージをインストールできるのだが、

```
dependencies{
    //Cannel Talk
    implementation 'com.zoyi.channel:plugin-android:7.1.3'
    implementation 'com.zoyi.channel:plugin-android-fcm:7.1.3'
}
```

iOSの場合、弊社のようにCarthageで管理を行っていると以下のようにChannelIOが依存している大量のライブラリを追加する必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38693/8bde5f18-a1fb-1e32-083a-7e801c675abb.png)


# 利用方法

ChannelTalkの動作には以下のサイクルがある。

## 1. initalize
ChannelTalkがアプリの状態を監視できるようにする（やり忘れてもコンパイルは通りその後のコードも動くが、バックグラウンド時のプッシュ通知によるチャットの応答などが一切機能しなくなるので注意）。

iOS

```
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    ChannelIO.initialize(application)
    return true
  }
``` 

Andorid

```
public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    
    ChannelIO.initialize(this);

    // TODO : Your code   
  }
}
```



##2. 遠隔プッシュ通知登録
ChannelTalkのサーバーにデバイスをプッシュ通知の受け手として登録する
これをおこなわないとユーザーがバックグラウンドにしてしまったあとに返信を行ってもプッシュ通知が届かない。

iOS

```
func application(_ application: UIApplication,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  ChannelIO.initPushToken(deviceToken)
}
```

Android
くわしくは[こちら](https://developers.channel.io/docs/android-push-notification)

```
public class MyActivity extends AppCompatActivity {
 
    @Override
    public void onCreate() {
        super.onCreate();
 
        // TODO : Your code
        // ...
        // ...
        ChannelIO.handlePushNotification(this);
    }
}
```

##3. bootとshow
bootはユーザーの情報をチャネルトークに渡してユーザー情報を更新し、セッションを貼る処理である。
bootはチャットコミュニケーションを行うためには必ず行わなければならず、**viewの描画が終わったタイミングでbootを行ったあと、コールバックでshowコマンドによりランチャーを表示することが推奨されている。** (iOSの場合viewDidAppear)

iOS

```
let settings = ChannelPluginSettings()
settings.pluginKey = "YOUR_PLUGIN_KEY"
settings.memberId = "memberId"
let profile = Profile()
profile.set(name: "Jason")
ChannelIO.boot(with: settings, profile: profile) { (status, guest) in
    if status == .success {
         ChannelIO.show(animated: true)
    } else {
         //異常処理
    }
}
```

なお、Profileは非必須でログイン前の匿名ユーザーともチャットを行うことができる。

```
let settings = ChannelPluginSettings()
settings.pluginKey = "YOUR_PLUGIN_KEY"
ChannelIO.boot(with: settings, profile: profile) { (status, guest) in
  print(guest) //=> nil
}
```

Android

```
ChannelPluginSettings settings = new ChannelPluginSettings(YOUR_PLUGIN_KEY);
settings.setUserId(uniqueUserId);

Profile profile = Profile.create()
      .setName(userName)
      .setEmail(userEmail)
      .setProperty("HomePage", "www.zoyi.co");

// If you register the listener, it receives the boot status.
// Booting without user information
  ChannelIO.boot(ChannelPluginSettings settings, OnBootListener listener);
```

##4. hide
iOSではチャネルトークのランチャーと返信のバナーはWindowの最前面に表示されるので、特定のページのみでチャットを表示し他のページで表示したくない時は明示的にhideし隠さなければならない。

iOS

```
override func viewWillDisappear(_ animated: Bool) {
   ChannelIO.hide(animated: true)
}

```

##5. shutdown
ChannelTalkは一度bootした後コネクションを貼ってメッセージを待ち続けるため、**ユーザーがそのアカウントでのアプリの使用をやめる際は明示的にshowdownコマンドを実行しなければならない。**

iOS

```
func logout() {
   ChannelIO.shutdown();
}
```


# メリット

## 1.  接客チャットの料金が訪問者数5000人超で月9000円

ChannelTalkも接続したユーザー数による従量課金だが、上限が５００１人で終わる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38693/95fe8983-f1da-179a-7045-600e5e6a18dc.png)


## 2. 日本語の接客botを作成できる

ChannelTalkを導入する最大のメリットは、選択肢式の接客ボットを日本語で複数種類手軽に作成できることである。
MAMORIOで日本語のbotを導入した結果、**オペレーターへ直接話しかけるユーザーの割合が半減しサポートチームの負荷を激減させることに成功した。**

<img width="1319" alt="スクリーンショット 2020-08-03 20.43.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38693/0ef12271-4fda-5f49-9371-74a18493295e.png">