Skip to content

EDU-14600: Creating the Newsletter data entity in VTEX Master Data #2040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Jul 22, 2025
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions docs/faststore/components/organisms/newsletter.mdx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
Improved clarity and conciseness by rephrasing 'input text' to 'text input field' and simplifying the action description.

excerpt: The `Newsletter` component is a section with at least one input text with an action allowing users to submit their input.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
Added a subject for grammatical correctness and an Oxford comma for clarity in a list of three or more items.

Uses `NewsletterForm`, `NewsletterHeader` and `NewsletterContent` as compound components.

Original file line number Diff line number Diff line change
Expand Up @@ -331,3 +331,113 @@ For further customization, you can use the following data attributes:
`data-fs-newsletter-content`

`data-fs-newsletter-addendum`

## Creating the Newsletter data entity in VTEX Master Data

The Newsletter data entity, also known as the `NL` acronym, is a [Master Data](https://help.vtex.com/en/tutorial/master-data--4otjBnR27u4WUIciQsmkAw?&utm_source=autocomplete) entity that stores subscription information for the Newsletter component. This entity enables the newsletter subscription feature for stores using FastStore.

When customers subscribe to the store newsletter, their information is saved in the `NL` entity. For the newsletter to operate, such as when a user subscribes, the `NL` entity must be set up in the Master Data.

To create the `NL` entity, follow the instructions below based on the method you prefer: [creating via Admin](#creating-via-admin) or [creating via API](#creating-via-api).

> ℹ For more details about Master Data data entities, see the [data entity](https://help.vtex.com/en/tutorial/data-entity--tutorials_1265) article.

### Creating via Admin

1. In the VTEX Admin, go to **Store Settings > Storefront > Master Data**.
2. In Master Data, click **Applications > Advanced Settings > Data structure**.
3. Click the **Data Entities** tab.
4. Click `Add new`.
5. Complete the fields of the **Data Entity** section with the following information:

| **Field name** | **Value** |
| -------------------------- | ---------------------- |
| **Acronym** | `NL` |
| **Name** | Newsletter |
| **Primary key type** | Generate a unique GUID |

6. In the **Fields** tab, create three new fields:

<details>
<summary><b>Field 1</b></summary>

This field will store the customer's email address for newsletter subscription.

1. Click `New Field` and complete the field with the following values:

| **Name** | **Display Name** | **Type** |
| ---------- | ---------------- | -------- |
| email | Email | Email |

2. Click the gear icon (⚙️) to open the field configuration options and check all the following options:

- **Is nullable?**
- **Make readable without credentials**
- **Allow editing without credentials**
- **Allow filtering without credentials**

3. In the **Search and filter settings** section, check the **Is searchable?** and **Is filterable?** options.

![newsletter-field-1](https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-1___61c595999569e52175f1de93d9ecd8f0.png)

</details>

<details>
<summary><b>Field 2</b></summary>

This field will indicate whether the user chooses to receive the newsletter or not.

1. Click `New Field` and complete the field with the following values:

| **Name** | **Display Name** | **Type** |
| ----------------- | ------------------- | -------- |
| isNewsletterOptIn | Receive newsletter? | Boolean |

2. Click the gear icon (⚙️) to open the field configuration options and check all the following options:

- **Make readable without credentials**
- **Allow editing without credentials**
- **Allow filtering without credentials**

3. In the **Search and filter settings** section, check the **Is searchable?** and **Is filterable?** options.

![newsletter-field-2](https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-2___62281c88b10436ce052707080cc5173e.png)

</details>

<details>
<summary><b>Field 3</b></summary>

This field will store the user’s name.

1. Click `New Field` and complete the field with the following values:

| **Name** | **Display Name** | **Type** |
| -------- | ---------------- | ------------ |
| name | Name | Varchar 750 |

2. Click the gear icon (⚙️) to open the field configuration options and check all the following options:

- **Make readable without credentials**
- **Allow editing without credentials**
- **Allow filtering without credentials**

3. In the **Search and filter settings** section, check the **Is searchable?** and **Is filterable?** options.

![newsletter-field-3](https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-3___4e7d9fec7f0a827c5d49908df0e2f20b.png)

</details>

7. Click `Save` and you will be redirected back to the Data Entity tab.
8. In the row of the new `NL` entity, click the diskette (💾) to publish the created data entity.
9. Click `OK`.
10. Click the **Applications** tab to return to the Master Data homepage.
11. Click `Reload Applications`.

### Creating via API

You can also create the Newsletter data entity using the [Create partial document](https://developers.vtex.com/docs/api-reference/masterdata-api#patch-/api/dataentities/-acronym-/documents) endpoint.

To create the three fields for the Newsletter data entity, see the [Create document with custom ID or update entire document](https://developers.vtex.com/docs/api-reference/masterdata-api#put-/api/dataentities/-acronym-/documents/-id-) endpoint reference.

> ⚠️ The field information must be the same as described in [Creating via Admin](#creating-via-admin).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
For consistency with common event naming conventions and other mentions in the document, 'Newsletter' should be capitalized.

- `Submit newsletter`: Triggered when a user clicks `Subscribe`.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
For consistency with common event naming conventions and other mentions in the document, 'Newsletter' and 'Success' should be capitalized.

- `Submit newsletter success`: Triggered upon successful subscription.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
For consistency with common event naming conventions and other mentions in the document, 'Newsletter' and 'Success' should be capitalized.

- `Submit newsletter success` event: Tracks if the subscription was successful.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
Add an article ('the') before 'CMS' as it refers to a specific system.

2. Run `yarn cms-sync` to sync the new section you created with CMS.

Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ To follow this guide, you should be familiar with the following topics:
- [Sending custom events](https://developers.vtex.com/docs/guides/faststore/analytics-sending-custom-events)
- [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section)

Also, make sure you have created the Newsletter data entity that stores use subscription information. For more details, see the [Creating the Newsletter data entity in VTEX Master Data](https://developers.vtex.com/docs/guides/faststore/organisms-newsletter#creating-the-newsletter-data-entity-in-vtex-master-data) instructions.

## Instructions

<CH.Scrollycoding>
Expand Down
2 changes: 2 additions & 0 deletions docs/faststore/docs/sdk/analytics/sending-custom-events.mdx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
Avoid contractions in formal technical documentation for a more professional tone.

| `name` | `string` | The name of the event that appears in Analytics reports. The `name` doesn't need to follow any event name conventions related to natively supported events. |

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
'Such as' is preferred over 'like' when introducing examples in formal writing.

This custom event interface captures when a user adds a product to their wishlist, logging details like `productId`, `productName`, and whether the user is logged in (`isLoggedIn`). This data can then be sent to your analytics tool to better understand customer behavior, such as which products are popular on wishlists and how engagement varies between logged-in and anonymous users.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
'Whether' is preferred over 'if' when introducing alternatives or possibilities.

The following example extends the `AddToCartEvent` interface to include the `couponCode` property, which is useful for tracking if a customer applied a coupon code when adding an item to the cart:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶
'Using' is more appropriate than 'from' in this context to describe the means by which events are fired.

If you have multiple custom events, such as adding/removing items from the cart or viewing products, you can define a unified type to handle them all. This approach simplifies firing multiple events from the same interface.

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: "Sending custom events"

Even though the [Analytics](https://developers.vtex.com/docs/guides/faststore/analytics-overview) module natively supports [Google Analytics ecommerce events](https://support.google.com/analytics/answer/14434488?hl=en), you may need to track customer activity not covered by default events. In such cases, you can trigger and intercept custom events using the [`sendAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-send-analytics-event) and [`useAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-use-analytics-event) functions. In this guide, learn how to define and send custom events.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [Grammar reviewer] reported by reviewdog 🐶

  • Using a hyphen in 'e-commerce' is common practice for clarity and consistency in technical documentation.
  • Rephrased for a more direct and formal tone, which is typical in technical documentation.
Suggested change
Even though the [Analytics](https://developers.vtex.com/docs/guides/faststore/analytics-overview) module natively supports [Google Analytics ecommerce events](https://support.google.com/analytics/answer/14434488?hl=en), you may need to track customer activity not covered by default events. In such cases, you can trigger and intercept custom events using the [`sendAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-send-analytics-event) and [`useAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-use-analytics-event) functions. In this guide, learn how to define and send custom events.
Even though the [Analytics](https://developers.vtex.com/docs/guides/faststore/analytics-overview) module natively supports [Google Analytics e-commerce events](https://support.google.com/analytics/answer/14434488?hl=en), you may need to track customer activity not covered by default events. In such cases, you can trigger and intercept custom events using the [`sendAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-send-analytics-event) and [`useAnalyticsEvent`](https://developers.vtex.com/docs/guides/faststore/analytics-use-analytics-event) functions. This guide explains how to define and send custom events.


> ℹ️ For a practical example of sending custom events, see the [Implementing custom newsletter analytics events](https://developers.vtex.com/docs/guides/faststore/analytics-implementing-custom-newsletter-analytics-events) guide.

## Instructions

### Step 1 - Declaring an interface for your custom event
Expand Down
Loading