1. @sitecore-cloudsdk/events/browser

addToEventQueue

Version:

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 or empty it using clearEventQueue.

Note

FORM events can't be added to the event queue.

Signature

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

Parameters

Name

Type

Description

eventData

EventData

Required.

Data for custom events. Used by addToEventQueue to add standard or custom events to the event queue.

Return value

Returns a promise.

Examples

Example 36. Running the addToEventQueue function

Next.js

Note

To run this function, you have to first initialize 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.

"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>
  );
};


If you have suggestions for improving this article, let us know!