Mastering E-Commerce: Integrating Order Flow Events in Sitecore CDP with Next.js

Hey Sitecore Folks ,

In this blog, we will delve into the process of order flow in a Customer Data Platform (CDP) using Next.js.

If you are new to CDP and next , you can follow my blogs for setting CDP with NEXT.js .

Order Flow

ADD, CONFIRM , CHECKOUT

You achieve this flow by sending a custom event to the CDP. This flow should follow the sequence: ADD, CONFIRM, and then CHECKOUT.

lets look into this flow

ADD event :

The “ADD” event in Sitecore CDP refers to a custom event that tracks specific user actions, such as adding an item to a cart. This event captures relevant details like product ID, quantity, price, and timestamp, and sends this data to Sitecore CDP via an API call for user behavior analysis and personalized marketing efforts.
const

 const eventData = {
      channel: "WEB",
      currency: process.env.CURRENCY,
      pointOfSale: process.env.POC,
      language: "EN",
      page: "products", 
      product: {
          name: product.name,
          type: product.category,
          item_id: product.slug,
          productId: product._id,
          referenceId: "order_12",
          orderedAt: new Date().toISOString(),
          quantity: 1,
          price: product.price,
          currency: process.env.CURRENCY,
          originalPrice: product.price,
          originalCurrencyCode: process.env.CURRENCY,
      }
    };
    const extensionData = {
      customKey: "Test"
    };
    await engage.event("ADD", eventData, extensionData);

Let’s Constructs an object eventData containing detailed information about the event being tracked.

Channel: Specifies that the event is occurring on the web ("WEB") . You can learn more about Channel here.
Currency: You can find currency value in company information under setting section. you can get more details here .
Point of Sale: To find the name of your point of sale, in Sitecore CDP, on the navigation pane, click on Setting icon > Points of Sale > Name.
Language: You can find language value in company information under setting section. you can get more details here .
Page: Indicates that the event is related to the "products" page.
Email,Name,Title : In this section you can update user details of guest . you can read more here .
Product: An object describing the product being added:
- Name: The name of the product that the user added to the cart. This is required field.
- Type: The type of product that the user added to the cart. This is required field.
- Item ID: The item ID of the product that the user added to the cart. Used in Extract, Transform, Load (ETL) data integration to create the order. This is required field.
- Product ID: The ID of the product that the user added to the cart. Used in Analytics for reporting. This is required field.
- Reference ID: An ID generated by your organization to reference the order item. This is required field.
- Ordered At: The current date and time in ISO format, generated using new Date().toISOString() .This is required field..
- Quantity: The number of units of the product that the user added to the cart.. This is required field.
- Price: The unit price of the product . This is required field.
- Currency: You can find currency value in company information under setting section. you can get more details here .This is required field.
- Original Price: the original price of the product.
- Original Currency Code: You can find currency value in company information under setting section. you can get more details here .

Calls the engage.event method , passing "ADD" as the event type, along with the eventData and extensionData objects.

CONFIRM event :

The “Confirm” event in Sitecore CDP is a custom event that tracks user actions confirming a transaction or action, such as completing a purchase or submitting a form. This event records details like transaction ID, amount, and timestamp, and sends this data to Sitecore CDP for further processing and analytics.

 const eventData = {
      channel: "WEB",
      currency: process.env.CURRENCY,
      pointOfSale: process.env.POC,
      language: "EN",
      page: "checkout",
      product: [
        { item_id: item}
      ]
    };
    const extensionData = {
      customKey: "Test"
    };
    await engage.event("CONFIRM", eventData, extensionData);

Let’s Constructs an object eventData containing detailed information about the event being tracked.

Channel: Specifies that the event is occurring on the web ("WEB") . You can learn more about Channel here.
Currency: You can find currency value in company information under setting section. you can get more details here .
Point of Sale: To find the name of your point of sale, in Sitecore CDP, on the navigation pane, click on Setting icon > Points of Sale > Name.
Language: You can find language value in company information under setting section. you can get more details here .
Page: Indicates that the event is related to the "products" page.
Email,Name,Title : In this section you can update user details of guest . you can read more here .
Product: An object describing the product being added:
- Item ID: Use the item ID from product.item_id in the event data object for the ADD event. This is required Field .

Calls the engage.event method , passing "CONFIRM" as the event type, along with the eventData and extensionData objects.

TIP

Make sure Item id is same in ADD and CONFIRM event

After adding ADD and Confirm event , lets checkout this order

CHECKOUT event :

The “Checkout” event in Sitecore CDP is a custom event that tracks when a user initiates the checkout process. It captures details such as cart contents, total amount, and user ID, and sends this data to Sitecore CDP for analysis and personalized marketing strategies.

  const eventData = {
        channel: "WEB",
        currency: process.env.CURRENCY,
        pointOfSale: process.env.POC,
        language: "EN",
        page: "Checkout",
        reference_id: "order_12",
        status: "PURCHASED"
      };
      const extensionData = {
        customKey: "customValue"
      };
      await engage.event("CHECKOUT", eventData, extensionData);

Let’s Constructs an object eventData containing detailed information about the event being tracked.

Channel: Specifies that the event is occurring on the web ("WEB") . You can learn more about Channel here.
Currency: You can find currency value in company information under setting section. you can get more details here .
Point of Sale: To find the name of your point of sale, in Sitecore CDP, on the navigation pane, click on Setting icon > Points of Sale > Name.
Language: You can find language value in company information under setting section. you can get more details here .
Page: Indicates that the event is related to the "products" page.
Email,Name,Title : In this section you can update user details of guest . you can read more here .
Reference_id : The order ID for which this checkout is happening.
Status : The order status.

Calls the engage.event method , passing "CHECKOUT" as the event type, along with the eventData and extensionData objects.

Make sure reference id should be same as reference id which you specified in ADD event

This will order in Order section

Once you click on order you can see all details for specific order

Conclusion

Integrating order flow events like ADD, CONFIRM, and CHECKOUT in Sitecore CDP using Next.js offers a robust and scalable solution for tracking and managing user interactions in an e-commerce setting. By leveraging Sitecore CDP’s capabilities, businesses can gain deeper insights into customer behavior, enhance personalization strategies, and optimize their overall marketing efforts.

The combination of Sitecore CDP and Next.js ensures seamless data collection and event tracking, providing a cohesive and efficient approach to managing customer data. As demonstrated, implementing these events involves setting up the necessary event listeners, integrating with Sitecore CDP’s APIs, and ensuring data is accurately captured and utilized for further analysis.

By following the steps outlined in this blog, you can enhance your e-commerce platform’s ability to understand and respond to customer needs, ultimately driving better engagement and higher conversion rates. As you continue to develop and refine your order flow tracking, remember to stay updated with the latest features and best practices in both Sitecore CDP and Next.js to maintain a competitive edge in the dynamic digital landscape.

Best Practices

Consistent Naming Conventions: Use clear and consistent naming conventions for your custom events to maintain readability and ease of management.
Performance Considerations: Optimize the timing of your event tracking to avoid impacting the user experience, such as batching events or using asynchronous requests.
Privacy Compliance: Ensure that your event tracking respects user privacy regulations such as GDPR or CCPA by implementing consent management and data anonymization where necessary.
Event Enrichment: Enrich your events with contextual data to provide deeper insights, such as including metadata about the page or user attributes.
Testing and Monitoring: Regularly test and monitor your event tracking implementation to catch any issues early and ensure accurate data collection.

References

Happy Coding 😊

Tech Nerd