# Vero Web Device Mode Integration

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

## Identify

The [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) call lets you identify a user and associate them to their actions. It also lets you record any traits about them like their name, email, etc.

A sample `identify` call is shown below:

```javascript
rudderanalytics.identify("1hKOmRA4GRlm", {
  "email": "alex@example.com",
  "gender": "Male",
  "randomKey": "randomData"
})
```

### Supported mappings

The following table lists the mapping of the RudderStack traits to the corresponding Vero properties:

| RudderStack trait | Vero property | Presence |
| :-----| :------| :-------|
| `userId`/`anonymousId` | `id` | Required. |
| `email` | `email` | Optional |
| `context.traits`/`traits` | `traits` |  Optional |

{{< info >}}
`email` is an optional field. However, if it is absent, Vero will not be able to send any emails to the user, so it is recommended to have this trait in the event.
{{< /info >}}

{{< info >}}
If `userId` is absent, RudderStack maps `anonymousId` to Vero's `id` field to create or update the user.
{{< /info >}}

## Track

The [`track`]({{< ref "event-spec/standard-events/track.md" >}}) call lets you capture user events along with the properties associated with them.

{{< warning >}}
You need to first create a user by explicitly calling `identify` before making any `track` calls to Vero. Otherwise, the `track` calls will fail.
{{< /warning >}}

A sample `track` event is as shown:

```javascript
rudderanalytics.track("Product Viewed", {
  SKU: "P001",
  "revenue": 77.6,
  "currency": "USD",
  "review_id": "R1619" 
})
```

{{< info >}}
Vero API does not differentiate between the upper or lower case letters, spaces, and underscores in the event names. For example, Vero matches the `Purchased Item`, `purchased item`, and `purchased_item` as the same event.
{{< /info >}}

### Supported mappings

The following table lists the mapping of the RudderStack properties to the corresponding Vero properties:

| RudderStack property | Vero property | Presence |
| :-----| :------| :-------|
| `event`  | `event_name` | Required |
| `properties` | `data` | Optional |

### Unsubscribing and resubscribing users

RudderStack supports unsubscribing and resubscribing users in Vero by passing the `userId` in the `track` call:

```javascript
rudderanalytics.track("unsubscribe", {
  userId: "1hKOmRA4el9Zt1WSfVJIVo4GRlm"
})
```

## Page

The [`page`]({{< ref "event-spec/standard-events/page.md" >}}) call lets you record your website's page views with any additional relevant information about the viewed page.

A sample `page` call is shown below:

```javascript
rudderanalytics.page(
  "Cart",
  "Cart Viewed", {
    path: "/best-seller/1",
    referrer: "https://www.google.com/search?q=estore+bestseller",
    search: "estore bestseller",
    title: "The best sellers offered by EStore",
    url: "https://www.estore.com/best-seller/1"
  }
);
```

## Alias

RudderStack sends the [`alias`]({{< ref "event-spec/standard-events/alias.md" >}}) events to change a user's identifier (`id`) in Vero.

A sample `alias` call is shown below:

```javascript
rudderanalytics.alias("userId", "previousId");
```

### Supported mappings

The following table lists the mapping of the RudderStack properties to the corresponding Vero properties:

| RudderStack property | Vero property | Presence |
| :-----| :------| :-------|
| `userId` | `new_id` | Required |
| `previousId` | `id` | Required |

## Adding and removing tags

RudderStack supports adding and removing `tags` to all `identify`, `track`,  and `page` calls by passing them via the `integrations` object. An example snippet is shown below:

```javascript
rudderanalytics.identify(
  "1hKOmRA4GRlm", {
    email: "alex@example.com"
  }, {
    integrations: {
      Vero: {
        tags: {
          add: ["tag1", "tag2"],
          remove: ["tag3"]
        }
      }
    }
  }
);
```

You can then view the updated tags associated with that user in the Vero dashboard:

{{< image src="images/event-stream-destinations/vero-tags.webp" alt="User tags in Vero dashboard" >}}