---
title: "addToEventQueue"
slug: "cloud-sdk-events-browser-addtoeventqueue"
abstract: "The addToEventQueue function adds an event with a valid payload to the event queue."
---
# addToEventQueue

|     |     |
| --- | --- |
| Type | Function |
| Import path | `@sitecore-cloudsdk/events/browser` |

Adds an event with a valid payload to the event queue. After adding events to the event queue, run the event queue using [`processEventQueue`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events/cloud-sdk-events-browser/functions/cloud-sdk-events-browser-processeventqueue.html "processEventQueue") or empty it using [`clearEventQueue`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events/cloud-sdk-events-browser/functions/cloud-sdk-events-browser-cleareventqueue.html "clearEventQueue").

> [!note]
> `FORM` events can't be added to the event queue.

## Signature

```typescript
export async function addToEventQueue(
  eventData: EventData
): Promise<void>
```

## Parameters

| Name | Type | Description |
| --- | --- | --- |
| `eventData` | [`EventData`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events/cloud-sdk-events-browser/interfaces/cloud-sdk-events-eventdata.html "EventData") | Required.<br><br>Data for custom events. Used by `addToEventQueue` to add standard or custom events to the event queue. |

## Return value

Returns a promise.

## Examples

:::tab{title="Next.js"}

Example 36. Running the addToEventQueue function

:::tab{title="Next.js"}
> [!note]
> To run this function, you have to first [initialize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events/cloud-sdk-events-browser/functions/cloud-sdk-core-browser-cloudsdk.html "CloudSDK") the Cloud SDK.

Here's an example of how to use the `addToEventQueue` function to save events to the event queue.

In this scenario, we add different events to the event queue depending on whether a site visitor clicked a dropdown menu and a dropdown menu item.

In the following order, either the `DROPDOWN_CLICK` then the `DROPDOWN_ITEM_CLICK` events are added to the event queue, or the `DROPDOWN_CLICK` then the `DROPDOWN_ABANDON` events are added.

```typescript
"use client"; // Used only in Next.js App Router
import { addToEventQueue, processEventQueue } from "@sitecore-cloudsdk/events/browser";

export default function Component(){
  const sendEvents = async () => {
    if (true) {
      await addToEventQueue({ type: "DROPDOWN_CLICK" });
      console.log("Added DROPDOWN_CLICK event to event queue.");

      if (true) {
        await addToEventQueue({ type: "DROPDOWN_ITEM_CLICK" });
        console.log("Added DROPDOWN_ITEM_CLICK event to event queue.");
      } else {
        await addToEventQueue({ type: "DROPDOWN_ABANDON" });
        console.log("Added DROPDOWN_ABANDON event to event queue.");
      }

      await processEventQueue();
      console.log("Sent all queued events.");
    }
  };

  return (
    <div>
      <button onClick={sendEvents}>send events</button>
    </div>
  );
};
```

:::

:::