やったこと
- Webアプリケーションのユーザ離脱数をCloudWatchカスタムメトリクスとして取得する
- ユーザ離脱は、ユーザが異なるページに遷移しようとする「beforeunload」イベントを監視することで簡易的に検知
- 「beforeunload」イベント発生時に、正常に漏れなくCloudWatchにデータを送信できるよう、Beacon APIを使用する。
構成図
バックエンド
一般的なAPI GatewayとLambdaの構成をとる。
API GatewayにPOSTメソッドを作成し、LambdaプロキシでLambdaと紐づける。
Lambdaにはデフォルト権限に加えて「cloudwatch:PutMetricData」権限を付与する。
{
"Effect": "Allow",
"Action": "cloudwatch:PutMetricData",
"Resource": "*"
}
ソースコードは以下の通り。
index.js
import { CloudWatchClient, PutMetricDataCommand } from "@aws-sdk/client-cloudwatch";
const cloudwatch = new CloudWatchClient({ region: 'ap-northeast-1'});
export const handler = async (event) => {
try {
const data = JSON.parse(event.body);
const params = {
MetricData: [
{
MetricName: data.MetricName,
Dimensions: data.Dimensions,
Value: data.Value,
Unit: 'Count'
}
],
Namespace: 'UserWithdrawalDetection'
};
const command = new PutMetricDataCommand(params);
await cloudwatch.send(command);
return {
statusCode: 200,
body: JSON.stringify({
msessage: 'Success',
})
};
} catch (error) {
console.log("Error", error) ;
return {
statusCode: 500,
body: JSON.stringify({
msessage: 'Failed',
})
};
}
};
フロントエンド（React on S3）
簡易検証のため、srcディレクトリに以下のコンポーネントファイルを配置。
endpointは作成したAPI Gatewayのエンドポイントに書き換える。
app.js
import './App.css'
import Home from './Home'
import About from './About'
import MyPage from './MyPage'
import UserWithdrawalDetectionComponent from './UserWithdrawalDetectionComponent'
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
function App() {
UserWithdrawalDetectionComponent((event) => {
const pageUrl = window.location.href
const data = {
MetricName: 'PageUnload',
Dimensions: [
{
Name: 'PageUrl',
Value: pageUrl,
},
],
Value: 1,
}
// endpointは作成したAPI Gatewayのエンドポイントに書き換える
const endpoint =
'https://xxx.execute-api.ap-northeast-1.amazonaws.com/Prd/collect-metrics'
// Becon APIを利用して、データをバックエンド（API Gateway+Lambda）に送付
navigator.sendBeacon(endpoint, JSON.stringify(data))
// 検証のため、タブクローズ時に、アサーションを出している
event.preventDefault()
event.returnValue = 'Are you sure you want to leave?'
})
return (
<>
<div className="App">
<BrowserRouter>
<Link to="/">Home</Link> | <Link to="/about">About</Link>|{' '}
<Link to="/myPage">MyPage</Link>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/myPage" element={<MyPage />} />
<Route path="*" element={<h1>Not Found Page</h1>} />
</Routes>
</BrowserRouter>
</div>
</>
)
}
export default App
Home.js
import React from 'react'
const Home = () => {
return <h1>Home</h1>
}
export default Home
Home.js
import React from 'react'
const Home = () => {
return <h1>Home</h1>
}
export default Home
MyPage.js
import React from 'react'
const MyPage = () => {
return <h1>MyPage</h1>
}
export default MyPage
About.js
import React from 'react'
const About = () => {
return <h1>About</h1>
}
export default About
UserWithdrawalDetectionComponent.js
import { useEffect } from 'react'
const UserWithdrawalDetectionComponent = (callback) => {
useEffect(() => {
window.addEventListener('beforeunload', callback)
return () => {
window.removeEventListener('beforeunload', callback)
}
}, [callback])
}
export default UserWithdrawalDetectionComponent
ローカルでnpm run buildコマンドを実行して、生成されたbuildディレクトリ内のファイル、フォルダをS3に配置する。
S3は静的Webホスティング機能を使用する。
動作確認
Webアプリケーションにアクセスし、ページごとにタブを閉じる、キャンセルを繰り返す。
この裏側で、どのページでサイトを閉じたのかの情報をCloudWatchに送っている。
CloudWatchメトリクスの確認。
ページURLをディメンションとして、カスタムメトリクスが作成されている。
ダッシュボードにて期間内のページごとのユーザ離脱数を可視化してみる。
値は各ディメンションごとの合計値を算出している。
最後に
ユーザ離脱率を取得しましたが、加えてユーザアクセス数も取得することでユーザ離脱率まで簡単に取得できそうですね。
サードパーティツールやAWS Pinpointを使用することで簡単に離脱率は取得できますが、そこまでリッチな機能はいらないといったケースでは有効活用できそうです。