Clarity Live Recording is Here!

Clarity Live Recording is Here!

Lights, camera, and action! Clarity now supports live sessions with zero delay. Starting this week, Clarity has added this functionality to Session recordings: Live recordings tab. You don’t need to do anything special to get this feature, just open your Clarity account and start accessing your real-time videos.

How to Watch Live Recordings

You’ll see Live Users and Distinct Users in your Clarity dashboard or session recordings. Select the Live Users recordings to view the users currently on your website. Live recording is perfect for checking if you installed Clarity correctly, monitoring bugs on a new feature launch, and getting a front-row seat to your customer’s experience.

You’ll be able to watch those users in real-time without delay or watch the session from the start up until they haven’t had any recent activity. There will be three different view settings that will indicate the viewing status.

Not Live

If you’re watching something that happened in the past, the button will say GO LIVE, letting you jump to where the user is right now on your website.

Live

If the button says LIVE, you are currently watching the most updated actions your user is making. If you want to watch from the start, click the beginning of the timeline.

Waiting for Activity

This notification will appear if the user has paused their activity. It will resume as soon as the user begins to engage with your website.

Why Doesn’t My Recording Have a Live Option

If you’re looking at your session recording and don’t see the LIVE option, this means you’re viewing a recording from a past session. These are useful when filtering data to look at dead clicks, javascript errors, and any other query you desire.

Filtering in Live View

Since we are on the topic of filtering, there are a few options to filter through when using the live view. The main filters are device, browser, operating system, and country. This can help you narrow down the live recordings you would like to watch.

Tell Us How You Use Live Recording

Clarity Live Recording is a feature we are super excited about at Clarity. We will continue launching new features that will provide value to our users at a low fee of FREE forever 😀!

Give it a try, and if Live recording becomes a part of your team’s process, email us your story at claritycasestudies@microsoft.com. We’d love to discuss featuring you in an upcoming customer case study!

2nd Year of Clarity

2nd Year of Clarity

Happy 2nd Birthday to us! We’ve been working hard at Clarity, and it is okay to toot your celebratory horn every now and then. So without further ado, let’s hop right into our birthday recap!

Elevar & Clarity – Enabling Better Decision Making

Elevar & Clarity – Enabling Better Decision Making

Understanding data, conversions, and customer journeys are key to making informed adjustments as well as understanding how people are using your product or website.

Elevar powers conversion tracking for direct-to-consumer brands on Shopify and Shopify Plus that rely on accurate data to make strategic business decisions. They do this by unlocking the latest in tracking methodologies with server-side tracking.

They transform shopping behavior into structured trackable events with attribution like UTM parameters, click ID’s, and customer data. You can connect your analytics tracking and marketing destinations like social media conversion APIs that rely on first-party customer data to match clicks to conversions. Once these events are captured, they can be directed to any ad or analytics platform the merchant relies on and needs to connect with in the format required by those platforms.

Once live, Elevar pushes 100% of consumer shopping and conversion data to the marketing channels. This data helps optimize the algorithms used by these channels to improve ad performance.

Elevar also has tag error reporting, channel accuracy reporting (to ensure all channels receive the data collected), and some attribution reporting.

Elevar offers an integration with Microsoft Clarity, adding behavior analytics insights in the form of Heatmaps, Screen Recordings, and behavior-focused insights. By combining Elevar’s conversion tracking capabilities with Clarity’s behavior analytics insights, you’ll be able to make better data-driven decisions as a marketer, analyst, or Shopify brand owner. Here’s how to get started with adding Clarity to Elevar.

Step 1:

In your Elevar App, go to Pre-Built Tags.

Step 2:

In the Search bar, search for Microsoft Clarity.

Step 3:

Locate your Clarity Project ID and copy it by following the below instructions:

  1. From the Clarity dashboard, go to Settings.
  2. Select Overview from the left panel.
  3. Copy the Project ID (for example, 55u86t0118).

Step 4:

Paste the Clarity Project ID into MS Clarity ID. Select Download Container.

Step 5:

Sign in to your Google Tag Manager Account. Go to GTM Web Container. Select Admin > Import Container.

Step 6:

Select to import the file you downloaded in Step 4. Create a New Workspace and name it Microsoft Clarity Tracking. In Choose an import option, select Merge > Overwrite conflicting tags, triggers, and variables.

Select Confirm to import tags.

Step 7:

Go to Workspace. Select Microsoft Clarity Tracking in CURRENT WORKSPACE.

Select Submit.

Step 8:

Select Publish to save Submission Configurations and set your tracking live.

Start viewing Recordings, Heatmaps, and Dashboard data in a few hours.

Analyzify is now integrated with Clarity!

Analyzify is now integrated with Clarity!

Analyzify is an all-in-one Shopify data analytics app that takes care of all your data collection and tracking needs for your Shopify store. You can set Analyzify up within 20 minutes to accumulate meaningful data through multiple channels. The extensive and diverse experience working with Shopify merchants means they know how challenging it can be to collect and evaluate the right data that allows you to make the right decisions based on real metrics. Analyzify makes that process quicker and easier for you.

Analyzify gives you that much-needed insight into your Shopify store. Elevate your Shopify stores data and performance with enhanced data layers, Google Analytics 4 integration, Shopify Google Ads for accurate conversion tracking, and so much more from Analyzify.

Problems Solved

For some, this might seem a little intimidating or out of their field of expertise, but let’s cover exactly what problems Analyzify can help you solve.

Google Analytics

Almost every website uses Google Analytics to track their visitors’ data, but it doesn’t necessarily mean the data you’re getting is correct. Here are a few of the solutions you’ll receive with Analyzify:

  • Missing GA4 e-commerce data/reports
  • Make sure Checkout funnels are working
  • Payment & checkout providers in referrals (seeing Stripe, PayPal, etc. as referrals)
  • Google Analytics & Shopify data inaccuracy (Get accuracy above 90%)
  • Helps Correct Attribution Channels (Too much direct traffic)

Google Ads

Accurate and reliable conversion tracking is essential for running successful Google Ad campaigns with Analyzify, this is easily obtained.

  • Accurate & reliable conversion tracking using Google Tag Manager. Purchase, cart, user-level data is also included.
  • Missing conversions or counting multiple? Analyzify delivers the best solution for you.
  • Global Site Tag – dynamic remarketing setup errors
  • Wrong attribution model correction (90% of Shopify stores have incorrect attribution models)

Google Tag Manager & Data Layers

Not sure how to use GTM or Data Layers on your Shopify store? Don’t worry Analyzify has a team of experts that got your back. They will guide you through the setup and ensure everything runs smoothly and accurately.

GDPR Compliant

GDPR & GTM not working together? That’s a complex setup, but don’t worry—they’ve got you covered! GDPR compliance is a breeze with our specially-crafted GTM container. Analyzify is integrated with three different reliable cookie consent solutions, and we also provide audit & setup services for GDPR.

Clarity Integration

Analyzify was already amazing, but they got a little more amazing with their super simple integration with Clarity. You can be up and running with Clarity inside your Analyzify dashboard within minutes following these easy steps. With this integration, you’ll receive data and behavioral analytics to optimize your Shopify store.

Clarity Now Integrated With Optimizely!

Clarity Now Integrated With Optimizely!

Optimizely on the Web lets you run A/B tests and experiments at scale. Optimizely Web Extensions are reusable templates that developers can use to create custom features for non-technical teams. It is an optimization platform that provides a way to test, validate changes, view analytics, and modify the default behavior of web pages to allow you to grow your business.

The Optimizely Web platform enables you to add and manage various experiments, as seen below.

The visual editor allows you to implement changes on your site in minutes to change the experience of your customers. Quickly adapt to through experimentation to accelerate success, get ahead, and stay there.

Also, quickly see analytics results all in one place.

Optimizely has added integration with Microsoft Clarity. Adding Clarity offers some great benefits.

  1. The opportunity to see behavior analytics across your website, enabling users to make key changes which would be otherwise elusive.
  2. This includes the use of Heatmaps, Clickmaps, and Sessions Recordings to see how users interact with your site, which is critical to understanding what changes to implement and why.
  3. You can also easily see Rage Clicks, Dead Clicks, Quickbacks, and other points at which users get frustrated.

Here’s how to get started adding Clarity to Optimizely.

