Contextual Web3 Dapp Replay Analytics -  Blockchain UI/UX

Contextual Web3 Dapp Replay Analytics - Blockchain UI/UX


With Web3, now we can give our customers and prospects the ability to own and financially profit from owning this digital property.. Previously we needed to build large audiences on social platforms to get any kind of traction at all. Now, because of the token, small numbers can make a big brand impact.

Take the music world. Portuguese musician RAC has over 3.5 million listeners on Spotify. By selling just five exclusive music NFTs, he made more money than he had from Spotify ever.

No alt text provided for this image

?NFTs that work today are more than just the art which, again, just represents what’s in the smart contract, it’s about access and utility. Bored Ape Yacht Club (BAYC) worked because the owners get full intellectual property rights to use their image as they see fit (this person just launched a restaurant ) and they get access to exclusive events. Gary Vaynerchuk’s VeeFriends NFT project worked because all NFT owners get access to an event, plus hundreds received special access to Gary or Gary’s team. Stoner Cats from Mila Kunis worked because NFT owners get exclusive access to watch the ongoing cartoon series.

Despite the rising popularity and re-kindling of interest in the cryptocurrency markets, NFTs, and DeFi, conversation around dapps barely registers a blip when compared to all of these other areas of blockchain.

No alt text provided for this image

But why?? Quite simply, the user experience simply hasn’t been good enough for most of the dapps that are currently available.? And while it is a great luxury to know that the data and information behind a dapp isn’t controlled by one entity, the usability and utility that many of these dapps provide simply is not at a level that can compete with the popular centralized apps of today.

Web3 changes the whole approach to bootstrapping new networks, since tokens offer an alternative to the traditional approach to the cold-start problem. Rather than spending funds on traditional marketing to entice and acquire potential customers, core developer teams can use tokens to bring in early users, who can then be rewarded for their early contributions when network effects weren’t yet obvious or started. Not only are those early users evangelists who bring more people into the network (who would like to similarly be rewarded for their contributions), but this essentially makes early users in web3 more powerful than the traditional business development or salespeople in web2.

Major friction points for new users to web3 experience are:

Dapps

a) requiring installing a wallet

b) instant/invisible authentication

c) shared authentication and data between dapps

Blockchain

a) transactions cost money

b) transactions take long time

c) transactions can’t be paid with “regular” money

So the question to answer is, what does your Web3 dApp do? Are you creating real value and will anyone really care? Understanding the real-life person engaging online, on the other end of the screen, means asking the questions:

  • What's the customer trying to do?
  • What is their experience really like?
  • What works? What breaks?
  • When, where, and why do users get frustrated?

Traditional analytics tools answer these questions by turning users into numbers: clicks, bounce rates, page visits, conversions, and other abstractions. While this data feels insightful on its own, traditional web analytics miss the needle? in the haystack?

No alt text provided for this image

That's where replay analytics comes in.

Web3 Dapp replay capabilities elevate traditional web analytics tools by showing a complete picture of the user on a website or app. They provide all the individual data points you get with a typical analytics tool and how those data points combine to create an experience. In other words, Web3 Dapp replay helps you definitively answer the question, "What's really happening on my site (or in my dAPP)?"

The result? Teams across your organization–product managers, support agents, product and UX designers, developers, marketers, sellers, and everyone in between–can turn to Web3 Dapp replay to better understand the user, learn from their struggles and successes, and build better products. From SaaS and NTF marketplace to fintech and hospitality, Web3 Dapp replay is valuable for online businesses no matter the industry.

With Web3 Dapp replay you can finally get the answers you need to understand your customers and improve their online experience.

What is Web3 Dapp replay?

Web3 Dapp replay is the reproduction of a user’s interactions on a website or web application exactly how the user actually experienced it. Web3 Dapp replay transforms logged user events, such as mouse movements, clicks, page visits, scrolling, tapping, etc., into a reproduction of what the user actually did on the site or app.

For a better idea, watch the reproduced session of a fictional user interacting with the ntf market place.com:

Web3 Dapp replay–which has been around for more than a decade–might also be referred to as session playback, user experience (UX) replay, or even mouse tracking, among other names.

