How We Built a Custom UX Dashboard

To Track Where Customers Were Dropping Off During Online Ordering

Want to know more?

How We Tracked Where Users were Dropping Off During Online Ordering

THE Challenge

Boqueria was interested in learning more about the “online delivery and pickup” feature on its website. Their initial ask was for us to set up analytics to record the number of users entering the feature and those converting.

We thought it would be a great opportunity to add some value for them, breaking out information on specific restaurant locations, the marketing channels driving traffic, and user progression through the online ordering funnel.

That is, we know that ordering food online isn’t a simple process of visiting a website and hitting a button — There is an involved sequence of steps that a user has to take, from browsing the menu to the cart, account creation, special requests and approvals (“need plasticware?”) before eventually confirming their order.

We thought this would be great to illustrate how users are interacting with the online ordering feature and to also help identify variances in traffic quality coming to online orders.

THE Build

We wanted this to integrate with Google Analytics, which is where they track their website analytics. Boqueria calls GA via Google Tag Manager across all pages on their domain, including the online ordering feature, which is a third-party React app built by GoParrot.

Our aim was to create milestones in GA to follow the online ordering process: Viewed menu, viewed cart, logged in, approved special requests, confirmed order. There are a few different ways you can do this, and given how GoParrot’s online delivery feature is built, we felt the most reliable would be to create GTM triggers when certain elements important to the order flow are visible on the user’s screen.

For example, when the “enter credit card number” field is visible, we know the user has reached the “Enter Payment” step.

These triggers then fire non-interaction events in GA, which we can easily aggregate for high-level analytics on the checkout process and assign back to users and sessions in deeper analysis.

The Presentation

Obviously, when you’re managing a restaurant, you want to spend most of your time managing the restaurant and not digging in Google Analytics to diagnose traffic issues.

Instead of just collecting this data in GA, we opted to build a clean and user-friendly dashboard for the client in Google Data Studio, pulling data into cleanly designed visualizations for data points most important to the client. Now they can quickly log in, scan, and find the data that they need.