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.
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:
1Analytics.autoTrack('session', {2 // REQUIRED, turn on/off the auto tracking3 enable: true,4 // OPTIONAL, the attributes of the event, you can either pass an object or a function5 // which allows you to define dynamic attributes6 attributes: {7 attr: 'attr'8 },9 // when using function10 // attributes: () => {11 // const attr = somewhere();12 // return {13 // myAttr: attr14 // }15 // },16 // OPTIONAL, the service provider, by default is the Amazon Pinpoint17 provider: 'AWSPinpoint'18});
When the page is loaded, the Analytics module will send an event to the Amazon Pinpoint Service.
1{2 eventType: '_session_start',3 attributes: {4 attr: 'attr'5 }6}
To keep backward compatibility, the auto tracking of the session is enabled by default. You can turn it off by:
1Analytics.configure({2 // OPTIONAL - Allow recording session events. Default is true.3 autoSessionRecord: false4});
or
1Analytics.autoTrack('session', {2 enable: false3});4
5// Note: this must be called before Amplify.configure() or Analytics.configure() to cancel the session_start event
Page View Tracking
If you want to track which page/url in your webapp is the most frequently viewed one, you can use this feature. It will automatically send events containing url information when the page is visited.
To turn it on:
1Analytics.autoTrack('pageView', {2 // REQUIRED, turn on/off the auto tracking3 enable: true,4 // OPTIONAL, the event name, by default is 'pageView'5 eventName: 'pageView',6 // OPTIONAL, the attributes of the event, you can either pass an object or a function7 // which allows you to define dynamic attributes8 attributes: {9 attr: 'attr'10 },11 // when using function12 // attributes: () => {13 // const attr = somewhere();14 // return {15 // myAttr: attr16 // }17 // },18 // OPTIONAL, by default is 'multiPageApp'19 // you need to change it to 'SPA' if your app is a single-page app like React20 type: 'multiPageApp',21 // OPTIONAL, the service provider, by default is the Amazon Pinpoint22 provider: 'AWSPinpoint',23 // OPTIONAL, to get the current page url24 getUrl: () => {25 // the default function26 return window.location.origin + window.location.pathname;27 }28});
Page Event Tracking
If you want to track user interactions with elements on the page, you can use this feature. All you need to do is attach the specified selectors to your dom element and turn on the auto tracking.
To turn it on:
1Analytics.autoTrack('event', {2 // REQUIRED, turn on/off the auto tracking3 enable: true,4 // OPTIONAL, events you want to track, by default is 'click'5 events: ['click'],6 // OPTIONAL, the prefix of the selectors, by default is 'data-amplify-analytics-'7 // in order to avoid collision with the user agent, according to https://www.w3schools.com/tags/att_global_data.asp8 // always put 'data' as the first prefix9 selectorPrefix: 'data-amplify-analytics-',10 // OPTIONAL, the service provider, by default is the Amazon Pinpoint11 provider: 'AWSPinpoint',12 // OPTIONAL, the default attributes of the event, you can either pass an object or a function13 // which allows you to define dynamic attributes14 attributes: {15 attr: 'attr'16 }17 // when using function18 // attributes: () => {19 // const attr = somewhere();20 // return {21 // myAttr: attr22 // }23 // }24});
For example:
1<!-- you want to track this button and send an event when it is clicked -->2<button3 data-amplify-analytics-on="click"4 data-amplify-analytics-name="click"5 data-amplify-analytics-attrs="attr1:attr1_value,attr2:attr2_value"6/>
When the button above is clicked, an event will be sent automatically. This is equivalent to doing:
1<script>2 var sendEvent = function() {3 Analytics.record({4 name: 'click',5 attributes: {6 attr: 'attr', // the default ones7 attr1: attr1_value, // defined in the button component8 attr2: attr2_value // defined in the button component9 }10 });11 };12</script>13<button onclick="sendEvent()" />