Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Apr 29, 2024

Automatically track sessions

Analytics Auto Tracking helps you to automatically track user behaviors like sessions start/stop, page view change and web events like clicking or mouseover.

The Auto Tracking feature is only supported when you have Amazon Pinpoint configured for Amplify Analytics.

Session Tracking

You can track the session both in a web app or a React Native app by using Analytics. A web session can be defined in different ways. To keep it simple we define a web session as being active when the page is not hidden and inactive when the page is hidden. A session in a React Native app is active when the app is in the foreground and inactive when the app is in the background.

For example:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
// REQUIRED, turn on/off the auto tracking
enable: true,
// REQUIRED, the event type, it's one of 'event', 'pageView' or 'session'
type: 'session',
// OPTIONAL, additional options for the tracked event.
options: {
// OPTIONAL, the attributes of the event
attributes: {
customizableField: 'attr'
}
}
});

By default, when the page/app transitions to the foreground, the Analytics module will send an event to the Amazon Pinpoint Service.

{
"eventType": "_session_start",
"attributes": {
"customizableField": "attr"
}
}

This behavior can be disabled by calling configureAutoTrack:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
enable: false,
type: 'session'
});

Page View Tracking

Use this feature to track the most frequently viewed page/url in your webapp. It automatically sends events containing url information when a page is visited.

This behavior can be enabled by calling configureAutoTrack:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
// REQUIRED, turn on/off the auto tracking
enable: true,
// REQUIRED, the event type, it's one of 'event', 'pageView' or 'session'
type: 'pageView',
// OPTIONAL, additional options for the tracked event.
options: {
// OPTIONAL, the attributes of the event
attributes: {
customizableField: 'attr'
},
// OPTIONAL, the event name. By default, this is 'pageView'
eventName: 'pageView',
// OPTIONAL, the type of app under tracking. By default, this is 'multiPageApp'.
// You will need to change it to 'singlePage' if your app is a single-page app like React
appType: 'multiPageApp',
// OPTIONAL, provide the URL for the event.
urlProvider: () => {
// the default function
return window.location.origin + window.location.pathname;
}
}
});

This behavior can be disabled by calling configureAutoTrack:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
enable: false,
type: 'pageView'
});

Page Event Tracking

Use this type of tracking to track user interactions with specific elements on a page. Just attach the specified selectors to your DOM element and turn on the auto tracking.

This behavior can be enabled by calling configureAutoTrack:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
// REQUIRED, turn on/off the auto tracking
enable: true,
// REQUIRED, the event type, it's one of 'event', 'pageView' or 'session'
type: 'event',
// OPTIONAL, additional options for the tracked event.
options: {
// OPTIONAL, the attributes of the event
attributes: {
customizableField: 'attr'
},
// OPTIONAL, events you want to track. By default, this is 'click'
events: ['click'],
// OPTIONAL, the prefix of the selectors. By default, this is 'data-amplify-analytics-'
// Per https://www.w3schools.com/tags/att_global_data.asp, always start
// the prefix with 'data' to avoid collisions with the user agent
selectorPrefix: 'data-amplify-analytics-'
}
});

For example:

<!-- you want to track this button and send an event when it is clicked -->
<button
data-amplify-analytics-on="click"
data-amplify-analytics-name="click"
data-amplify-analytics-attrs="attr1:attr1_value,attr2:attr2_value"
/>

When the button above is clicked, an event will be sent automatically. This is equivalent to doing:

<script>
import { record } from 'aws-amplify/analytics';
var sendEvent = function() {
record({
name: 'click',
attributes: {
attr: 'attr', // the default ones
attr1: attr1_value, // defined in the button component
attr2: attr2_value // defined in the button component
}
});
};
</script>
<button onclick="sendEvent()" />

This behavior can be disabled by calling configureAutoTrack:

import { configureAutoTrack } from 'aws-amplify/analytics';
configureAutoTrack({
enable: false,
type: 'event'
});

Note: Amplify doesn't capture the location automatically. Instead, you can add the location information in the default config when you configure Analytics or while updating the end point.