Amplify In-App Messagingを使って、Pinpointからのアプリ内メッセージを受信する

いわさです。

以下の２つの記事で、

• Pinpointでアプリ内メッセージを送信することが出来るアップデートがあったこと
• AmplifyはPinpointと簡単に統合出来ること

をお伝えしました。

実はPinpointのアプリ内メッセージチャネルの追加に伴って、Amplify側でもアプリ内メッセージに関する機能が追加されていました。
先日作成したAmplify + Pinpointのソースコードへ少し追加の設定を行うだけでアプリ内メッセージを表示出来るようになるのでやってみます。

AmplifyのIn-App Messagingは本日時点でプレビュー中でReact NativeのみUIコンポーネントが提供されており、またモーダルとカルーセルはまだ使えないようです。プレビューなので今後変更される場合があります。

キャンペーン作成

キャンペーン作成時のメッセージチャネルで「アプリ内メッセージング」を選択します。

そしてメッセージテンプレートには前回作成したテンプレートを選択しましょう。

アプリ内メッセージの場合はトリガーはイベントのみです。
Amplifyを使って分析イベントを発生させる形となるのですが、統合した時点でセッションの開始・終了、ページ遷移などなど様々なイベントが収集されています（デフォルト有効、無効にも出来る）

今回はボタンを押したときにカスタムイベントhogeを発生させ、それをトリガーにキャンペーンを開始してみたいと思います。
このあたりも様々な使い方が出来るので、夢が広がりますね。

一点注意事項があり、開始日時は現在時刻から15分後を指定する必要があります。
即時指定は出来ないのでその点だけご注意ください。

クライアントアプリを変更

Pinpoint側はこのように、アプリ内メッセージを選択して通常どおりキャンペーンを作成するだけですね。

次にアプリ側を修正してみます。
アプリ側では以下の対応が必要となります。

• InAppメッセージに関する構成情報の追加
• ロールへメッセージ取得権限を追加する
• エンドポイントのチャネルタイプをIN_APPに
• メッセージをユーザーデバイスへ同期する
• カスタムイベントを送信

InAppメッセージに関する構成情報

aws-exports.jsにはAmplifyやAnalyticsを初期化したタイミングで構成情報が格納されます。
ここのアプリ内メッセージ情報を追加する必要があります。

src/aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "Notifications": {
        "InAppMessaging": {
            "AWSPinpoint": {
                "appId": "94a603f23de1434ea63cd0c217c2689e",
                "region": "ap-northeast-1"
            }
        }
    },
    "aws_project_region": "ap-northeast-1",
    "aws_cognito_identity_pool_id": "ap-northeast-1:f244437a-5283-4f91-a034-313b158369bb",
    "aws_cognito_region": "ap-northeast-1",
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [],
    "aws_cognito_mfa_types": [],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [],
    "aws_mobile_analytics_app_id": "94a603f23de1434ea63cd0c217c2689e",
    "aws_mobile_analytics_app_region": "ap-northeast-1"
};

export default awsmobile;

通常このファイルは直接編集をしないので、GA時には初期化処理に組み込まれるのかなぁと予想しています。

ロールへメッセージ取得権限を追加する

ロール自体は前回の記事でAmplifyとPinpointを統合した時点で作成されていましたね。
今回は新たにアプリ内メッセージを取得する権限を追加する必要があるので、IAMロールの許可アクションに追加します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "mobiletargeting:GetInAppMessages",
                "mobiletargeting:PutEvents",
                "mobiletargeting:UpdateEndpoint"
            ],
            "Resource": [
                "arn:aws:mobiletargeting:*:123456789012:apps/94a603f23de1434ea63cd0c217c2689e*"
            ],
            "Effect": "Allow"
        }
    ]
}

コード修正

コード修正で以下を対応します。

• エンドポイントのチャネルタイプをIN_APPに
• メッセージをユーザーデバイスへ同期する
• カスタムイベントの送信

エンドポイントのチャネルタイプをIN_APPに変更します。
前回オプトインのためのエンドポイント更新を行っていましたので、ここではそこに追加するだけにします。

メッセージ同期についてはaws-amplifyのNotificationsサブカテゴリのInAppMessagingを使って同期を行います。
また、UIコンポーネントが提供されているのでそちらを使うと特別メッセージを表示させるための処理は不要になります。
これらに関連して必要なパッケージを追加でインストールします。

iwasa.takahito@hoge buildsegment % npm install -E aws-amplify@in-app-messaging aws-amplify-react-native@in-app-messaging amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker react-native-get-random-values react-native-url-polyfill
+ react-native-get-random-values@1.7.1
+ react-native-url-polyfill@1.3.0
+ aws-amplify-react-native@5.0.4-in-app-messaging.174
+ amazon-cognito-identity-js@5.2.3
+ aws-amplify@4.3.3-in-app-messaging.56
+ @react-native-picker/picker@2.2.1
+ @react-native-community/netinfo@7.1.6
+ @react-native-async-storage/async-storage@1.15.14
added 68 packages from 25 contributors, removed 6 packages, updated 21 packages and audited 1327 packages in 67.663s

以下のハイライト部分が追加された部分です。

App.js

import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

import { Amplify, Analytics, Notifications} from 'aws-amplify';
import awsconfig from './src/aws-exports';
import { InAppMessagingProvider, InAppMessageDisplay} from 'aws-amplify-react-native';

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

Amplify.configure(awsconfig);
Analytics.updateEndpoint({
  channelType: 'IN_APP',
  optOut: 'NONE',
  address: 'hogehoge',
}).then(() => {
});

const { InAppMessaging } = Notifications;

export default function App() {
  useEffect(() => {
    InAppMessaging.syncMessages();
  }, []);
  return (
    <InAppMessagingProvider>
      <View style={styles.container}>
        <Text>Hoge!!!</Text>
        <Button title="hoge" onPress={() => {
          Analytics.record({name: 'hoge'});
        }} />
        <StatusBar style="auto" />
      </View>
      <InAppMessageDisplay />
    </InAppMessagingProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

動作確認

npm startして、Expo Goで確認してみます。
ボタンが追加されています。これを押下するとPinpointへイベントが送信されます。

押すとメッセージが表示されました！
イベントが送信されたことでキャンペーンがトリガーされましたね。ボタン押下後のメッセージ同期なども自動実行してくれています。

アプリ内メッセージに表示されたボタンを押してみると、ブラウザでクラスメソッドのコーポレートサイトが表示されました。
このあたりも提供されているUIコンポーネントが全て実装してくれているのでPinpointのメッセージテンプレートで指定したアクションを透過的に利用出来ています。

さいごに

本日はAmplifyを使って、Pinpointのアプリ内メッセージを表示してみました。

まだプレビューですが、数行でイベント送信からメッセージ表示を行い、マネジメントコンソール上でキャンペーンのビジネスロジックを設定すれば良いのはとても強力ですね。
MAツールを統合してシステム開発を行ったことがあるのですが、その時にPinpoint知っていれば採用していたかもしれないです。