Web3 Dapp replay is a powerful form of qualitative research, enabling researchers to see and learn from the behaviors of individual users, and combine qualitative and quantitative data.

An example of a Web3 Dapp replay playback bar

From a research perspective, Web3 Dapp replay deftly avoids bias in user testing—i.e. the Hawthorne Effect—because sessions are captured from actual users rather than test subjects in a study.

Here is glimpse of a user replay from NTF market place

List of user session in real time and then each of the session, you can replay to see what user does

No alt text provided for this image
No alt text provided for this image







No alt text provided for this image

Dead Clicks in the users journey

No alt text provided for this image

Want to see client side highly intensive calls

No alt text provided for this image

Click Map

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

Traditional qualitative research methods typically require advance setup, can be challenging to execute, and are often prohibitively expensive. With a replay tool, on the other hand, sessions are available on-demand and can be used on any aspect of your online customer experience.?

So What Web3 Dapp replay cannot

Most Web3 Dapp replay tools don’t rely on actual video recordings of the end user’s screen. Rather, they reconstruct events as they occurred.

Imagine someone took detailed notes about your day—where you went and when, what it looked like, what you did, how you acted, etc. Then, they took those notes, rebuilt the scenes and hired actors to play the parts, using the notes like a script to recreate the day just like it actually occurred.

That difference, while subtle, is important because unlike video, Web3 Dapp replay is immensely rich in meaningful data—data that platforms with powerful Web3 Dapp replay can use to surface? valuable insights about user behavior and interaction with a website or application.

Though the two are sometimes lumped together, heatmaps are not Web3 Dapp replay, but are instead a complement to Web3 Dapp replay. Often, it's smart to combine Web3 Dapp replay and the many types of heatmaps — click maps, scroll maps, and more — in your analyses.

How Web3 Dapp replay works

When you first watch a Web3 Dapp replay, it can be a surreal experience—how did you create a video of a user's online experience? Realizing that it's not video, but a high-fidelity reproduction of a person's experience adds to the mystery—how is this possible?

It's complicated, so let's dive into the technical specifics of Web3 Dapp replay.

Web3 Dapp replay and the DOM

You can’t talk about Web3 Dapp replay without talking about the DOM, or Document Object Model, which is how users experience and interact with the web. Replay captures everything that occurs in the DOM. We'll avoid going into a detailed explanation of the DOM, but having a working analogy of what it is will help you understand how Web3 Dapp replay works.

Imagine your website or app is a building. The DOM is the physical structure of the building—the foundation, the plywood frame, the doors and windows, and so on. HTML, CSS, and JavaScript control how the house is constructed, how it looks, and how it behaves.

By recording the DOM and all mutations to the DOM that occur throughout a user's visit to this "building," a Web3 Dapp replay tool can accurately record and recreate not only the building itself, but all the times a user walked through a doorway, moved a piece of furniture, hung a painting on the wall, or even did some remodeling.

Our physical building analogy is similar to what Web3 Dapp replay tools accomplish virtually. Session recordings provide the necessary bits and pieces you need to replay how users experienced your web site or app for the explicit purpose of understanding that experience—to learn from it and improve it for future users.

Rounding out our building metaphor, in Web3 Dapp replay, the building materials as well as the activities that occur within the building can be classified into two categories: events and assets.

Events: Every action that takes place on the web requires the transfer of information. While the experience is seamless to the user, when that user does anything–like moves the mouse or swipes the screen–information is created. Each of those information transfers is a tiny events.

Web3 Dapp replay is a reconstruction of all of those events from an extremely detailed log.

Assets: In addition to the events being logged, the “scene” within which the events took place must also be captured. That’s why Web3 Dapp replay tools also record the associated web assets—that is, all the bits and pieces (like images, HTML, CSS, etc.) that are used to build what you see on a web site or app. Saving the assets is important because Web3 Dapp replay tools that do not cache assets are unable to reproduce older sessions if and when the web page or app changes.

What can Web3 Dapp replay log?

Websites are complex, and there’s an infinite combination of ways that they can be built. Many web pages and apps invoke JavaScript or AJAX, are responsive in design, and dynamic by default. What about mobile? What about variations in screen resolution, browser window size, etc.?

