# Iterable Web Device Mode Integration

RudderStack lets you send your event data to Iterable via [device mode]({{< ref "destinations/rudderstack-connection-modes.md#device-mode" >}}) using the native web SDK.

{{< success >}}
You can use this connection mode to dynamically send web in-app messages to your customers along with customized push notifications.
{{< /success >}}

Find the open source JavaScript SDK code for this destination in the <a href="https://github.com/rudderlabs/rudder-sdk-js/tree/develop/packages/analytics-js-integrations/src/integrations/Iterable">GitHub repository</a>.

## Identify

For the [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) call, RudderStack uses either <a href="https://github.com/Iterable/iterable-web-sdk#initialize">Iterable's `setEmail` or `setUserId` method</a> to identify a given user. You can configure this using the [Identifier to identify a user over a session]({{< ref "destinations/streaming-destinations/iterable/setting-up-iterable.md#web-sdk-settings" >}}) setting in the RudderStack dashboard.

{{< info >}}
Making an `identify` call is necessary to associate the `track` events and trigger the web push notifications for an identified user.
{{< /info >}}

{{< info >}}
By default, RudderStack prioritizes `email` over `userId`.
{{< /info >}}

A sample `identify` call is shown below:

```javascript
rudderanalytics.identify("", {
    "email": "alex@example.com"
},{ "integrations": {
    "ITERABLE": {
        "jwt_token" : "<YOUR_JWT_TOKEN>"
    }
}})
```

When you call `identify`, RudderStack initializes the SDK using the `email`/`userId` and the JWT token from the `integrations` object.

{{< warning >}}
RudderStack **does not** generate JWT tokens automatically on the users' behalf to initialize the Iterable web SDK for security reasons. You need to set a specific authorization logic within your web app to generate a JWT before you can start making requests using the SDK.

To generate the JWT token for initializing the Iterable web SDK, see the [Iterable support page](https://support.iterable.com/hc/en-us/articles/360050801231-JWT-Enabled-API-Keys-#sample-python-code-for-jwt-generation).
{{< /warning >}}

## Track

RudderStack supports the following three types of [`track`]({{< ref "event-spec/standard-events/track.md" >}}) events in web device mode:

### Purchase events

You can map certain `track` events to Iterable's purchase events ([API reference](https://api.iterable.com/api/docs#commerce_trackPurchase)) by specifying them in the [Mapping to trigger the purchase events]({{< ref "destinations/streaming-destinations/iterable/setting-up-iterable.md#web-sdk-settings" >}}) setting of the RudderStack dashboard:

{{< image src="images/event-stream-destinations/iterable-purchaseevents.webp" alt="Iterable connection settings" >}}

A sample `track` call for a purchase event is shown below:

```javascript
rudderanalytics.track("purchase event", {
  checkout_id: "12345",
  order_id: "1234",
  affiliation: "Apple Store",
  total: 20,
  revenue: 15.0,
  shipping: 22,
  tax: 1,
  discount: 1.5,
  coupon: "ImagePro",
  currency: "USD",
  products: [{
      product_id: "123",
      sku: "G-15",
      name: "Chess",
      price: 14,
      quantity: 1,
      category: "Games",
      url: "https://www.mywebsite.com/product/path",
      image_url: "https://www.mywebsite.com/product/path.jpg",
    }
  ],
})
```

The following table lists the mappings between the RudderStack event properties and the Iterable properties in case of the purchase events:

| RudderStack property | Iterable property |
| :--------------| :---------|
| `properties.name` <br/> <span style="color: #4D4DFF;font-size:12px;">Required</span> | `items[].name` |
| `properties.order_id` <br/> `properties.checkout_id` <br/> <span style="color: #4D4DFF;font-size:12px;">Required</span> | `id` |
| `properties.total` <br/> <span style="color: #4D4DFF;font-size:12px;">Required</span> | `total` |
| `properties.product_id` | `items[].id` |
| `properties.sku` | `items[].sku` |
| `properties.price` | `items[].price` |
| `properties.quantity` | `items[].quantity` |
| `properties.image_url` | `items[].url` |

The above properties can be passed in any of the following ways:
- `properties` object (for a single product), as shown in the above table.
- `products` array as multiple objects (for multiple products), for example, `properties.products[0].name`. One example where you can have an array of products is the [Order Completed]({{< ref "event-spec/ecommerce-events-spec/ordering.md#order-completed" >}}) event.

### `getInAppMessages` events

You can send this type of `track` events to track the users in-app activities and accordingly display pop-up messages and push notifications for them. The below image shows an example of a web push notification:

{{< image src="images/event-stream-destinations/web-push-notifications-iterable.webp" alt="Iterable connection settings" >}}

You can also customize the display configuration for the push notifications using the [In-app message settings]({{< ref "destinations/streaming-destinations/iterable/setting-up-iterable.md#in-app-message-settings" >}}) in the RudderStack dashboard.

{{< info >}}
In case multiple `getInAppMessages` events are triggered, the SDK delivers all queued in-app notifications.
{{< /info >}}

A sample `track` call mapped to Iterable's `getInAppMessages` events is shown below:

```javascript
rudderanalytics.track("trigger event",{})
```

### Custom events

RudderStack sends all `track` events that are not mapped to Iterable's purchase events or `getInAppMessages` events as custom events.

A sample custom `track` event is shown below:

```javascript
rudderanalytics.track(
  "custom event", {
    custom_id: "22222",
    name: "Some item",
    website_url: "http://www.exampledomain.com/products/some-item",
  })
```

The following table lists the mappings between the RudderStack event properties and the Iterable properties in case of the custom events:

| RudderStack property | Iterable property |
| :--------------| :---------|
| `event` <br/> <span style="color: #4D4DFF;font-size:12px;">Required</span> | `eventName` |
| `userId` <br/> <span style="color: #4D4DFF;font-size:12px;">Required, if email is not present.</span> | `userId` |
| `context.traits.email` <br/> <span style="color: #4D4DFF;font-size:12px;">Required, if userId is not present.</span> | `email` |
| `properties` | `dataFields` |