Step 1

Sign in to Optimizely. Go to Settings > Integrations.

Expand the Create Analytics Integration drop-down list and select Using JSON.

Step 2

Paste the following code into the JSON field and select Create Extension.

Step 3

Go to Settings > Integrations page to view the custom integration you just added. Select Custom Clarity integration from the list and turn On Enable Integration.

Step 4

You can add the new integration to specific experiments in two ways:

Manually add new experiments

Add the new integrations to specific experiments as shown below:

Automatically add new experiments.

Automatically add to all new experiments using the following steps:

  • Go to Settings > Integrations > Custom Clarity integration.
  • Select Edit.
  • Select Settings. The Edit Custom Analytics Integration window displays.
  • Check Enable this integration by default for all new experiments box.
  • Select Update Custom Analytics Integration to save the changes.

Step 5

Use the experiment data in Clarity:

  • Go to your Clarity dashboard and select your desired project.
  • Go to Filters > Custom filters > Custom tags.
  • Select Optimizely from the drop-down and your desired experiment/variant.
  • Select Apply.
  • Select Save as segment to save this custom filter as a segment.
  • Select Save as segment to save this custom filter as a segment.

After you can go here to verify your installation.

Bubble Is Now Integrated With Clarity!

Bubble Is Now Integrated With Clarity!

Learning code is hard, but building tech is easy with Bubble, a visual programming language that lets you build web applications without code. With Bubble, you can build anything such as a marketplace, a social network, or even a CRM.

Bubble has a generous and expansive drag-and-drop interface that allows for creative use of dynamic content. Their builder catalog also has all the elements you might need to design the perfect website.

Never worry about how to get your site up and running, as Bubble comes with robust hosting features! There are also no limits on the number of users, traffic volume, or data storage—we’re all about no limits at Clarity!

Bubble also helps with growth, engagement, and measurement with services like email and SEO that integrate with tools you already use. You’ll be able to measure and track behaviors to make better decisions as your product and business evolve.

Bubble offers many other great features, such as collaboration, a responsive design, a marketplace of templates, and powerful security.

Newly added is the integration with Microsoft Clarity! By combining Clarity with Bubble, you’ll be able to capture how real people use your custom website utilizing Heatmaps, Session Recordings, analytics insights, and integrations with popular tools such as Google Analytics.

Simply put, easily build websites and web applications using Bubble and learn how customers interact, navigate and explore your website using Microsoft Clarity. Easy web development with easy behavioral analytics.

Here’s how to get started:

Step 1:

In your Project Settings, Overview section, notice the “Project ID”, for example “d0hgqtuduv”

Step 2:

In plugin tab, enter your Microsoft Clarify Project ID.

Step 3:

If you have trouble capturing all your users’ interactions, set in Settings > Masking > Relaxed setting

After integrating Clarity with Bubble, behavior analytics insights will begin populating, and you’ll be able to enjoy the benefits. As always, if you have any questions, you can reach us at clarityms@microsoft.com or on social media.

AITOC/Magento & Clarity Now Integrated!

AITOC/Magento & Clarity Now Integrated!

AITOC is a world-leading provider of custom solutions for Magento. They are one of the few companies that have been creating Magento extensions since the very launch of the ecommerce platform. Magento is a powerful and flexible, customizable ecommerce platform that currently powers 1.2% of sites on the Internet. There are over 200,000 Magento developers around the world, and e-commerce businesses attribute 10–80% of their revenue uplift to Magento. Magento is a feature-rich ecommerce solution with built-in PHP that provides online sellers with complete flexibility and control over their stores’ functionalities and appearance– it’s understandable why companies such as Nike, Samsung and Land Rover all use Magento.

It’s advantageous to customize your online store with high-quality extensions, add-ons, modules, apps & plugins designed specifically for the Magento. Adding plugins can help keep your inventory organized, help track deliveries, expand your business, and cut down on the cost of website development.

AITOC offers a FREE Microsoft Clarity extension for Magento 2 for both community and enterprise. No code changes are required to configure the extension and start using Clarity integration.

