# Forward VTEX events to Croct

Automatically track VTEX store events and enrich user profiles.

This integration connects your [VTEX](https://vtex.com) store to Croct. Once set up, it automatically tracks your store's e-commerce events in Croct and enriches user profiles with your customers' data, so you can build audiences, run AB tests, and personalize the storefront with no extra development work.

It works with stores built with [Store Framework](https://developers.vtex.com/docs/guides/store-framework) (VTEX IO).

> **FastStore storefronts**
>
> [FastStore](https://developers.vtex.com/docs/guides/faststore) storefronts report their interactions as [GA4-style analytics events](https://www.faststore.dev/reference/sdk/analytics), which this integration does not listen to. If your storefront pushes those events to the data layer, use the [Google Tag Manager integration](/immersion/integrations/analytics/google-tag-manager) instead.

## How it works

The integration listens to the events your store already broadcasts and forwards them to Croct.

For each supported event, it does the following:

- **Records a conversion** as a [goal completed](/reference/event/types/engagement/goal-completed) event, so every interaction is available for targeting and analysis.
- **Tracks the matching Croct event** when the payload carries the details of the interaction, such as a product view or an order.
- **Enriches the user profile** when the payload carries customer data.

### Conversions

The goal ID is derived from the VTEX event name: the `vtex:` namespace is dropped, the camel case name is converted to kebab case, and the result is prefixed with `vtex-`. For example, `vtex:productView` becomes `vtex-product-view`.

These goals power [experiences](/explanation/experience/introduction) and [experiments](/explanation/experiment), letting you target each one directly when building audiences and analyzing [experience](/reference/analytics/experience/overview) or [experiment](/reference/analytics/experiment/overview) dashboards.

### Event mapping

The integration maps VTEX store events to our [e-commerce](/reference/event/types/ecommerce) and [engagement](/reference/event/types/engagement) events:

| VTEX event                | Croct event                                                            |
| ------------------------- | ---------------------------------------------------------------------- |
| `vtex:productView`        | [`productViewed`](/reference/event/types/ecommerce/product-viewed)     |
| `vtex:cart`               | [`cartModified`](/reference/event/types/ecommerce/cart-modified)       |
| `vtex:cartLoaded`         | [`cartModified`](/reference/event/types/ecommerce/cart-modified)       |
| `vtex:cartChanged`        | [`cartModified`](/reference/event/types/ecommerce/cart-modified)       |
| `vtex:addToCart`          | [`cartModified`](/reference/event/types/ecommerce/cart-modified)       |
| `vtex:removeFromCart`     | [`cartModified`](/reference/event/types/ecommerce/cart-modified)       |
| `vtex:viewCart`           | [`cartViewed`](/reference/event/types/ecommerce/cart-viewed)           |
| `vtex:beginCheckout`      | [`checkoutStarted`](/reference/event/types/ecommerce/checkout-started) |
| `vtex:orderPlaced`        | [`orderPlaced`](/reference/event/types/ecommerce/order-placed)         |
| `vtex:orderPlacedTracked` | [`orderPlaced`](/reference/event/types/ecommerce/order-placed)         |
| `vtex:search`             | [`eventOccurred`](/reference/event/types/engagement/event-occurred)    |
| `vtex:addToWishlist`      | [`eventOccurred`](/reference/event/types/engagement/event-occurred)    |
| `vtex:userData`           | -                                                                      |
| `vtex:login`              | -                                                                      |
| `vtex:signUp`             | -                                                                      |
| `vtex:addPaymentInfo`     | -                                                                      |
| `vtex:addShippingInfo`    | -                                                                      |
| `vtex:promoView`          | -                                                                      |
| `vtex:promotionClick`     | -                                                                      |

The `eventOccurred` events carry a few relevant details from the source event:

| VTEX event           | Event name             | Tracked details                              |
| -------------------- | ---------------------- | -------------------------------------------- |
| `vtex:search`        | `vtex-search`          | `searchTerm`                                 |
| `vtex:addToWishlist` | `vtex-add-to-wishlist` | `id`, `name`, `category`, `brand`, `variant` |

Events without a dedicated Croct event are tracked as conversions only.

For the details of each source event, see the [VTEX store events documentation](https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps).

> **Duplicate order events**
>
> VTEX reports a purchase more than once, but the integration tracks the order only once, so revenue is never counted twice.

### Profile enrichment

The integration also uses VTEX customer data to enrich the [user profile](/reference/user/overview) with [standard attributes](/reference/user/standard-attributes):

| VTEX event                                    | Enriched attributes                             |
| --------------------------------------------- | ----------------------------------------------- |
| `vtex:userData`                               | `firstName`, `lastName`, `email`, and `phone`   |
| `vtex:cart`, `vtex:cartLoaded`                | `firstName`, `lastName`, `email`, and `address` |
| `vtex:orderPlaced`, `vtex:orderPlacedTracked` | `phone` and `address`                           |

## Prerequisites

Before you start, make sure you have:

- A Croct account with a workspace and application set up.
- The Croct SDK installed and running on your storefront.
- A VTEX store built with Store Framework (VTEX IO).

## Send data from VTEX to Croct

You can add the integration in one of two ways:

- [Add a script tag](#add-script-tag) directly to your storefront's source code.
- [Use Google Tag Manager](#use-google-tag-manager) to inject the script without changing the source code.

### Add a script tag \[#add-script-tag]

Add the following script to your storefront's HTML, either in the `<head>` or the `<body>`:

**Integration script**

```html
<script src="https://cdn.croct.io/plug-integration/vtex.js"></script>
```

> **Load the script early**
>
> The integration captures the events broadcast from the moment it loads, so any event fired before that is lost. Loading it as early as possible ensures the first events are tracked.

### Use Google Tag Manager

If you prefer not to edit your source code, you can use Google Tag Manager (GTM) to inject the script for you.

1. In Google Tag Manager, select **Tags > New**.

2. Name the tag as `Send VTEX events to Croct`.

3. Set the tag type to `Custom HTML`.

4. Copy and paste the following code into the HTML field:

   **Custom HTML tag**

   ```html
   <script src="https://cdn.croct.io/plug-integration/vtex.js"></script>
   ```

5. Select the trigger `Initialization - All Pages`, so the listener is added as early as possible on every page.

6. Click **Save**, then **Submit** to publish your container.

Your tag should look like this:

![GTM tag](/assets/immersion/integrations/ecommerce/vtex/gtm-tag.png)

## Verify the integration

Once the script is live, confirm that events and customer data appear on [dashboards](/reference/analytics) and [user profiles](/explanation/user-profiles/introduction).

1. **Browse your store**

   Open your storefront and view a product, add it to the cart, and start a checkout. Sign in so customer data is available.

2. **Check the events**

   Open the [dashboard page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/dashboard/conversion) in the admin app and confirm that conversions are arriving.

3. **Check the profile**

   Open the [user profiles page](https://app.croct.com/redirect/organizations/-organization-/workspaces/-workspace-/profiles), open a profile, and confirm the **Attributes** tab shows the customer data ingested from VTEX.

With store events and customer data flowing into Croct, you can now create audiences from shopping behavior and optimize the storefront.

## Explore

- [Events](/reference/event/overview#event-types): Learn how to track user events for analytics and personalization.
- [Experiences](/explanation/experience/introduction): Discover what an experience is and how it works.