Monitor Your Web Apps With AWS Amplify Analytics

Learn how to capture user data with AWS Amplify

AWS Amplify is an excellent JavaScript SDK for setting up a cloud backend. But do you know you can use Amplify Analytics category along with AWS Amplify, to collect analytics data from your web app?

What is AWS Amplify Analytics?

AWS Amplify Analytics is another cool feature that Amplify offers on the fly. You can use Amplify Analytics to easily monitor usage patterns and get insights into your application.

With Amazon Pinpoint you can analyze user engagement, demographics, and other metrics. Let’s say I have an e-commerce app, I want to know which of my products are most popular. I can do that easily with AWS Amplify Analytics.

1. Add the Analytics provider that points to Amazon Pinpoint.
2. Update the code to record an Analytics event when the user views a product.
3. Use the filter option in the Amazon Pinpoint dashboard, to view the most clicked product details.

This is just one use case, Amazon Pinpoint offers many other features.

I could not find a complete demo on recording app events with AWS Amplify Analytics. So I decided to create one here.

Demo on AWS Amplify Analytics

I have already created a cool & simple dictionary app to get things started. Now you can use Analytics with React, Vue, or Angular. For this demo, I’ll use a React Typescript project.

1. Install Amplify CLI

If you haven’t already, you must install Amplify CLI to set up the backend. Open a terminal window and install the CLI using npm.

npm install -g @aws-amplify/cli

Then you need to run amplify configure. This will set up Amplify CLI. There you will set up a new IAM User. You will finish setting up your IAM user, by providing the accessKeyId and secretAccessKey for your IAM user.

If you are stuck at some point, you can refer to this original guideline on installing Amplify CLI (https://docs.amplify.aws/cli/start/install).

2. Clone front-end project

First clone the React Typescript project from the following GitHub repo.

✨ GitHub Simple English Dictionary App — https://github.com/SahanAmarsha/simple-english-dictionary-app

git clone https://github.com/SahanAmarsha/simple-english-dictionary-app.git

Next, move into the project directory and install npm dependencies.

cd simple-english-dictionary-app
npm install

After installing npm dependencies, let’s run npm start to view our React app. The app will run on http://localhost:3000.

sample English dictionary app

3. Set up Analytics backend

Next, let's initialize the Amplify backend. Move into the project directory again and run the following command to initialize a new Amplify project.

amplify init

We’ll get promoted for a few configurations. Just accept the defaults, and we are good to go.

running ‘amplify init’ on the root directory

Now that we have initialized a new Amplify project. Next up, we need to add Amplify Analytics plugin to our local backend. Let’s run the following command and select configuration options for the Analytics category.

amplify add analytics

There we need to provide the Analytics provider and the resource name. Behind the scenes, Amplify will create IAM roles that authorize the app to send analytics events.

Add analytics category to backend

All those resources were added locally. Let’s deploy the backend to provision those resources in the cloud.

amplify push --y

creating resources after ‘amplify push’

4. Record word search event

My idea is to record an event when the user searches for a word. I thought it will be a fair use case for a dictionary app. Let’s do some coding.

First, we need to install the aws-amplify library and load the configuration file in our app.

npm install aws-amplify

Add the following lines of code in the root App.tsx or index.tsx file.

Now if we run our app using npm start, it should run without any errors. We can record a new search event when the user searches for a word. Let’s define a function in App.tsx to record a search event. Don’t forget to import the Analytics library too.

We need to call this recordWordInAnalytics() function, before calling the dictionary API. So call it inside the searchDefinitions() function, and pass the search input.

It’s just that simple, Amplify will take care of all the rest. Let’s re-run our app, and search words to record some Analytics events.

search words to record events

5. View events in the Amazon Pinpoint dashboard

In our final step, let’s view those events in the Amazon Pinpoint dashboard.

From the terminal, just run the following command, and the Amazon Pinpoint console will pop up in your browser.

amplify console analytics

Go to Analytics>Usage. Choose More Information, under the Filters section. Then choose Enable filters to view our recorded custom events.

enable filters

Then go to Analytics > Events > Filters. Choose WordSearched as the event type, and word as the attribute. You can choose an attribute value to see how many times it has been searched. I’ll choose hello as the event attribute value.

Now, if you can’t see that WordSearched event type as an option, just be patient, it may take around 20–30 minutes to appear this filter option for a custom event.

view how many times a word has been searched

Great! 🥳 Now we can track any user event using AWS Amplify Analytics.

Conclusion

We have done quite a few things in this article. We have configured our application with AWS Amplify Analytics and we recorded an analytics event.

🖥️ Github Project —https://github.com/SahanAmarsha/simple-english-dictionary-app

📃 AWS Amplify Docs — https://docs.amplify.aws/lib/analytics/getting-started/q/platform/js

📌 In the next article, let’s see how we can store analytics data in an S3 bucket, and display the most searched words in our web app. Till then, Happy Coding!