Menu
Menu Sheet Overlay
Search
Search Sheet

Custom Events

    Let’s assume you have a component that displays different messages to the user at random, and you would like to track how many times each message has been displayed to users. Here’s an example of how you could track this:

    Create a custom analytics action

    First, we need to create an analytics action that collects all the information we need to build this analytics event. Since the message displayed is chosen at random, we will need the message.

    import {createActionWithAnalytics} from 'progressive-web-sdk/dist/utils/action-creation'
    
    export const sendRandomMessageAnalytics = createActionWithAnalytics(
        'Send random message analytics',
        [],
        'randomMessage',            // function name in your Analytics Connector + 'Event'
        (message) => ({message})    // The payload to randomMessageEvent function
    )
    

    Dispatch the custom analytics action

    Let’s assume that the user will see the message when this component mounts.

    import {sendRandomMessageAnalytics} from '../utils/analytics/actions'
    
    class ProductListContents extends React.Component {
        componentWillMount() {
            this.props.sendRandomMessageAnalytics(this.props.message)
        }
        ...
    }
    
    const mapDispatchToProps = {
        sendRandomMessageAnalytics
    }
    ...
    

    Receive the custom analytics event in your analytics connector

    Add a randomMessageEvent function override to your analytics connector.

        import GoogleTagManager from 'progressive-web-sdk/dist/analytics/connectors/google-tag-manager/connector'
    
        export default class MyGTM extends GoogleTagManager {
            constructor() {
                super('My GTM', 'GTM-#######')
            }
    
    +        randomMessageEvent(payload, state) {
    +            // Shape given arugments to the expected format that
    +            // the analytic platform requires
    +        }
        }
    

    The payload will have the following structure:

    payload = {
        message
    }