Web apps might have windows that pop-up, menus that explode out (and disappear), and any number of other complicating factors. That’s why, for Web3 Dapp replay tools to be useful, they need to be capable of dealing with all of this complexity.

Below is a partial list of all the things that can be logged in Web3 Dapp replay—note that not all Web3 Dapp replay vendors record all of these things.

  • HTML and CSS (And all the most basic web page and app elements)
  • CSS animations
  • Vector graphics in SVG (including animations)
  • Hover cursors and effects
  • Embedded <iframe>
  • Script-modified input values
  • Window resizing
  • AJAX URL navigation
  • HTML5 <audio> and <video> playback
  • Multi-touch events (on mobile devices)
  • Web Components, and by extension, Shadow DOM

One of the compelling aspects of Web3 Dapp replay is that it captures all the nuance experienced by users—nuances of your web site or app and nuances in user devices, browsers, window sizes, etc. Comprehensive Web3 Dapp replay tools should also work across mobile applications.?

What about Web3 Dapp replay and privacy?

Any Web3 Dapp replay tool should provide for protecting private user information. Web3 Dapp replay tools, like other web analytics tools, require disclosure to users through language in your privacy policy, in-app notification, etc. If you use other analytics or customer experience services (like Google Analytics, Mixpanel, Segment, Omniture, Intercom, Optimizely, and hundreds more), you’ve very likely already placed such a disclosure on your site or in your application. The techniques used by these popular platforms to collect data are fundamentally no different than those used by Web3 Dapp replay tools.

Additionally, any Web3 Dapp replay tool should provide for both the exclusion of sensitive data from being collected at all (e.g. passwords) and the ability to mask user inputs from view in a Web3 Dapp replay. A Web3 Dapp replay tool approaches privacy differently, so it’s important to choose a tool that provides your company with strong privacy functionality and options for implementation.?

Web3 Dapp replay takes the guesswork out of customer experience issues.

What is Web3 Dapp replay useful for?

Now that you understand that Web3 Dapp replay is a video-like reproduction of the customer experience online, you might be wondering, "Okay, what can you do with that?" The answer is: a lot.

Web3 Dapp replay is the firehose of information about the online experience. As you get comfortable with navigating the massive amount of information captured by a Web3 Dapp replay tool, you will discover new ways to mine your sessions for insights—things that you never could have learned with a traditional web analytics platform alone.

If you're new to Web3 Dapp replay tools, the following use-cases will help you get familiar with what's possible with replay.

5 problems solved by Web3 Dapp replay

Below are 5 common problems solved by Web3 Dapp replay tools. For the first four—Reproduce and solve bugs faster, Conversion rate optimization (CRO), Support customers faster through context, and Understand the user experience (UX)—you'll find detailed explanations of the problem along with supporting stories about how Web3 Dapp replay was used to solve the problem.

1. Reproduce and solve bugs faster

A nearly unlimited number of things can go wrong with products that live online. Variations in devices, OS, browsers, screen sizes and resolutions, all introduce elements that can make QA and software testing tedious, error prone, and inevitably limited in scope.

No alt text provided for this image

When things break and bugs are reported, chances are the problem either won't be reproducible at all, or reproduction will require hours of your dev team's precious time.

Common problems engineers and product developers encounter with Web3 Dapp replay:

  • I need to reproduce bugs in order to understand them, but bug reports don’t give me enough information to deduce what’s going on.
  • I can’t figure out when my app/site is having errors.
  • I need to know who's been affected by a bug.
  • I need a way to prioritize bugs by impact.