For ecommerce online sellers, Clarity is a no-brainer as it offers powerful data and insights into customer behavior. You’ll quickly be able to view Heat Maps and Click Maps which show what users want and how you can play around with design to get more attention from them on specific items. With Clarity installed on your ecommerce site you’ll be able to:

  • Identify places of user frustration with insights like rage clicks
  • Find product bugs on your ecommerce site that can damage the user experience
  • Explore potential issues with specific user groups identified by Clarity

With Session Recordings watch how users navigate your ecommerce site, when you lose them, or if they experience pain points. You can also easily narrow down what you want to watch with filters:

  • Sort by user location, browser, session duration, campaign
  • Create custom filters to explore scenarios specific to your store
  • See recordings for your Google Analytics segments too

To learn more about how to install Clarity on AITCO visit our documentation page here.

Introducing: Click Errors and JavaScript Error Details

Introducing: Click Errors and JavaScript Error Details

JavaScript errors (or JS errors) are pesky things—they occur frequently, may interfere with your site visitor’s user experience, and are often hard to understand or debug. That’s why Clarity has made some big updates to help you out here. Today, we’re excited to announce:

  • JavaScript error details
  • Click Errors metric

Our data shows that on average, 9% of a site’s sessions have JavaScript (JS) errors. Let’s say you try to fix them and dig into your errors more, you’ll run into two main challenges:

  1. There are hundreds of different error types.
  2. Not all errors are actually user-impacting.

Let’s walk you through how to use our new feature to address these.

JAVASCRIPT ERROR DETAILS

Not all JavaScript errors are the same—they can vary greatly based on user details (like browser, OS, country), different parts of your script, etc. To debug your JavaScript errors, you must first break them down into specific JS error types. We’ve made this easy for you by showing within your Clarity dashboard a breakdown of your JS error messages, sorted by frequency. This will make your software engineer’s life much easier.

TOP JS ERRORS ON CLARITY PROJECTS

Across all Clarity projects, we do also see some common error types—if you have one of the following, you’re not alone:

  1. Illegal invocation error (7.4% of projects)
    • This is typically caused when the “context” of a function is lost. In other words, a function’s keyword is not referring to the object it originally did.
  2. Unexpected Token ‘<’ (6.5% of projects)
    • This is caused by an unclosed <script> tag.
  3. ResizeObserver Loop Limit exceeded (5.7% of projects)
    • This means that your ResizeObserver wasn’t able to deliver all observations in a single animation frame. This error is typically not user-impacting and can be safely ignored.
  4. JQuery is not defined (3.4% of projects)
    • This refers to a function in your code that depends on jQuery, but the code contains no additional reference to jQuery

We also observe with JS errors, low effort typically yields a high reward. Our data shows that >30% of Clarity projects have a single error responsible for more than 50% of all script error issues. This means that resolving just one error type could result in a substantial improvement across your site and your users’ experience!

CLICK ERRORS

As you start fixing the errors, you may notice that not all JavaScript errors have the same root cause. Some errors fire from minor data bugs that you already know about. Some other errors fire from user-related actions that may cause an unusable website.

To help you pinpoint these errors associated with user clicks, Clarity has introduced a new Click errors metric. This metric narrows down the JS errors to only a specific subset that occurs after a user click. See your Click Errors by clicking on the toggle at the top of the JavaScript error widget:

CONCLUSION

JavaScript errors are important to pay attention to, as they can be early indications that something on your site is wrong. With Clarity’s new JavaScript error details and new Click error metric, you can now see the specific error messages contributing to JS errors and identify errors associated with clicks. We hope these features go a long way in helping you reduce and minimize the coverage of JS errors on your website!

Let us know your thoughts—we always welcome feedback!

We Now Support Changing Your Heatmap Screenshot

We Now Support Changing Your Heatmap Screenshot

With web page functionality becoming increasingly sophisticated, it’s hard to capture the desired state of web page in a heatmap. Clarity now supports the ability to change the screenshot for a given web page so that you can view heatmap for the page state you want to analyze. 

When it’s time to update your heatmap screenshot, click the camera icon to see a collection of screenshot images displaying different views to choose from.  

These screenshots are automatically generated, aimed to give you variety of states for your web page. Once you have found the screenshot you’d like to see heat for, click the “view data” button to see heatmap details. 

