Visitor #00001, we have been expecting you.

This is your profile, created by Frosmo based on your browsing behavior. Each time you interact with the website, we collect data to create a relevantly personalized experience for you.

Ecommerce development through the eyes of a React developer

Let me give you a scenario. Let’s say you’re working on the sprint backlog as usual. Your product owner comes up to you together with someone you often see in the office but you’re unsure of what she really does. They both talk to you and ask for the following small feature out of the backlog:

Can you change the landing page hero unit background image to this one every Friday from 5 PM to midnight?

Okay, this person is from the ecommerce development team. Let’s call her Lisa. She and her team are usually responsible for Google Analytics to find out how to generate traffic to the site. You sense that this seems important to the company because it has to be done urgently even in the middle of the sprint. So, you hack it up as quickly as possible.

Great! This goes live with the rest of the features in the next sprint release. You noticed that Lisa happily greets you the next Wednesday morning at the office lobby.

For the next few weeks, more requests are made. The list goes on, from changing the CTA of the hero unit banner, to changing the hours, and even getting more specific e.g. showing something at a certain time to a certain audience, say to all visitors with kids. The tasks on hand are challenging and you realize that some kind of display rule control system for the non-technical ecommerce development team is probably required. How do we store the store data? Which authentication scheme should be used? And how do we define all visitors who have kids?

At this point, proper communication between the ecommerce team and developers is crucial. The lack thereof can usually lead to frustration from both parties. Both teams may have a blurred understanding of what the other does, and perhaps the limitations of what can be done. So, to bridge this gap, it’s important to work closer together.

To improve collaboration between ecommerce and dev teams, it’s best to have a shared understanding of goals and metrics. Find a way to to create alignment of teams on a common language, goal, and provide a framework for discussion. For example, for this particular task, it’s probably best to build a simple display rule management app that non-technical managers can easily work on without developer intervention.

Frosmo is the most versatile personalization software

The Frosmo Platform is a personalization platform that provides an extensive set of tools to manage site visitor segmentation, complex display rules, key performance metric (KPI) tracking, and even statistical KPI-based display rule optimization.

Consider the scenario illustrated above with application bones:

To setup Frosmo, first install Frosmo-React connector component to your application:

Then import the FrosmoPlacement component and wrap the component that should be set under the control of Frosmo’s engine:

Here,

defines the child component to be shown conditionally. Note that the code of all personalized layout variants lives in the same code-base with the rest of the app. FrosmoPlacement component evaluates display rules both client-side and server-side. Server-side evaluation happens behind the Frosmo messageAPI end-point.

The response from messageAPI contains the set of user-defined parameters related to content that matches the personalization rules. In our example, the wrapped component (HeroUnit) will receive the property frosmoSegmentName that is defined in the Frosmo Control Panel (FCP).

FCP allows the definition of any set of simple or structural parameters that can fully describe how the component should be personalized. These parameters can, for example, refer to image URLs or to resources that can be further fetched from a headless CMS.

In practice, these personalization parameters are outlined together with the ecommerce team and a UX designer when planning the personalizable component layout. Multiple campaigns or test scenarios concerning the Frosmo controlled component can be run by adjusting parameter values in FCP, which gives the developers the freedom not to worry about constantly changing display rules and minor requirement changes.

Frosmo’s business analysts are always ready to help with the planning and modeling even the most complex segmentation and personalization scenarios so that the developers can focus on the backlog as usual.

Conclusion

Ecommerce development is a continuous process of testing, tweaking, and measuring how different website elements perform. This can generate extra workload to the website developer team. Building an application for ecommerce and marketing to manage and measure display logic takes a lot of effort even without the maintenance responsibility that follows after publishing such a tool.

Frosmo solves this issue with its strong track record of working with ecommerce and marketing teams globally. Setting up Frosmo to the React application is easy:

  1. Install Frosmo client-script tags to application <head>. Script tags are found at the FCP (contact sales@frosmo.com for the FCP account).
  2. npm|yarn install Frosmo-React connector component to application.
  3. Create a placement and modification in the FCP.
  4. Mark component that should be controlled by Frosmo using FrosmoPlacement component.

Check out Frosmo Documentation for more information on APIs, FCP features and all details about how Frosmo operates.

Ready to see Frosmo in action?

Request a demo

________________________________________________________________________________________

About the writer:

Joona Ojapalo is a senior front-end developer and React evangelist at Frosmo, and has been in the industry for 12 years now. With a strong background in machine learning and statistics, he has worked with ecommerce platforms both in startup and corporate cultures. 

Recommended for you