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.