Amplify と Pinpoint を用いて EC サイトのユーザー動向を分析してみよう !
Author : 水馬 拓也
こんにちは。プロトタイピング ソリューションアーキテクト の水馬です。
突然ですがみなさんは、自社のサービスを運用するにあたり以下のようなお悩みを持ってはいないでしょうか？
- ユーザーがどの機能を使っているのか把握できていない
- Web サイトを改善したいが、どのページを改善すれば良いのかわからない
- ユーザーがサイトを離脱してしまうポイントを知りたい
今回は、AWS Amplify と Amazon Pinpoint を使ってアプリケーションのユーザー動向を把握する手順をご紹介したいと思います !
目次
1. 今回作成するもの
2. Amazon Pinpoint について
3. AWS Amplify について
4. 今回の開発スコープ
5. 開発環境の前提条件
6. 今回使用する技術スタック
7. Amplify CLI のセットアップ
8. Amplify CLI が使用するクレデンシャルのセットアップを行う
9. IAM ユーザーを作成する
10. プロジェクトに Amplify を導入する
11. Amplify CLI で Pinpoint のバックエンドを構築する
12. サンプルアプリケーションに Pinpoint のソースを組み込む
13. ユーザーのイベントを登録する
14. 購入フローを実行してみる
15. Event を分析してみる
16. ファネル分析を行う
17. アプリケーションのデプロイ
18. あとかたづけ
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
今回作成するもの
React.js で構築された EC サイトのサンプルアプリケーションに Amazon Pinpoint (以下、Pinpoint と表記) を導入することで、ユーザー動向を分析する手順を学んでいきます。今回の手順では以下の機能を実装します。
雛形となるアプリケーションのソースコードはこちらからダウンロードできます。
Pinpoint で収集する情報
- EC サイトに訪れるユーザー数の推移を可視化する
- ユーザーが使用するプラットフォーム (iOS / Android / Web ブラウザの種類) 情報を可視化する
- EC サイトを訪れたユーザーの何 % が実際に商品を購入しているか、商品購入までのユーザの離脱率を分析する (ファネル分析)
今回の成果物
EC サイトのサンプルアプリケーション
ユーザー数の推移の分析画面
ユーザーが使用するプラットフォームの分析画面
ファネル分析の画面
今回は Web アプリケーションを例に解説を進めますが、Pinpoint はネイティブアプリにおけるユーザー分析にもご利用いただけます！
Amazon Pinpoint について
Amazon Pinpoint は AWS によるカスタマーエンゲージメントのプラットフォームです。Amazon Pinpoint の分析ツールは、ユーザーのエンゲージメントのレベル、購入や行動に関するアクティビティ、エンゲージメントの設定その他についてのトレンドを見ることができます。また、ニーズに合った対象者セグメントに対し Email や SMS、Push 通知、Voice メールを使ったキャンペーンメッセージを届けることができます。Amazon Pinpoint は後述する AWS Amplify との親和性が高く、Amplify CLI を用いることで、マネジメントコンソールからインフラを一つ一つ構築することなく、CLI 操作だけでバックエンドの構築を行うことができます。
AWS Amplify について
Amplify とはサーバーレスなバックエンドをセットアップするための CLI、フロントエンドで利用できる UI コンポーネント、CI/CD やホスティングのためのコンソールを含む Web およびモバイルアプリ開発のためのフレームワークです。
Amplify は以下 3 つのサービスで構成されています。
- Amplify Libraries
- Amplify CLI
- Amplify Console
Amplify CLI
Amplify CLI はコマンドラインで AWS のバックエンドを構築できるインターフェースです。AWS のバックエンドを構築するにはマネジメントコンソールから開発を行う方法や、Cloudformation など Infrastracture as a Code の仕組みを用いる必要がありました。 Amplify CLI を用いれば コマンドラインから対話形式にバックエンドを構築できます。Amplify CLI はバックエンドの構築だけでなく、バックエンドとの連携に必要な設定ファイルやソースコードを自動で 生成 してくれます。 Amplify Libraries と合わせて使用することで、極めて少ない工数で認証、ストレージ、API、プッシュ通知といった基盤を構築することができ、開発者は本質的な課題に集中することができます。
Amplify Libraries
Amplify Libraries は、AWS のバックエンドと連携する処理を極めて少ない行数で記述できる Libraries です。 iOS、Android、Web (React / Vue / Angular)、React Native にそれぞれ最適化されたインターフェースを提供します。先ほど紹介した Amplify CLI と統合することで、認証やファイルストレージへのアクセス、Websocket の利用、AppSync や API Gateway ＋ Lambda とのやりとりを極めて簡単に実装することができます。
Amplify Console
Amplify Console は SPA (シングルページアプリケーション) や静的サイトのホスティング、CI/CD の運用を自動化するマネージドサービスです。 Github や AWS CodeCommit のようなソースリポジトリと連携し、CI/CD の仕組みを数クリックで構築することができます。また、ブランチごとにテスト環境を自動で構築したり、特定の環境のみ Basic 認証を付与するといった、柔軟な開発フローの設計が可能なサービスです。 Amplify Console と銘打っていますが、静的サイトであれば Amplify を用いなくても使用できるサービスです。
今回の開発スコープ
今回は Amplify CLI を用いて Pinpoint のバックエンドを構築します。構築した Pinpoint に対し、Amplify Libraries を用いてユーザーのアクティビティや属性情報を送信することで、ユーザーの動向分析を行うことができます。今回の開発スコープでは、React.js で構築されたサンプルアプリケーションに Pinpoint へデータを送信する処理を組み込んでいきます。雛形となるアプリケーションのソースコードはこちらからダウンロードできます。
開発環境の前提条件
以下の環境が整っていることを確認してください
- Administrator 権限でアクセスできる AWS アカウントがあること
- npm が利用可能であること
今回使用する技術スタック
今回は以下の技術スタックを使用します。
Amplify CLI のセットアップ
ここから開発の手順に入っていきます。まずは、事前準備として、Amplify CLI のセットアップを行います。バージョン差異を無くすため、今回は version 4.29.0 を使用します。
npm install -g @aws-amplify/cli@4.29.0バージョン情報が表示されれば Amplify CLI のセットアップは完了です。
amplify --versionAmplify CLI が使用するクレデンシャルのセットアップを行う
こちらからアプリケーションのソースコードをダウンロードします。ダウンロードしたファイルを解凍し、フォルダ内のディレクトリに移動します。
unzip app.zip
cd appプロジェクトフォルダに移動したら、必要なパッケージをインストールします。
npm installエラー無く処理が完了したら成功です。
サンプルアプリケーションを起動してみましょう。
npm starthttp://localhost:3000/ にアクセスし、このようなサンプルアプリケーションが起動すれば成功です。
アプリケーションが起動したら、お好きな商品の「商品詳細」ボタンを押下して、商品を購入するフローの動作を確認してみてください。(実際に決済が行われる訳ではないのでご安心ください !)
IAM ユーザーを作成する
次に、プロジェクトに Amplify を導入します。Amplify CLI が AWS のバックエンドを構築できるようにするために IAM ユーザーの作成と認証情報の設定を行います。
amplify configureEnter キーを押すと使用するリージョンや IAM ユーザー名を訊かれます。リージョンには us-east-1 を選択し、他は全てデフォルトを指定します。
https://console.aws.amazon.com/iam/~~ から始まる URL が発行されるので、別のブラウザでこの URL にアクセスします。
この時、すでに AWS のクレデンシャルをお持ちの方は、マネジメントコンソールで IAM ユーザーを作成する手順をスキップしてください。ターミナルで Enter キーを押下し、既にお持ちのクレデンシャルを入力してください。
クリックすると拡大します
画面に沿って IAM ユーザーを作成します。特に選択肢や設定を変更する必要はなく、次に進めていきます。
クリックすると拡大します
ユーザー作成完了後、アクセスキー ID とシークレットアクセスキーが発行されるので、これをメモします。シークレットアクセスキーは一度画面を閉じると、二度と確認できなくなってしまうので、忘れずにメモしてください。
クリックすると拡大します
ターミナルに戻り、Enter キーを押します。アクセスキー ID、シークレットアクセスキー を訊かれるので、ブラウザの IAM ユーザー作成完了画面に表示されているものをコピーしてください。
Profile Name はデフォルト (default) のままでも OK です。もし、既に Profile の設定を持っている場合は、「pinpointapp」のようなわかりやすい名前をつけてください。
コンソール上に「Successfully set up the new user.」と表示されることを確認してください。これで、作成した IAM ユーザーの権限で Amplify CLI からコマンドを発行できるようになりました。
プロジェクトに Amplify を導入する
プロジェクトのトップディレクトリで amplify init コマンドを実行します。
amplify init途中いくつか質問をされます。基本的にはデフォルトの設定で OK です。「Enter a name for the environment」には任意の環境名 (dev や test など) を入力してください。
Amplify は、各 AWS サービスをそれぞれ個別に設定するのでなく、amplify init コマンドによって生成された src/aws-exports.js で設定を集中的、自動的に管理することをサポートしています。このファイルには、アプリケーションで利用する全てのリージョン情報やサービスのエンドポイント情報が含まれますが、amplify add コマンド等によって追加・更新された情報は amplify push コマンド実行時に自動的に反映されるため、開発者はファイルの中身を強く意識する必要はありません。
しばらくすると、init 処理が完了します。src/aws-exportsjs が存在することと、amplify status コマンドを発行し、以下のような表示になることを確認してください。
amplify status
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |Amplify CLI で Pinpoint のバックエンドを構築する
Amplify CLI を使って Pinpoint のバックエンドの設定を追加します。
amplify add analytics途中コンソールからいくつか質問がされます。
まず、初めの質問の Select an Analytics provider では Amazon Pinpoint を選択します。
resource name には構築する Pinpoint の名前を指定します。今回は pinpointdemo と入力します。また、今回はデモアプリケーションのため、認証なしでも Pinpoint を使用できる設定とします。
amplify add analytics
? Select an Analytics provider (Use arrow keys)
❯ Amazon Pinpoint
Amazon Kinesis Streams
Note: It is recommended to run this command from the root of your app directory
? Provide your pinpoint resource name: pinpointdemo <--- 「pinpointdemo」 と入力
Adding analytics would add the Auth category to the project if not already added.
? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analyti
cs events? (we recommend you allow this when getting started) Y <--- 「Y」と入力エラーがでなければ、プロジェクトのルートディレクトリに「amplify」フォルダが作成されます。このフォルダ配下にバックエンドを構築するための設定が出力されます。この段階では、amplify フォルダに設定が出力されただけで、バックエンドの構築は行われていません。
次に、amplify push コマンドで Pinpoint のバックエンドを構築します。
amplify push途中いくつか質問をされますが、全てデフォルトを選択します。
しばらくして、「All resources are updated in the cloud」というメッセージが表示されれば成功です。
クリックすると拡大します
構築した Pinpoint の AWS マネジメントコンソールの URL が発行されます。URL をクリックし、Pinpoint の画面が表示されることを確認します。
クリックすると拡大します
また、構築された Pinpoint のエンドポイント URL が src/aws-exports.js に書き込まれていることを確認してください。このファイルはアプリケーションが Pinpoint にアクセスするために必要となるファイルです。このファイルを手動で書き換えたり、別の階層に移動しないよう注意してください。
サンプルアプリケーションに Pinpoint のソースを組み込む
ここからは、Pinpoint へデータを転送するコードをサンプルアプリケーションに追記していきます。Amplify Libraries を用いることで、先ほど構築した Pinpoint にデータを送信する処理を簡単に実装することができます。
以下コマンドでアプリケーションに Amplify Libraries をインストールします。
npm install aws-amplify次に、src/App.js に以下 3 行を追加します。
// TODO (1) Amplify Libraries を使ってPinpointを導入する
// --- ↓↓追加↓↓ ---
import awsconfig from './aws-exports';
import Amplify, { Analytics } from 'aws-amplify';
Amplify.configure(awsconfig);
// --- ↑↑追加↑↑ ---この処理では、バックエンド構築の際に出力された aws-exports.js を読み込んでいます。ファイルを保存したら再度アプリケーションを起動し、ブラウザにアクセスします。
npm startブラウザにアクセスしてからしばらくすると、Pinpoint のコンソール画面に「エンドポイント」が反映されていることが確認できます。Pinpoint におけるエンドポイントとは ユーザーのモバイルデバイスや電話番号、E メールアドレスなど、メッセージの送信先を表します。
注意： コンソール画面にエンドポイント情報が反映されるまで数分かかることがあります。
また、「Analytics」>「Demographics」から Platform 情報や App version などを確認することができます。例えば、Google Chrome と Firefox のブラウザでアクセスした場合、このような表示になります。
ユーザーのイベントを登録する
次に、ユーザのイベントを登録する処理を実装します。
Pinpoint には「イベント」を登録することで、アプリケーション内で行われた操作を可視化することができます。例えば、商品購入の処理の中に「商品購入イベント」を実装することで、商品が購入された回数や、タイミングを可視化することができます。 また、「検索」->「商品選択」->「購入」と行った一連のイベントフローを可視化することによりファネル分析 ※1 を行うことができます。
イベントの登録には Amplify Libraries を用います。
サンプルアプリケーションの EC サイトでは、商品購入までのフローとして、「1. Top 画面の表示」 -> 「2. 商品詳細ボタンの押下」 -> 「3. 確認画面の表示」 -> 「4. カード情報を入力する」 -> 「5. 支払いボタンを押下する」の 5 つのステップがあります。購入までの一連のステップに到るまで、どの程度ユーザが離脱しているかの情報を取得するために、各ステップに Pinpoint へイベントを送信する処理を追記します。
Top 画面表示時の Event を追加します。 src/container/Home.js に以下コードを追加します。
import { Analytics } from 'aws-amplify'; // 5行目に追記
const Home = () => {
// TODO (1) Top 画面表示時の Event を追加
Analytics.record({
name: "show_home"
});「商品詳細 >」ボタン押下時の Event を追加します。 src/container/ProductList.js に以下コードを追加します。
import { Analytics } from 'aws-amplify'; // 6行目に追記
(省略..)
{products.map(product => {
const click = () => {
// TODO (2)「商品詳細 >」ボタン押下時の Event を追加
Analytics.record({
name: "click_detail"
});
history.push(`/product/${product.id}`);
};「確認画面 >」ボタン押下時の Event を追加します。 src/component/ProductDetail.js に以下コードを追加します。
import { Analytics } from 'aws-amplify'; // 9行目に追記
(省略..)
const click = () => {
// TODO (3) 「確認画面 >」ボタン押下時の Event を追加
Analytics.record({
name: "click_confirm"
});
history.push(`/confirmation/${productDetail.id}`);
};「カード情報を入力 >」ボタン押下時の Event を追加します。src/container/Confirmation.js に以下コードを追加します。
import { Analytics } from 'aws-amplify'; // 10行目に追記
(省略..)
const click = () => {
// TODO (4) 「支払い」ボタン押下時の Event を追加
Analytics.record({
name: "click_billing"
});
history.push('/billing');
};ここまで実装が完了したら、再度アプリケーションを起動させます。
npm start購入フローを実行してみる
ブラウザで以下の操作を行ってみましょう。これらの操作を行う度に、Pinpoint に Event 情報が送信されます。
- Top 画面表示
- 「商品詳細 >」ボタン押下
- 「確認画面 >」ボタン押下
- 「カード情報を入力 >」ボタン押下
- 「支払い」ボタンを押下
イベントの反映には数分程度時間を要するため、反映されるまでの間に商品購入フローを何度か試してみましょう。実際のユースケースでは、サイトに訪れた人全員が商品を購入するということは恐らくないでしょう。
商品購入イベントに到るまでにユーザが離脱していくため、ステップが進むにつれて、発行されるイベントの数が少なくなることが予想されます。現実のユーザ動向に近い形で各画面のアクセス数を調整することで、この後の手順のファネル分析にて、もっともらしいグラフを得ることができます。
Event を分析してみる
Pinpoint のコンソール画面で各 Event が登録されていることを確認します。
コンソール画面で「Analytics」->「Events」に遷移してみましょう。初回アクセス時は Filter を有効にする必要があります。「More Information」ボタンを押下し、Filter を有効にする処理を進めます。
「Enable Filters」ボタンをクリックします。
コンソール画面で「Analytics」->「Events」に遷移し Filters の Event 一覧に各 Event が登録されていることを確認します。イベントが登録されていない場合は、しばらく待って画面をリロードしてみましょう。
※ 初回、「Enable Filters」ボタンを押下してからフィルターの機能が使用できるようになるまで數十分から１時間程度時間を要する場合があります。過去に送信されたイベントのデータ量によっては、最大 72 時間を要する場合があります。
次に、発行されたイベントを分析してみます。
まずは、EC サイトの Top ページが表示された回数を調べてみましょう。 Filters の Events から「show_home」を選択します。こちらの画像の例だと 27 回イベントが発行 (つまり Home 画面を表示) されていることがわかります。
クリックすると拡大します
また、属性ごとの Event 発行回数を調べることもできます。 Endpoint Attributes で「Model」->「Chrome」を選択してみましょう。ユーザの属性 (この場合ブラウザ) ごとの Event 発行回数を知ることができます。こちらの画像の例だと Chrome からのアクセスが 19 回であることがわかります。
クリックすると拡大します
ファネル分析を行う
いよいよ、ここからファネル分析を行うための設定を進めていきます。
コンソール画面の「Funnels」 > 「Create a funnel」から新しいファネル分析を作成します。
クリックすると拡大します
「Create a funnel」の画面に遷移し、Series を登録していきます。 「Funnel name」には「商品購入までの離脱率を調査」としています。
一つ目の Series には「Top 画面表示」を指定します。Event タイプは「show_home」を指定します。イベントを選択すると、こちらのように「Series details」に棒グラフの形式で選択したイベントの詳細が表示されます。
クリックすると拡大します
「create another series」を選択し、同様に「商品詳細 >」ボタン押下のイベントも作成していきます。こちらの例の場合、Top 画面を表示した人の内、52 % の人が商品詳細画面に遷移したことがわかります。
クリックすると拡大します
以下、同じ要領で 5 つのイベントの Series を設定していきます
- Top 画面表示 : show_home
- 「商品詳細 >」ボタン押下 : click_detail
- 「確認画面 >」ボタン押下 : click_confirm
- 「カード情報を入力 >」ボタン押下 : click_billing
- 「支払い」ボタンを押下 : click_payment
最終的に、こちらのような Series が表示されれば完成です！
クリックすると拡大します
上記のような結果が得られた場合、どのような洞察ができるでしょうか ? サイトに訪れた (Top 画面を表示した) ユーザーの内、最終的に商品を購入したユーザーは約 14 ％ です (= 10 ÷ 74)。全体のステップのうち、Top 画面の表示から商品詳細ボタンを押下するまでに約 65 % のユーザーが離脱しており、最も離脱率が高いことが読み解けます。 TOP 画面の UI や商品購入画面に遷移するための UX を改善することが、有効な施策といえそうです。
アプリケーションのデプロイ
最後にこのアプリケーションをデプロイしてみましょう。コマンドラインに amplify add hosting と打ち込むと、hosting 設定を追加することができます。Hosting with Amplify Console を選択すると、 Amplify Console を使ってデプロイを行うことができます。
amplify add hosting
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type
Continuous deployment (Git-based deployments)
❯ Manual deployment <-- こちらを選択しますamplify publish でアプリケーションをデプロイします。
amplify publish
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3デプロイが完了すると、URL が発行されます。
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.xxxxxxxxx.amplifyapp.com <-- アプリケーションがデプロイされた URL発行された URL にアクセスできればデプロイは成功です！
あとかたづけ
バックエンドが残っている状態では、ごく僅かではありますが費用が発生します。アプリケーションの検証が終わったら、以下のコマンドを発行し、バックエンドを全て削除します。
amplify deleteいくつか質問をされますが、全てデフォルトを選択します。
まとめ
いかがでしたでしょうか ? Amplify と Pinpoint を用いることで、非常に少ない工数でユーザー分析基盤を構築できることがお分りいただけたと思います。
Pinpoint には今回ご紹介した機能以外にも、特定のニーズに合った対象者セグメントに対し Email や SMS、Push 通知、Voice メールを使ったキャンペーンメッセージを届けると行った機能もあります。
Pinpoint についてもっと知りたい！という方は、AWS が提供する Amazon Pinpoint Workshop にもチャレンジしてみてください！
筆者プロフィール
水馬 拓也 (みずま たくや)
アマゾン ウェブ サービス ジャパン合同会社
プロトタイピング ソリューションアーキテクト
2018 年に OPEN した AWS Loft Tokyo が好きすぎて毎日通っていたら、いつの間にか AWS に入社していました。普段はプロトタイピング SA としてお客様のアーキテクティング & プロトタイピングの支援をしております。
好きな AWS サービスは AWS Amplify。好きな言語は Javascript。好きなライブラリは React。趣味は週末の草野球とランニング。
AWS を無料でお試しいただけます