To learn more about how to update heatmap screenshot, check out our documentation here.

Another way to see heatmap on your website would be via our live extension. Our extension updates the heat for dynamic states of your site on the fly.

Clarity is now integrated with Webflow!

Clarity is now integrated with Webflow!

Webflow is an easy to use website canvas creation tool anyone can get the hang of quick. The canvas tool can create interesting and powerful websites with useful interactions, integrations, visuals and more.

Webflow is popular among all types of people, from business owners and marketers to designers and music artists. The platform has a fully functional CMS (content management system) that allows you to manage and also publish content like blogs, products, videos and more.

Webflow also has a vast array of templates to choose from as well as the full power of HTML, CSS, and Javascript in a visual canvas.

Webflow has added integration with Microsoft Clarity to make your experience building and operating a website more successful with user behavior analytics. Here’s how to get started with Clarity.

The first thing you need to do is locate your Clarity Project ID and copy it by following the below instructions:

Step 1

From the Clarity dashboard, go to Settings -> Overview.

Copy the Clarity tracking code from your specific Clarity project.

Step 2

Go to Webflow dashboard. Select the Webflow icon in the top left of the dashboard.

Step 3

Select Project Settings.

Step 4

Select Custom Code.

Step 5

Paste your Clarity Tracking Code into the Head Code box. Select Save Changes.

Step 6

On your project settings page, choose Publish. From the drop-down, select a Domain for the site listed in Clarity. Select Publish to Selected Domains.

Once setup you’ll be able to see Sessions Recordings, Heat Maps, traffic sources, visited pages, and more. With these insights, developing an intuitive website for your customers is much easier. By being able to directly see their user journey making swift changes to your website, and a/b testing in in the early stage is a breeze.

Custom ID Functionality: New Feature Release!

Custom ID Functionality: New Feature Release!

One of the benefits of Clarity is being able to dial in the interface to fit your needs when it comes to analytics, reporting and visualizations. We are excited to announce a new update to Clarity that will add further functionality for custom IDs.

If you aren’t familiar with the user ID feature here’s how it works. A generic user ID is assigned to each visitor when they come to your site, the ID will be assigned to features like Screen Recordings. At the same time, you can also assign other custom identifiers for users, sessions, and pages if you want to track custom features on your site. As seen below, it was previously possible only to filter by the randomly assigned Clarity user ID.

After receiving your valuable feedback on expanding the custom ID feature, we categorized them into these top requests:

  • Making user ID clickable
  • A customized way to identify site attributes
  • Ability to filter by custom IDs

We took your feedback to heart and added new functionality for custom IDs. Take a look below to see how some of these new features will look. Both the details of custom IDs in session info and the ability to filter by custom IDs were added with this new release.

Above you can see the newly added filter fields which will allow you to filter by custom IDs.

Above are how the recordings session info will look when utilizing the custom ID filters:

  • Custom user ID, session ID and page ID are included as part of the session info.
  • You can directly click on Clarity user ID or any of the custom IDs to quickly apply them as a filter and watch additional recordings for that user, session or page.
  • Custom ID is also added to the Filter by this list in each recording card.

We hope that these newly added features will allow you to better track and interpret customer data. As always if you have any feedback for us please reach out. You can also learn more about filters here, and to learn more about custom identifies and our API visit here.

Clarity is Now Integrated with Softr.io!

Clarity is Now Integrated with Softr.io!

Our team is super excited to announce the native integration of Microsoft Clarity in Softr.io!

Softr.io is a powerful software that can create apps, websites, client portals, and much more with just a few clicks.

It is the world’s largest ecosystem for building no-code apps. At Softr, they believe that everyone should have the ability to create the tools they need, without engineers or designers.

Through Softr.io you can now link data directly to Clarity! With heatmaps and session recordings, you’ll be able to visualize vital data feedback on the projects you created with Softr. Learn how to link your Soft.io data to Clarity here.

Mario Araujo, Growth Lead at Softr.io said:

“Softr.io makes app building as easy as Lego. With Microsoft Clarity integrated, they are now able to understand how their users interact with their web and mobile applications. It’s like having users sitting right next to you.”

Just another reason to join Clarity! A free-forever feature-rich user behavior tool! Get started today!