With the explosion of data being collected and consumed by IoT applications and devices along with our insatiable desire for near real-time feedback, has led to a shift in how we handle computing. Performing all the computation at data centers and/or cloud servers is not the most efficient approach as this increase in data consumption requires significantly more bandwidth which only increases latency. Edge computing, allows computation of data to remain much closer to the user rather than going through several network hops, for a cloud server to process the data and return a response. With this computation of data happening closer to the source not only is Edge more performant it is also considered more secure.
Users who have a personalized online experience and feel a connection with your brand are more likely to make a purchase and become loyal customers. However, a poor implementation that adversely impacts performance will have the opposite effect and drive potential customers away.
In this post, I will demonstrate how you can improve performance and user experience by moving personalization to the Edge with Nextjs Middleware and Sitecore Personalize using the Sitecore Commerce template created by Vercel. First I’ll show you how to personalize using visitors’ Geolocation to show summer or winter clothing collections.
Then we’ll personalize using guest information collected by Sitecore Personalize to display products from our men’s or women’s store.
In a previous post, I’ve introduced Sitecore CDP with some tips and tricks to help you get started with this awesome platform. While there are a few different ways you can integrate Sitecore CDP with your site:
Direct client-side integration
Client-side integration via GTM (Google Tag Manager)
I thought it would be helpful to demonstrate how to add CDP to the Next.js Commerce App via GTM. One of the benefits of this approach is it allows marketers to manage and deploy the CDP script to their site without having to modify the code. As the majority of sites already have GTM set up it should be relatively easy to add Sitecore CDP without getting the dev team involved. “Yey! we can do this ourselves, we don’t need any developers!” I hear you marketers holler!!
Now I’m not advocating you start adding scripts to your live site via GTM, as it does require some technical resources. Most marketing teams have analytic pros who understand the impact and risk of adding scripts and perform rigorous testing before publishing anything on a live site, to ensure there is no detrimental impact on performance or worse bring the entire site down. With great power comes great responsibility.
In my previous post, I demonstrated how to get the Sitecore OrderCloud headstart-nextjs running and deployed to Vercel. In this post, I will show you how to create a Vercel project using the Commerce template and steps to add Sitecore OrderCloud integration. How to then set up the project for local dev, make some basic changes and deploy those changes to Vercel.
Next.js Commerce Template
Vercel gives you the ability to create new projects, deploy existing projects or you can choose from one of their Templates. These templates are a great starting point to wrap your head around some of the Vercel concepts without having to start from scratch. I recommend checking them out.
The Commerce project template uses Next.js Commerce an all-in-one starter kit for high-performance e-commerce sites. It already boasts integrations out-of-the-box with the following commerce platforms: BigCommerce, Shopify, Swell, Saleor,Vendure and OrderCloud. With plans to support other platforms. Features include:
Performant by default
Standardized Data Hooks
Integrations – seamless with the most common ecommerce platforms (Shopify, BigCommerce, Swell, Vendure, Saleor and OrderCloud).