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

いわさ

2021.12.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

以下の２つの記事で、

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を初期化したタイミングで構成情報が格納されます。
ここのアプリ内メッセージ情報を追加する必要があります。

/* 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
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ @react-native-picker/[email protected]
+ @react-native-community/[email protected]
+ @react-native-async-storage/[email protected]
added 68 packages from 25 contributors, removed 6 packages, updated 21 packages and audited 1327 packages in 67.663s

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

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',
  },
});