A. Tikale
- Mar 28
- 3 min read

MONITOR COMPONENT EVENTS WITH THE CUSTOM COMPONENT INSTRUMENTAL API

Hey Learners! This Spring '24 release of Salesforce introduces significant enhancements for developers, particularly with the Custom Component Instrumentation API. To use Monitor Component Events with the Custom Component Instrumentation API, administrators must navigate to Event Monitoring Settings within Setup, activate Lightning Logger Events, and then utilize the log function from the lightning/logger module within components. This process enables the publishing of data to the new EventLogFile event type, Lightning Logger Event, for integration with Event Monitoring.

This Salesforce guide outlines tracking feedback form submissions. It involves enabling Lightning Logger Events, creating a `feedbackForm` LWC with logging capabilities, and capturing submission details. Users can then download event logs via the ELF Browser, gaining insights into user engagement through submit button interactions.

Use Case

Tracking Button Clicks in a Feedback Form

Let's see a scenario where you have a feedback form in your Salesforce application with a submit button. You want to track how often users click the submit button, along with some context like the time of the click and the user's ID.

Step: 1

From Setup, in the Quick Find box, enter the event, and then select Event Monitoring Settings.
Turn on Lightning Logger Events.

Step: 2

Component Setup:

Create a Lightning web component named feedbackForm.
In the component, include a form with input fields and a submit button. Logging Setup:
Import the log function from lightning/logger.
Implement a method to log data when the submit button is clicked. Log Data:
Capture relevant information like the user ID, timestamp, and action.

feedbackForm.html

<template>
    <lightning-card title={label.TITLE} icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input label={label.YOUR_FEEDBACK} name={label.FEEDBACK_NAME} onchange={handleChange}></lightning-input>
            <br>
            <lightning-button label={label.SUBMIT} title={label.SUBMIT} onclick={handleSubmit} class="slds-m-top_small"></lightning-button>
        </div>
    </lightning-card>
</template>

feedbackForm.js

import {LightningElement, track} from 'lwc';
import {log} from 'lightning/logger';
import userId from '@salesforce/user/Id';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import TITLE from '@salesforce/label/c.TITLE';
import YOUR_FEEDBACK from '@salesforce/label/c.YOUR_FEEDBACK';
import FEEDBACK_NAME from '@salesforce/label/c.FEEDBACK_NAME';
import SUBMIT from '@salesforce/label/c.SUBMIT';
import FEEDBACK_SUBMISSION from '@salesforce/label/c.FEEDBACK_SUBMISSION';
import FEEDBACK_SUCCESS from '@salesforce/label/c.FEEDBACK_SUCCESS';
import SUCCESS from '@salesforce/label/c.SUCCESS';


export default class FeedbackForm extends LightningElement {
    label = {
        TITLE,
        YOUR_FEEDBACK,
        FEEDBACK_NAME,
        FEEDBACK_SUBMISSION,
        FEEDBACK_SUCCESS,
        SUCCESS,
        SUBMIT
    };
    @track feedback = '';


    handleChange(event) {
        this.feedback = event.target.value;
    }


    handleSubmit() {
        let logData = {
            type: this.label.FEEDBACK_SUBMISSION,
            userId: userId,
            timestamp: new Date().toISOString(),
            feedback: this.feedback
        };
        log(logData);
        this.dispatchEvent(
            new ShowToastEvent({
                title: this.label.SUCCESS,
                message: this.label.FEEDBACK_SUCCESS,
                variant: 'success'
            })
        );
    }
}

Download and Visualize Event Log Files:

Log in to your org.
Navigate to the ELF Browser application.
Click Production Login.
Enter a date range for your search.
Enter an event type for your search.
Enter an interval (daily or hourly).
Click Apply.

Click the button in Lightning Logger to download a log to a comma-separated values (.csv) file. Each file contains all the events of a particular type that occurred in your organization in the past 24 hours.
Download the log file. Open it in a spreadsheet
This entry tells us the event type (type), the user ID (userId), and specific details about the event under the details key, such as feedback type and feedback that the user submits after clicking on the submit button.
To effectively track user interactions across multiple buttons within Salesforce. For every button you wish to monitor, attach the log function directly to its onclick event, ensuring to pass essential information such as the button's unique identifier, the user's ID, and the timestamp of the interaction. This methodical approach enables the capture of detailed user activity data, facilitating comprehensive analysis of user engagement patterns and button usage within the application.

Conclusion

In this example, when the user fills out the feedback form and clicks the submit button, the handleSubmit method is invoked. This method captures the user's feedback, their ID, and the current timestamp, and logs this information using the log function. This data will then be available in the Salesforce Event Monitoring system for analysis.

This use case demonstrates how you can use the Custom Component Instrumentation API to track user interactions in a meaningful way, providing insights that can help in understanding user behavior, improving the application, and making data-driven decisions.

If you'd like to see the code and resources used in this project, you can access the repository on GitHub.To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a reference for your projects.

Thank You! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.

Reference

Blog Credit:

A. Tikale

Salesforce Developer

Avenoir Technologies Pvt. Ltd.

Reach us: team@avenoir.ai

Are you in need of Salesforce Developers?

Reach Us Now!

Click Here

Let's Build Your Project