---
title: "Mapp Engage"
slug: "mapp-engage-react-next"
updated: 2025-03-28T12:25:46Z
published: 2025-03-28T12:25:46Z
canonical: "docs.mapp.com/mapp-engage-react-next"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mapp Engage

## 1 Overview

This page explains how to integrate Mapp Engage with tracking setups to send user-specific data to Engage for personalized marketing. You can transmit attributes and trigger events in real-time to enrich customer profiles and activate automation flows.

Use cases include:

- **Send dynamic user attributes** to Mapp Engage, such as preferences or behavior (e.g., "Size Finder used") for improved segmentation and targeting.
- **Trigger a Custom Web Event** when a user interacts with a specific feature (e.g., virtual fitting room), which can initiate an automation workflow in Engage.

For successful integration, **User Matching** with Mapp Engage must be enabled.

---

## 2 Configurable Properties

| Property | Description | Data Type | Request Parameter |
| --- | --- | --- | --- |
| attributes | Sends user-specific data to Mapp Engage, which can be stored as Custom Profile Attributes. These attributes can be created and managed in Engage. | Object | `eaj` |
| eventName | Defines the name of the Engage Custom Web Event (e.g. "Size Finder Used"). This can trigger automations in the Whiteboard. | String | `ecwen` |
| eventId | Alternative to eventName. Refers to the Engage Custom Web Event ID as defined in Engage. Mostly used for advanced setups. | Number | `ecwei` |

---

## 3 Implementation Example

```javascript
import { WebtrekkSmartPixelReact, WebtrekkEngageData } from "@webtrekk-smart-pixel/react";
```

```javascript
import { WebtrekkSmartPixelReact, WebtrekkEngageData } from "@webtrekk-smart-pixel/next";
```

> [!NOTE]
> If you do not have [automatic page tracking](/v1/docs/react-next-installation-and-integration) enabled, invoke the [track](/v1/docs/react-next-track) method after adding all relevant tracking information.

```javascript
WebtrekkSmartPixelReact.engage({
    attributes: { "engage.attribute.fittingToolUsed": "true" },
    eventName: "Virtual Fitting Room Used",
    eventId: 12345
});
```

> [!NOTE]
> If you do not have [automatic page tracking](/v1/docs/react-next-installation-and-integration) enabled, invoke the [track](/v1/docs/react-next-track) method after adding all relevant tracking information.

```javascript
render()
{
    return (
        <div>
            <WebtrekkEngageData
                attributes={ {"engage.attribute.fittingToolUsed": "true"} }
                eventName="Virtual Fitting Room Used"
                eventId=12345
            />
        </div>
    );
}
```

A **Request Parameter** displays the name of the parameter included in a tracking request. This information is crucial for debugging purposes (e.g., via **Mapp Cloud Debugger**), allowing you to verify the data transmitted to Mapp and understand how it is recorded.