Web3 Dapp replay is a game-changer for reproducing and solving bugs. By linking user sessions to bug reporting tools (like Web3 Dapp replay integrations JIRA or BugSnag ) and to customer support tickets (See #3 Support customers through context), Web3 Dapp replay ensures you’ll never again need to request more information about a user issue or bumble through tedious screenshares/screenshots.?

With Web3 Dapp replay tools that capture all sessions, QA and software testing don’t stop at launch. Indeed, Web3 Dapp replay can be used alongside product launches, allowing product developers to observe as users engage with a new feature or interface to make sure it's working correctly. In the likely event that something is broken, Web3 Dapp replay can speed up the fix by revealing what’s causing the problem.

Depending on the capabilities of the tool, replay may also include info like stack traces, Network views, .HAR, UserAgent info, and more.

Below are examples of how Web3 Dapp replay was used to reproduce and solve bugs faster, saving developers' time and companies' resources:

  • retail/ecommerce — time saved solving bugs with replay has enabled them to go beyond reactive bug-fixing to proactive bug-finding.
  • Industrial technology– has over 20 brands in its portfolio, and each uses Web3 Dapp replay to better understand why customers choose not to buy and to run smarter digital experiments.
  • –SaaS, shipping platform–personalizes customer interactions, conserves engineering time, and ideates new features.?
  • –peer-to-peer marketing—increases conversion rates, reduces time-to-checkout, and smoothes internal communication using Web3 Dapp replay.

Engineers’ time is expensive, which makes tools that speed up bug reproduction extremely valuable. Web3 Dapp replay is a powerful analytics tool that can dramatically reduce the time it takes to understand and eliminate software glitches, coding errors, and other pesky bugs on websites and web applications.

2. Conversion rate optimization

Whether in ecommerce, marketing, or product development, optimizing conversions for your website or app is an ongoing, never-ending process.

Here are just a few problems optimizers face:

  • I need to understand what is preventing users from converting (or triggering some KPI).
  • What’s not working about my landing page?
  • Why are users missing my CTA?
  • Where are my customers losing interest?

Web3 Dapp replay tools help conversion rate optimization by showing what is happening on a given page or screen on your website or app. This level of detail helps you tease out why users are—or aren’t—converting.

For example, are users getting confused with your UI? Are they missing the CTA? Running into errors? Looking for missing information? And on and on. From these observations, hypotheses can be formed and tests run. Mix Web3 Dapp replay with A/B tests and you can get more out of experiments and further optimize experiences.

How to use Web3 Dapp replay for conversion rate optimization

Some Web3 Dapp replay vendors also bring together search, replay, and funnel analytics so you can conduct aggregated analysis and qualitatively analyze real user behavior at each step of the funnel.

3. Support customers faster through context

Support professionals have an exceptionally challenging job. Helping customers who run into problems during their online experience can be an exercise in futility. Here are a few of the problems support professionals face:

  • How do I get the context necessary to understand the customer's problem or need?
  • "Could you provide a screenshot?"
  • How do I answer a ticket that says, "It's not working" quickly and effectively—without further frustrating the customer?

Additionally, some Web3 Dapp replay tools can be used to "go live," and co-browse with users at low-latency (1–5 second delay) so that support agents can help in real-time navigate through site or UI problems.

4. Understand the user experience (UX)

It's almost impossible to understand how digital products are used without directly observing users. But designers, developers, and other stakeholders in the user experience must make these observations in order to improve the product. Here are a few of the problems faced and questions asked when trying to understand UX:

  • Is my design working? Does it make sense to users?
  • How do I understand the UX across the thousands of devices, browsers, screen resolutions, OS, etc.?
  • UX research studies are costly, slow, and unreliable—but what other choice is there?

Web3 Dapp replay is a useful tool for gathering user experience research on-demand and “at scale” to help designers see where elements are not understood or how different devices, screen resolutions, and browsers are presenting an experience to users.


5. Understand and improve onboarding

Another way Web3 Dapp replay can be used to understand UX is by watching sessions of users who go through onboarding flows to understand where users miss things, lose interest, or fail to understand functionality.

Factors to be considered before lay hands on Web3 Dapp replay?

Many Web3 Dapp replay tool options exist. And due to the technical requirements "under the hood," not all playback tools are the same.

Below are criteria to consider when evaluating any given Web3 Dapp replay tool. Each of these considerations should be weighted against a given tool's technical capabilities and features.

1. Search, segmenting, or filtering sessions

Now that you have thousands of user sessions, how do you find specific sessions?

Finding the specific session or set of user sessions that meet given criteria is necessary to get to the “why?” Web3 Dapp replay provides. Not all vendors allow you to search or filter and segment sessions by events.

2. Language and code capabilities

Web3 Dapp replay tools record what happens in the DOM. Different Web3 Dapp replay tools can capture more (or less) than others as web and app elements vary in their complexity. If your site has a particularly nuanced or complicated setup, it’s worth checking to make sure the Web3 Dapp replay tool you’re researching will work.

3. Single-page apps

“Will Web3 Dapp replay work with my REACT site? What about Angular.js? Does Web3 Dapp replay work with [insert JavaScript framework here]? Are there any caveats? Does it work out of the box or is someone going to have to code things into my page or onto the vendor's backend?"

4. Performance

Web3 Dapp replay tools necessarily use proprietary code to capture data from your site or app. The technology and implementation can affect the speed of your site.

5. Asset caching

Does the Web3 Dapp replay tool cache assets to ensure playback fidelity in the event the site changes?

Not all Web3 Dapp replay tools save the associated assets (e.g. images, CSS, HTML, and many other materials used to build web pages and apps). For Web3 Dapp replay tools that do not cache assets, in the event the web site and app changes, session recordings are likely to lose their utility.

6. Data retention

Web3 Dapp replay vendors must store lots of data, so how many days, weeks, or months of sessions that are retained by a given tool will vary.

7. Sessions recorded (sampling vs. everything)

Some tools only capture a sampling of sessions while others—like Web3 Dapp replay—capture them all. Sampling limits the ability to dive into customer support tickets by user session (or co-browse), assign sessions to bug reports, generate aggregated insights, gather insights on edge-cases, as well as other limitations.

8. Ability to identify specific sessions by user

Related to differences in sampling vs. capturing all sessions, some Web3 Dapp replay tools allow you to identify sessions by users.

9. Implementation

Depending on the tool, implementing the necessary script and/or code to make Web3 Dapp replay work on your site can vary in complexity. Some tools take months of implementation or nuanced installation requirements.

10. Price

Web3 Dapp replay vendors can vary in price depending on variables like data retention, sessions covered, additional features, and more.

Key functions that benefit from Web3 Dapp replay

If your work touches the customer experience online, Web3 Dapp replay is for you. Some common job roles that use Web3 Dapp replay include product managers, product developers, engineers, designers, UX researchers, customer support, and marketing teams.

Product management, development, and engineering

Web3 Dapp replay is a useful tool for product managers, product developers, and engineers. As explained above, Web3 Dapp replay works as a debugging tool as bug reproduction is as simple as finding sessions that contain errors and watching the playback. Meanwhile, if your Web3 Dapp replay tool has the capacity to search sessions for events, sessions containing errors can be found through search.

Additionally, when integrated with customer support tools, bug reports from users can be attached to session recordings, eliminating the need to reproduce the bug through trial and error, and saving engineers the time spent decoding user-written bug reports.

Design and user experience (UX) research

Designers understand that even the most elegant, thoughtful site or app design is likely to have unexpected user behaviors once launched. Variations in devices, browsers, and the page and app state can affect design elements. Users can be confused by elements that the design team thought were obvious or intuitive.

Understanding the user experience around design can be as simple as watching sessions, observing behavior and user interactions with the design, experimenting, and iterating on the design further.

Customer support

Web3 Dapp replay has become a must-have customer support tool for professionals. Why? Playback gives support agents important context around solving customer support tickets—even allowing for customer support teams to co-browse with users “live.”

Given the challenges of asynchronous communication and customer inability to articulate in a meaningful way a given web experience through a ticket (or on the phone), watching a Web3 Dapp replay saves time, generates empathy in the support team, and results in better, more efficient outcomes.

Additionally, the trail left by Web3 Dapp replay allows customer support staff to “close the loop” with product managers when certain aspects of your web site or app continue to cause problems.

Marketing

Marketers measure ROI to track how well marketing and advertising campaigns drive specific behaviors including clicks, lead generation, conversions, and other KPIs. Unlike these abstract marketing metrics, Web3 Dapp replay can help you optimize conversions by providing the necessary nuance of real user behaviors. It's that nuance that provides marketers with the answers they need to build better landing pages, run A/B tests, analyze results of experiments and more.

Additionally, if your Web3 Dapp replay tool allows you to search and analyze segments of users by their behaviors or acquisition channel, you can accurately assess the quality of a given marketing tactic. For example, you can find and watch sessions of users who arrive on a landing page via Google paid search or Facebook Ads.

Another benefit of replay tools with segmentation is you can isolate a set of users—say your power users or users in a certain geography—and export lists for email marketing campaigns or other marketing strategies.

Tools like Web3 Dapp replay also provide the ability to build marketing funnels based on the combination of any number of user- or event-based search criteria.

Web3 Dapp replay and Web3 Dapp replay: The keys to building a more effective web experience

Web3 Dapp replay's powerful platform gives you the power to know your customer's digital experience. And when it comes to Web3 Dapp replay, Web3 Dapp replay is best-in-class. Here's how Web3 Dapp replay measures up against the 10 criteria for evaluation below.

Search, segment, and filter

Web3 Dapp replay indexes all user sessions and can be searched for events, users, date & time constraints, clicked elements, URLs, time, location, CSS selectors, and countless other web elements, all of which can be stacked to allow for highly specific segmentation of users based on behavior.

Language and code capabilities

We record everything mentioned in Session Recording Capabilities and are actively working to expand our session recording capabilities.

Single-page apps

The answer will vary by Web3 Dapp replay tool, with Web3 Dapp replay, the answer is usually, “Yes,” without caveats or reservations.

Performance

Web3 Dapp replay has gone to great lengths and made use of multiple tactics to make the session recording script as lightweight as possible. As a result, the Web3 Dapp replay script will not affect the performance of your site.

Asset caching

Web3 Dapp replay caches assets so historical sessions that are retained by customers are protected from future web page and app changes.

Data retention

Web3 Dapp replay plans can meet whatever data retention required, up to one year.

Sampling vs. everything

Web3 Dapp replay captures every session where the script is installed. No sampling means no bug goes uncaptured, no niche experience missed, and every support ticket can be tied to a specific customer experience.

Ability to identify sessions by user

Web3 Dapp replay allows users to identify sessions by users.

Implementation

Installing Web3 Dapp replay starts with placing a small snippet in the head of your site to begin recording. As part of the implementation, you can exclude specific fields, send over custom data, and integrate Web3 Dapp replay with other tools in your stack.

OpenReplay is a session replay suite you can host yourself, that lets you see what users do on your web app, helping you troubleshoot issues faster. It's the only open-source product

  • Session replay. OpenReplay replays what users do, but not only. It also shows you what went under the hood, how your website or app behaves by capturing network activity, console logs, JS errors, store actions/state, page speed metrics, cpu/memory usage and much more.
  • Low footprint. With a ~18KB (.gz) tracker that asynchronously sends minimal data for a very limited impact on performance.
  • Self-hosted. No more security compliance checks, 3rd-parties processing user data. Everything OpenReplay captures stays in your cloud for a complete control over your data.
  • Privacy controls. Fine-grained security features for sanitizing user data.
  • Easy deploy. With support of major public cloud providers (AWS, GCP, Azure, DigitalOcean).

Features

  • Session replay: Lets you relive your users' experience, see where they struggle and how it affects their behavior. Each session replay is automatically analyzed based on heuristics, for easy triage.
  • DevTools: It's like debugging in your own browser. OpenReplay provides you with the full context (network activity, JS errors, store actions/state and 40+ metrics) so you can instantly reproduce bugs and understand performance issues.
  • Assist: Helps you support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.
  • Omni-search: Search and filter by almost any user action/criteria, session attribute or technical event, so you can answer any question. No instrumentation required.
  • Funnels: For surfacing the most impactful issues causing conversion and revenue loss.
  • Fine-grained privacy controls: Choose what to capture, what to obscure or what to ignore so user data doesn't even reach your servers.
  • Plugins oriented: Get to the root cause even faster by tracking application state (Redux, VueX, MobX, NgRx) and logging GraphQL queries (Apollo, Relay) and Fetch requests.
  • Integrations: Sync your backend logs with your session replays and see what happened front-to-back. OpenReplay supports Sentry, Datadog, CloudWatch, Stackdriver, Elastic and more.

Deployment Options

OpenReplay can be deployed anywhere. Follow our step-by-step guides for deploying it on major public clouds:

Closing comments : Why Replay Matters?

Do want to remain reactive or want to be nimble when it comes to customer experience ?

No alt text provided for this image

要查看或添加评论,请登录

社区洞察

其他会员也浏览了