> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-interaction-logger.md).

# GM - Interaction Logger

## **Documentation**

**GM - Interaction Logger** component is a utility component that tracks user interactions from a UI perspective. Enabling [User Interactions](/advanced-guides/grid-admin-cockpit.md#adoption-dashboard) is a prerequisites to use the logger.

**Use case:** Track the page load for a specific app or a specific audience (User, Profile)[**.**](/product-tour/compact-calendar.md) The logger can be used from the app build or from a Lightning component (Aura/LWC).

## **Specification**

<table data-full-width="true"><thead><tr><th width="170">Property</th><th width="121.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>Message</td><td>String</td><td><p>JSON Message structure to track, ensure it includes the following elements:</p><ul><li><strong>eventType:</strong> Event type. should be set to '<strong>Interaction</strong>'.  Other event types will be added in the future.</li><li><strong>interactionName:</strong> Interaction name</li><li><strong>interactionLabel:</strong> Interaction label</li><li><strong>componentType:</strong> Component type.</li><li><strong>componentName:</strong> Component name.</li><li><strong>componentLabel:</strong> Component label.</li><li><strong>namespacePrefix:</strong> Namespace prefix. </li></ul></td></tr></tbody></table>

{% hint style="info" %}
The namespace prefix is useful to track interactions for custom/managed components and being able to filter per package.
{% endhint %}

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="interactionLoggerLWC.js-meta.xml" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>GM - Interaction Logger</masterLabel>
    <description>GM - Interaction Logger</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
            <property
                name="jsonMessage"
                type="String"
                label="Message"
                description="JSON Message to track. The message should have an eventType, componentType, componentName, componentCode, componentLabel, interactionName, interactionLabel and namespacePrefix "
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```

{% endtab %}
{% endtabs %}

## LWC Implementation

To leverage the interaction logger in your LWC component, the logger should be wrapped in the markup as below:

```html
<gmpkg-interaction-logger-l-w-c lwc:ref="interactionLogger">
</gmpkg-interaction-logger-l-w-c>
```

The interaction logger exposes a public api **publishEvent.** To publish an event, just call the api and pass the message payload as  a JSON object.

```javascript
logInteraction(actionName, actionLabel) {
    let interactionLogger = this.refs.interactionLogger;
    
    if(interactionLogger){
        interactionLogger.publishEvent({
            eventType: 'Interaction',
            componentType: 'GM_FieldSetGrid',
            componentName: 'Opp_FieldSet_Grid',
            componentLabel: 'Open Opportunities',
            interactionName: actionName,
            interactionLabel: actionLabel,
            namespacePrefix: 'gmpkg'
        });
    }
}
```