Recherche avancée

Sur d’autres sites (13811)

• A systematic approach to making Web Applications accessible

  22 février 2012, par silvia

  With the latest developments in HTML5 and the still fairly new ARIA (Accessible Rich Interface Applications) attributes introduced by the W3C WAI (Web Accessibility Initiative), browsers have now implemented many features that allow you to make your JavaScript-heavy Web applications accessible.

  Since I began working on making a complex web application accessible just over a year ago, I discovered that there was no step-by-step guide to approaching the changes necessary for creating an accessible Web application. Therefore, many people believe that it is still hard, if not impossible, to make Web applications accessible. In fact, it can be approached systematically, as this article will describe.

  This post is based on a talk that Alice Boxhall and I gave at the recent Linux.conf.au titled “Developing accessible Web apps – how hard can it be ?” (slides, video), which in turn was based on a Google Developer Day talk by Rachel Shearer (slides).

  These talks, and this article, introduce a process that you can follow to make your Web applications accessible : each step will take you closer to having an application that can be accessed using a keyboard alone, and by users of screenreaders and other accessibility technology (AT).

  The recommendations here only roughly conform to the requirements of WCAG (Web Content Accessibility Guidelines), which is the basis of legal accessibility requirements in many jurisdictions. The steps in this article may or may not be sufficient to meet a legal requirement. It is focused on the practical outcome of ensuring users with disabilities can use your Web application.

  Step-by-step Approach

  The steps to follow to make your Web apps accessible are as follows :

  1. Use native HTML tags wherever possible
  2. Make interactive elements keyboard accessible
  3. Provide extra markup for AT (accessibility technology)

  If you are a total newcomer to accessibility, I highly recommend installing a screenreader and just trying to read/navigate some Web pages. On Windows you can install the free NVDA screenreader, on Mac you can activate the pre-installed VoiceOver screenreader, on Linux you can use Orca, and if you just want a browser plugin for Chrome try installing ChromeVox.

  1. Use native HTML tags

  As you implement your Web application with interactive controls, try to use as many native HTML tags as possible.

  HTML5 provides a rich set of elements which can be used to both add functionality and provide semantic context to your page. HTML4 already included many useful interactive controls, like <a>, <button>, <input> and <select>, and semantic landmark elements like <h1>. HTML5 adds richer <input> controls, and a more sophisticated set of semantic markup elements like such as <time>, <progress>, <meter>, <nav>, <header>, <article> and <aside>. (Note : check browser support for browser support of the new tags).

  Using as much of the rich HTML5 markup as possible means that you get all of the accessibility features which have been implemented in the browser for those elements, such as keyboard support, short-cut keys and accessibility metadata, for free. For generic tags you have to implement them completely from scratch.

  What exactly do you miss out on when you use a generic tag such as <div> over a specific semantic one such as <button> ?

  1. Generic tags are not focusable. That means you cannot reach them through using the [tab] on the keyboard.
  2. You cannot activate them with the space bar or enter key or perform any other keyboard interaction that would be regarded as typical with such a control.
  3. Since the role that the control represents is not specified in code but is only exposed through your custom visual styling, screenreaders cannot express to their users what type of control it is, e.g. button or link.
  4. Neither can screenreaders add the control to the list of controls on the page that are of a certain type, e.g. to navigate to all headers of a certain level on the page.
  5. And finally you need to manually style the element in order for it to look distinctive compared to other elements on the page ; using a default control will allow the browser to provide the default style for the platform, which you can still override using CSS if you want.

  Example :

  Compare these two buttons. The first one is implemented using a <div> tag, the second one using a <button> tag. Try using a screenreader to experience the difference.

  Send	<style> .custombutton cursor : pointer ; border : 1px solid #000 ; background-color : #F6F6F6 ; display : inline-block ; padding : 2px 5px ; </style> <div class="custombutton" onclick="alert(’sent !’)"> Send </div>
  Send	<button onclick="alert(’sent !’)"> Send </button>

  2. Make interactive elements keyboard accessible

  Many sophisticated web applications have some interactive controls that just have no appropriate HTML tag equivalent. In this case, you will have had to build an interactive element with JavaScript and <div> and/or <span> tags and lots of custom styling. The good news is, it’s possible to make even these custom controls accessible, and as a side benefit you will also make your application smoother to use for power users.

  The first thing you can do to test usability of your control, or your Web app, is to unplug the mouse and try to use only the [TAB] and [ENTER] keys to interact with your application.

  

  Try the following :

  • Can you reach all interactive elements with [TAB] ?
  • Can you activate interactive elements with [ENTER] (or [SPACE]) ?
  • Are the elements in the right tab order ?
  • After interaction : is the right element in focus ?
  • Is there a keyboard shortcut that activates the element (accesskey) ?

  No ? Let’s fix it.

  2.1. Reaching interactive elements

  If you have an element on your page that cannot be reached with [TAB], put a @tabindex attribute on it.

  Example :

  Here we have a <span> tag that works as a link (don’t do this – it’s just a simple example). The first one cannot be reached using [TAB] but the second one has a tabindex and is thus part of the tab order of the HTML page.

  (Note : since we experiment lots with the tabindex in this article, to avoid confusion, click on some text in this paragraph and then hit the [TAB] key to see where it goes next. The click will set your keyboard focus in the DOM.)

  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)"> Click </span>
  Click	<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>

  You set @tabindex=0 to add an element into the native tab order of the page, which is the DOM order.

  2.2. Activating interactive elements

  Next, you typically want to be able to use the [ENTER] and [SPACE] keys to activate your custom control. To do so, you will need to implement an onkeydown event handler. Note that the keyCode for [ENTER] is 13 and for [SPACE] is 32.

  Example :

  Let’s add this functionality to the <span> tag from before. Try tabbing to it and hit the [ENTER] or [SPACE] key.

  Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>
  &lt;script&gt;<br /> function handlekey(event) {<br /> var target = event.target || event.srcElement;<br /> if (event.keyCode == 13 || event.keyCode == 32) { target.onclick(); }<br /> }<br /> &lt;/script&gt; Click	<span class="customlink" onclick="alert(’activated !’)" tabindex="0" onkeydown="handlekey(event) ;"> Click </span> <script> function handlekey(event) var target = event.target || event.srcElement ; if (event.keyCode == 13 || event.keyCode == 32) target.onclick() ; </script>

  Note that there are some controls that might need support for keys other than [tab] or [enter] to be able to use them from the keyboard alone, for example a custom list box, menu or slider should respond to arrow keys.

  2.3. Elements in the right tab order

  Have you tried tabbing to all the elements on your page that you care about ? If so, check if the order of tab stops seems right. The default order is given by the order in which interactive elements appear in the DOM. For example, if your page’s code has a right column that is coded before the main article, then the links in the right column will receive tab focus first before the links in the main article.

  You could change this by re-ordering your DOM, but oftentimes this is not possible. So, instead give the elements that should be the first ones to receive tab focus a positive @tabindex. The tab access will start at the smallest non-zero @tabindex value. If multiple elements share the same @tabindex value, these controls receive tab focus in DOM order. After that, interactive elements and those with @tabindex=0 will receive tab focus in DOM order.

  Example :

  The one thing that always annoys me the most is if the tab order in forms that I am supposed to fill in is illogical. Here is an example where the first and last name are separated by the address because they are in a table. We could fix it by moving to a <div> based layout, but let’s use @tabindex to demonstrate the change.

  Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname"> </td> <td>Address : <input type="text" id="address"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname"> </td> <td>City : <input type="text" id="city"> </td> </tr> </table>
  Click here to test this form, then [TAB] : Firstname : Address : Lastname : City :	<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname" tabindex="10"> </td> <td>Address : <input type="text" id="address" tabindex="30"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname" tabindex="20"> </td> <td>City : <input type="text" id="city" tabindex="40"> </td> </tr> </table>

  Be very careful with using non-zero tabindex values. Since they change the tab order on the page, you may get side effects that you might not have intended, such as having to give other elements on the page a non-zero tabindex value to avoid skipping too many other elements as I would need to do here.

  2.4. Focus on the right element

  Some of the controls that you create may be rather complex and open elements on the page that were previously hidden. This is particularly the case for drop-downs, pop-ups, and menus in general. Oftentimes the hidden element is not defined in the DOM right after the interactive control, such that a [TAB] will not put your keyboard focus on the next element that you are interacting with.

  The solution is to manage your keyboard focus from JavaScript using the .focus() method.

  Example :

  Here is a menu that is declared ahead of the menu button. If you tab onto the button and hit enter, the menu is revealed. But your tab focus is still on the menu button, so your next [TAB] will take you somewhere else. We fix it by setting the focus on the first menu item after opening the menu.

  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu(value) {<br /> document.getElementById(&quot;custommenu&quot;).style.display=value;<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; </script>
  Menu item1 Menu item2 Menu &lt;script&gt;<br /> function displayMenu2(value) {<br /> document.getElementById(&quot;custommenu2&quot;).style.display=value;<br /> document.getElementById(&quot;item1&quot;).focus();<br /> }<br /> &lt;/script&gt;	<div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; document.getElementById("item1").focus() ; </script>

  You will notice that there are still some things you can improve on here. For example, after you close the menu again with one of the menu items, the focus does not move back onto the menu button.

  Also, after opening the menu, you may prefer not to move the focus onto the first menu item but rather just onto the menu <div>. You can do so by giving that div a @tabindex and then calling .focus() on it. If you do not want to make the div part of the normal tabbing order, just give it a @tabindex=-1 value. This will allow your div to receive focus from script, but be exempt from accidental tabbing onto (though usually you just want to use @tabindex=0).

  Bonus : If you want to help keyboard users even more, you can also put outlines on the element that is currently in focus using CSS”s outline property. If you want to avoid the outlines for mouse users, you can dynamically add a class that removes the outline in mouseover events but leaves it for :focus.

  2.5. Provide sensible keyboard shortcuts

  At this stage your application is actually keyboard accessible. Congratulations !

  However, it’s still not very efficient : like power-users, screenreader users love keyboard shortcuts : can you imagine if you were forced to tab through an entire page, or navigate back to a menu tree at the top of the page, to reach each control you were interested in ? And, obviously, anything which makes navigating the app via the keyboard more efficient for screenreader users will benefit all power users as well, like the ubiquitous keyboard shortcuts for cut, copy and paste.

  HTML4 introduced so-called accesskeys for this. In HTML5 @accesskey is now allowed on all elements.

  The @accesskey attribute takes the value of a keyboard key (e.g. @accesskey="x") and is activated through platform- and browser-specific activation keys. For example, on the Mac it’s generally the [Ctrl] key, in IE it’ the [Alt] key, in Firefox on Windows [Shift]-[Alt], and in Opera on Windows [Shift]-[ESC]. You press the activation key and the accesskey together which either activates or focuses the element with the @accesskey attribute.

  Example :

  Send &lt;script&gt;<br /> var button = document.getElementById('accessbutton');<br /> if (button.accessKeyLabel) {<br />  button.innerHTML += ' (' + button.accessKeyLabel + ')';<br /> }<br /> &lt;/script&gt;

  <button id="accessbutton" onclick="alert(’sent !’)" accesskey="e"> Send </button> <script> var button = document.getElementById(’accessbutton’) ; if (button.accessKeyLabel) button.innerHTML += ’ (’ + button.accessKeyLabel + ’)’ ; </script>

  Now, the idea behind this is clever, but the execution is pretty poor. Firstly, the different activation keys between different platforms and browsers make it really hard for people to get used to the accesskeys. Secondly, the key combinations can conflict with browser and screenreader shortcut keys, the first of which will render browser shortcuts unusable and the second will effectively remove the accesskeys.

  In the end it is up to the Web application developer whether to use the accesskey attribute or whether to implement explicit shortcut keys for the application through key event handlers on the window object. In either case, make sure to provide a help list for your shortcut keys.

  Also note that a page with a really good hierarchical heading layout and use of ARIA landmarks can help to eliminate the need for accesskeys to jump around the page, since there are typically default navigations available in screen readers to jump directly to headings, hyperlinks, and ARIA landmarks.

  3. Provide markup for AT

  Having made the application keyboard accessible also has advantages for screenreaders, since they can now reach the controls individually and activate them. So, next we will use a screenreader and close our eyes to find out where we only provide visual cues to understand the necessary interaction.

  Here are some of the issues to consider :

  • Role may need to get identified
  • States may need to be kept track of
  • Properties may need to be made explicit
  • Labels may need to be provided for elements

  This is where the W3C’s ARIA (Accessible Rich Internet Applications) standard comes in. ARIA attributes provide semantic information to screen readers and other AT that is otherwise conveyed only visually.

  Note that using ARIA does not automatically implement the standard widget behavior – you’ll still need to add focus management, keyboard navigation, and change aria attribute values in script.

  3.1. ARIA roles

  After implementing a custom interactive widget, you need to add a @role attribute to indicate what type of controls it is, e.g. that it is playing the role of a standard tag such as a button.

  Example :

  This menu button is implemented as a <div>, but with a role of “button” it is announced as a button by a screenreader.

  Menu	<div tabindex="0" role="button">Menu</div>

  ARIA roles also describe composite controls that do not have a native HTML equivalent.

  Example :

  This menu with menu items is implemented as a set of <div> tags, but with a role of “menu” and “menuitem” items.

  Cut Copy Paste

  <div role="menu"> <div tabindex="0" role="menuitem">Cut</div> <div tabindex="0" role="menuitem">Copy</div> <div tabindex="0" role="menuitem">Paste</div> </div>

  3.2. ARIA states

  Some interactive controls represent different states, e.g. a checkbox can be checked or unchecked, or a menu can be expanded or collapsed.

  Example :

  The following menu has states on the menu items, which are here not just used to give an aural indication through the screenreader, but also a visual one through CSS.

  Left Center Right

  <style> .custombutton[aria-checked=true]:before content : "\2713 " ; </style> <div role="menu"> <div tabindex="0" role="menuitem" aria-checked="true">Left</div> <div tabindex="0" role="menuitem" aria-checked="false">Center</div> <div tabindex="0" role="menuitem" aria-checked="false">Right</div> </div>

  3.3. ARIA properties

  Some of the functionality of interactive controls cannot be captured by the role attribute alone. We have ARIA properties to add features that the screenreader needs to announce, such as aria-label, aria-haspopup, aria-activedescendant, or aria-live.

  Example :

  The following drop-down menu uses aria-haspopup to tell the screenreader that there is a popup hidden behind the menu button together with an ARIA state of aria-expanded to track whether it’s open or closed.

  Justify Left Center Right &lt;script&gt;<br /> var button = document.getElementById(&quot;button&quot;);<br /> var menu = document.getElementById(&quot;menu&quot;);<br /> var items = document.getElementsByClassName(&quot;menuitem&quot;);<br /> var focused = 0;<br /> function showMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'visible';<br />    button.setAttribute('aria-expanded','true');<br />    focused = getSelected();<br />    items[focused].focus();<br />  }<br />  function hideMenu(evt) {<br />    evt.stopPropagation();<br />    menu.style.visibility = 'hidden';<br />    button.setAttribute('aria-expanded','false');<br />    button.focus();<br />  }<br />  function getSelected() {<br />    for (var i=0; i &lt; items.length; i++) {<br />      if (items[i].getAttribute('aria-checked') == 'true') {<br />        return i;<br />      }<br />    }<br />  }<br />  function setSelected(elem) {<br />    var curSelected = getSelected();<br />    items[curSelected].setAttribute('aria-checked', 'false');<br />    elem.setAttribute('aria-checked', 'true');<br />  }<br />  function selectItem(evt) {<br />    setSelected(evt.target);<br />    hideMenu(evt);<br />  }<br /> function getPrevItem(index) {<br />    var prev = index - 1;<br />    if (prev &lt; 0) {<br />      prev = items.length - 1;<br />    }<br />    return prev;<br />  }<br />  function getNextItem(index) {<br />    var next = index + 1;<br />    if (next == items.length) {<br />      next = 0;<br />    }<br />    return next;<br />  }<br /> function handleButtonKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        showMenu(evt);<br />      default:<br />    }<br />  }<br />  function handleMenuKeys(evt) {<br />    evt.stopPropagation();<br />    var key = evt.keyCode;<br />    switch(key) {<br />      case (38): /* UP */<br />        focused = getPrevItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (40): /* DOWN */<br />        focused = getNextItem(focused);<br />        items[focused].focus();<br />        break;<br />      case (13): /* ENTER */<br />      case (32): /* SPACE */<br />        setSelected(evt.target);<br />          hideMenu(evt);<br />          break;<br />      case (27): /* ESC */<br />        hideMenu(evt);<br />         break;<br />      default:<br />    }<br />  }<br />  button.addEventListener('click', showMenu, false);<br />  button.addEventListener('keydown', handleButtonKeys, false);<br />  for (var i = 0;  i &lt; items.length; i++) {<br />    items[i].addEventListener('click', selectItem, false);<br />    items[i].addEventListener('keydown', handleMenuKeys, false);<br />  }<br /> &lt;/script&gt;

  <div class="custombutton" id="button" tabindex="0" role="button" aria-expanded="false" aria-haspopup="true"> <span>Justify</span> </div> <div role="menu" class="menu" id="menu" style="display : none ;"> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="true"> Left </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Center </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Right </div> </div> [CSS and JavaScript for example omitted]

  3.4. Labelling

  The main issue that people know about accessibility seems to be that they have to put alt text onto images. This is only one means to provide labels to screenreaders for page content. Labels are short informative pieces of text that provide a name to a control.

  There are actually several ways of providing labels for controls :

  • on img elements use @alt
  • on input elements use the label element
  • use @aria-labelledby if there is another element that contains the label
  • use @title if you also want a label to be used as a tooltip
  • otherwise use @aria-label

  I’ll provide examples for the first two use cases - the other use cases are simple to deduce.

  Example :

  The following two images show the rough concept for providing alt text for images : images that provide information should be transcribed, images that are just decorative should receive an empty @alt attribute.

  Image by Noah Sussman

  <img src="texture.jpg" alt=""> <img src="lolcat.jpg" alt="shocked lolcat titled ’HTML cannot do that !"> <img src="texture.jpg" alt="">

  When marking up decorative images with an empty @alt attribute, the image is actually completely removed from the accessibility tree and does not confuse the blind user. This is a desired effect, so do remember to mark up all your images with @alt attributes, even those that don’t contain anything of interest to AT.

  Example :

  In the example form above in Section 2.3, when tabbing directly on the input elements, the screen reader will only say "edit text" without announcing what meaning that text has. That’s not very useful. So let’s introduce a label element for the input elements. We’ll also add checkboxes with a label.

  Doctor title : Firstname : Lastname : Address : City : Remember me :

  <label>Doctor title :</label> <input type="checkbox" id="doctor"/> <label>Firstname :</label> <input type="text" id="firstname2"/> <label for="lastname2">Lastname :</label> <input type="text" id="lastname2"/> <label>Address : <input type="text" id="address2"> </label> <label for="city2">City : <input type="text" id="city2"> </label> <label for="remember">Remember me :</label> <input type="checkbox" id="remember">

  In this example we use several different approaches to show what a different it makes to use the <label> element to mark up input boxes.

  The first two fields just have a <label> element next to a <input> element. When using a screenreader you will not notice a difference between this and not using the <label> element because there is no connection between the <label> and the <input> element.

  In the third field we use the @for attribute to create that link. Now the input field isn’t just announced as "edit text", but rather as "Lastname edit text", which is much more useful. Also, the screenreader can now skip the labels and get straight on the input element.

  In the fourth and fifth field we actually encapsulate the <input> element inside the <label> element, thus avoiding the need for a @for attribute, though it doesn’t hurt to explicity add it.

  Finally we look at the checkbox. By including a referenced <label> element with the checkbox, we change the screenreaders announcement from just "checkbox not checked" to "Remember me checkbox not checked". Also notice that the click target now includes the label, making the checkbox not only more usable to screenreaders, but also for mouse users.

  4. Conclusions

  This article introduced a process that you can follow to make your Web applications accessible. As you do that, you will noticed that there are other things that you may need to do in order to give the best experience to a power user on a keyboard, a blind user using a screenreader, or a vision-impaired user using a screen magnifier. But once you’ve made a start, you will notice that it’s not all black magic and a lot can be achieved with just a little markup.

  You will find more markup in the WAI ARIA specification and many more resources at Mozilla’s ARIA portal. Now go and change the world !

  Many thanks to Alice Boxhall and Dominic Mazzoni for their proof-reading and suggested changes that really helped improve the article !

• Six Best Amplitude Alternatives

  10 décembre 2024, par Daniel Crough

  Product analytics is big business. Gone are the days when we could only guess what customers were doing with our products or services. Now, we can track, visualise, and analyse how they interact with them and, with that, constantly improve and optimise. 

  The problem is that many product analytics tools are expensive and complicated — especially for smaller businesses. They’re also packed with functionality more attuned to the needs of massive companies. 

  Amplitude is such a tool. It’s brilliant and it has all the bells and whistles that you’ll probably never need. Fortunately, there are alternatives. In this guide, we’ll explore the best of those alternatives and, along the way, provide the insight you’ll need to select the best analytics tool for your organisation. 

  Amplitude : a brief overview

  To set the stage, it makes sense to understand exactly what Amplitude offers. It’s a real-time data analytics tool for tracking user actions and gaining insight into engagement, retention, and revenue drivers. It helps you analyse that data and find answers to questions about what happened, why it happened, and what to do next.

  However, as good as Amplitude is, it has some significant disadvantages. While it does offer data export functionality, that seems deliberately restricted. It allows data exports for specific events, but it’s not possible to export complete data sets to manipulate or format in another tool. Even pulling it into a CSV file has a 10,000-row limit. There is an API, but not many third-party integration options.

  Getting data in can also be a problem. Amplitude requires manual tags on events that must be tracked for analysis, which can leave holes in the data if every possible subsequent action isn’t tagged. That’s a time-consuming exercise, and it’s made worse because those tags will have to be updated every time the website or app is updated. 

  As good as it is, it can also be overwhelming because it’s stacked with features that can create confusion for novice or inexperienced analysts. It’s also expensive. There is a freemium plan that limits functionality and events. Still, when an organisation wants to upgrade for additional functionality or to analyse more events, the step up to the paid plan is massive.

  Lastly, Amplitude has made some strides towards being a web analytics option, but it lacks some basic functionality that may frustrate people who are trying to see the full picture from web to app.

  Snapshot of Amplitude alternatives

  So, in place of Amplitude, what product analytics tools are available that won’t break the bank and still provide the functionality needed to improve your product ? The good news is that there are literally hundreds of alternatives, and we’ve picked out six of the best.

  1. Matomo – Best privacy-focused web and mobile analytics
  2. Mixpanel – Best for product analytics
  3. Google Analytics – Best free option
  4. Adobe Analytics – Best for predictive analytics
  5. Umami – Best lightweight tool for product analytics
  6. Heap – Best for automatic user data capture

  A more detailed analysis of the Amplitude alternatives

  Now, let’s dive deeper into each of the six Amplitude alternatives. We’ll cover standout features, integrations, pricing, use cases and community critiques. By the end, you’ll know which analytics tool can help optimise website and app performance to grow your business.

  1. Matomo – Best privacy-friendly web and app analytics

  Privacy is a big concern these days, especially for organisations with a presence in the European Union (EU). Unlike other analytics tools, Matomo ensures you comply with privacy laws and regulations, like the General Data Protection Regulation (GDPR) and California’s Consumer Privacy Act (CCPA).

  Matomo helps businesses get the insights they need without compromising user privacy. It’s also one of the few self-hosted tools, ensuring data never has to leave your site.

  Matomo is open-source, which is also rare in this class of tools. That means it’s available for anyone to adapt and customise as they wish. Everything you need to build custom APIs is there.

  

  Its most useful capabilities include visitor logs and session recordings to trace the entire customer journey, spot drop-off points, and fine-tune sales funnels. The platform also comes with heatmaps and A/B testing tools. Heatmaps provide a useful visual representation of your data, while A/B testing allows for more informed, data-driven decisions.

  Despite its range of features, many reviewers laud Matomo’s user interface for its simplicity and user-friendliness. 

  Why Matomo : Matomo is an excellent alternative because it fills in the gaps where Amplitude comes up short, like with cookieless tracking. Also, while Amplitude focuses mainly on behavioural analytics, Matomo offers both behavioural and traditional analytics, which allows more profound insight into your data. Furthermore, Matomo fully complies with the strictest privacy regulations worldwide, including GDPR, LGPD, and HIPAA.

  Standout features include multi-touch attribution, visits log, content engagement, ecommerce, customer segments, event tracking, goal tracking, custom dimensions, custom reports, automated email reports, tag manager, sessions recordings, roll-up reporting that can pull data from multiple websites or mobile apps, Google Analytics importer, Matomo tag manager, comprehensive visitor tracking, heatmaps, and more.

  Integrations with 100+ technologies, including Cloudflare, WordPress, Magento, Google Ads, Drupal, WooCommerce, Vue, SharePoint and Wix.

  Pricing is free for Matomo On-Premise and $23 per month for Matomo Cloud, which comes with a 21-day free trial (no credit card required).

  Strengths

  • Privacy focused
  • Cookieless consent banners
  • 100% accurate, unsampled data
  • Open-source code 
  • Complete data ownership (no sharing with third parties)
  • Self-hosting and cloud-based options
  • Built-in GDPR Manager
  • Custom alerts, white labelling, dashboards and reports

  Community critiques 

  • Premium features are expensive and proprietary
  • Learning curve for non-technical users

  2. Mixpanel – Best for product analytics

  Mixpanel is a dedicated product analytics tool. It tracks and analyses customer interactions with a product across different platforms and helps optimise digital products to improve the user experience. It works with real-time data and can provide answers from customer and revenue data in seconds.

  It also presents data visualisations to show how customers interact with products.

  

  Mixpanel allows you to play around filters and views to reveal and chart some useful customer trends. (Image source)

  Why Mixpanel : One of the strengths of this platform is the ability to test hypotheses. Need to test an ambitious idea ? Mixpanel data can do it with real user analytics. That allows you to make data-driven decisions to find the best path forward.

  Standout features include automatic funnel segment analysis, behavioural segmentation, cohort segmentation, collaboration support, customisable dashboards, data pipelines, filtered data views, SQL queries, warehouse connectors and a wide range of pre-built integrations.

  Integrations available include Appcues, AppsFlyer, AWS, Databox, Figma, Google Cloud, Hotjar, HubSpot, Intercom, Integromat, MailChimp, Microsoft Azure, Segment, Slack, Statsig, VWO, Userpilot, WebEngage, Zapier, ZOH) and dozens of others.

  Pricing starts with a freemium plan valid for up to 20 million events per month. The growth plan is affordable at $25 per month and adds features like no-code data transformations and data pipeline add-ons. The enterprise version runs at a monthly cost of $833 and provides the full suite of features and services and premium support.

  There’s a caveat. Those prices only allow up to 1,000 Monthly Tracked Users (MTUs), calculated based on the number of visitors that perform a qualifying event each month. Beyond that, MTU plans start at $20,000 per year.

  Strengths

  • User behaviour and interaction tracking
  • Unlimited cohort segmentation capabilities
  • Drop-off analysis showing where users get stuck
  • A/B testing capabilities

  Community critiques 

  • Expensive enterprise features
  • Extensive setup and configuration requirements

  3. Google Analytics 4 – Best free web analytics tool

  The first thing to know about Google Analytics 4 is that it’s a web analytics tool. In other words, it tracks sessions, not user behaviours in app environments. It can provide details on how people found your website and how they go there, but it doesn’t offer much detail on how people use your product. 

  There is also an enterprise version, Google Analytics 360, which is not free. We’ve broken down the differences between the two versions elsewhere.

  

  GA4’s audience overview shows visitors, sessions, session lengths, bounce rates, and user engagement data. (Image source)

   

  Why Google Analytics : It’s great for gauging the effectiveness of marketing campaigns, tracking goal completions (purchases, cart additions, etc.) and spotting trends and patterns in user engagement.

  Standout features include built-in automation, customisable conversion goals, data drill-down functionality, detailed web acquisition metrics, media spend ROI calculations and out-of-the-box web analytics reporting.

  Integrations include all major CRM platforms, CallRail, DoubleClick DCM, Facebook, Hootsuite, Marketo, Shopify, VWO, WordPress, Zapier and Zendesk, among many others.

  Pricing is free for the basic version (Google Analytics 4) and scales based on features and data volume. The advanced features (in Google Analytics 360) are pitched at enterprises, and pricing is custom.

  Strengths

  • Free to start
  • Multiple website management
  • Traffic source details
  • Up-to-date traffic data

  Community critiques 

  • Steep learning curve 
  • Data sampling

  4. Adobe Analytics – Best for predictive analytics

  A fully configured Adobe Analytics implementation is the Swiss army knife of analytics tools. It begins with web analytics, adds product analytics, and then wraps it up nicely with predictive analytics.

  Unlike all the Amplitude alternatives here, there’s no free version. Adobe Analytics has a complicated pricing matrix with options like website analytics, marketing analytics, attribution, and predictive analytics. It also has a wide range of customisation options that will appeal to large businesses. But for smaller organisations, it may all be a bit too much.

  Mixpanel allows you to play around filters and views to reveal and chart some useful customer trends. (Image source)

  

  Adobe Analytics’ cross-channel attribution ties actions from different channels into a single customer journey. (Image source)

   

  Why Adobe Analytics : For current Adobe customers, this is a logical next step. Either way, Adobe Analytics can combine, evaluate, and analyse data from any part of the customer journey. It analyses that data with predictive intelligence to provide insights to enhance customer experiences.

   

  Standout features include AI-powered prediction analysis, attribution analysis, multi-channel data collection, segmentation and detailed customer journey analytics, product analytics and web analytics.

   

  Integrations are available through the Adobe Experience Cloud Exchange. Adobe Analytics also supports data exchange with brands such as BrightEdge, Branch.io, Google Ads, Hootsuite, Invoca, Salesforce and over 200 other integrations.

   

  Pricing starts at $500 monthly, but prospective customers are encouraged to contact the company for a needs-based quotation.

   

  Strengths

  • Drag-and-drop interface
  • Flexible segmentation 
  • Easy-to-create conversion funnels
  • Threshold-based alerts and notifications

  Community critiques 

  • No free version
  • Lack of technical support
  • Steep learning curve

  5. Umami – Best lightweight tool for web analytics

  The second of our open-source analytics solutions is Umami, a favourite in the software development community. Like Matomo, it’s a powerful and privacy-focused alternative that offers complete data control and respects user privacy. It’s also available as a cloud-based freemium plan or as a self-hosted solution.

   

  

  Umami’s dashboard reveals the busiest times of day and which pages are visited when.(Image source)

   

  Why Umami : Unami has a clear and simple user interface (UI) that lets you measure important metrics such as page visits, referrers, and user agents. It also features event tracking, although some reviewers complain that it’s quite limited.

  Standout features can be summed up in five words : privacy, simplicity, lightweight, real-time, and open-source. Unami’s UI is clean, intuitive and modern, and it doesn’t slow down your website. 

  Integrations include plugins for VuePress, Gatsby, Craft CMS, Docusaurus, WordPress and Publii, and a module for Nuxt. Unami’s API communicates with Javascript, PHP Laravel and Python.

  Pricing is free for up to 100k monthly events and three websites, but with limited support and data retention restrictions. The Pro plan costs $20 a month and gives you unlimited websites and team members, a million events (plus $0.00002 for each event over that), five years of data and email support. Their Enterprise plan is priced custom.

  Strengths

  • Freemium plan
  • Open-source
  • Lightweight 

  Community critiques 

  • Limited support options
  • Data retention restrictions
  • No funnel functionality

  6. Heap – Best for automatic data capture

  Product analytics with a twist is a good description of Heap. It features event auto-capture to track user interactions across all touchpoints in the user journey. This lets you fully understand how and why customers engage with your product and website. 

  Using a single Javascript snippet, Heap automatically collects data on everything users do, including how they got to your website. It also helps identify how different cohorts engage with your product, providing the critical insights teams need to boost conversion rates.

  

  Heap’s journeys feature combines funnel and path analysis. (Image source)

   

  Why Heap : The auto-capture functionality solves a major shortcoming of many product analytics tools — manual tracking. Instead of having to set up manual tags on events, Heap automatically captures all data on user activity from the start. 

  Standout features include event auto-capture, session replay, heatmaps, segments (or cohorts) and journeys, the last of which combines the functions of funnel and path analysis tools into a single feature.

  Integrations include AWS, Google, Microsoft Azure, major CRM platforms, Snowflake and many other data manipulation platforms.

  Pricing is quote-based across all payment tiers. There is also a free plan and a 14-day free trial.

  Strengths

  • Session replay
  • Heatmaps 
  • User segmentation
  • Simple setup 
  • Event auto-capture 

  Community critiques 

  • No A/B testing functionality
  • No GDPR compliance support

  Choosing the best solution for your team

  When selecting a tool, it’s crucial to understand how product analytics and web analytics solutions differ. 

  Product analytics tools track users or accounts and record the features they use, the funnels they move through, and the cohorts they’re part of. Web analytics tools focus more on sessions than users because they’re interested in data that can help improve website usage. 

  Some tools combine product and web analytics to do both of these jobs.

  Area of focus

  Product analytics tools track user behaviour within SaaS- or app-based products. They’re helpful for analysing features, user journeys, engagement metrics, product development and iteration. 

  Web analytics tools analyse web traffic, user demographics, and traffic sources. They’re most often used for marketing and SEO insights.

  Level of detail

  Product analytics tools provide in-depth tracking and analysis of user interactions, feature usage, and cohort analysis.

  Web analytics tools provide broader data on page views, bounce rates, and conversion tracking to analyse overall site performance.

  Whatever tools you try, your first step should be to search for reviews online to see what people who’ve used them think about them. There are some great review sites you can try. See what people are saying on Capterra, G2, Gartner Peer Insights, or TrustRadius. 

  Use Matomo to power your web and app analytics

  Web and product analytics is a competitive field, and there are many other tools worth considering. This list is a small cross-section of what’s available.

  That said, if you have concerns about privacy and costs, consider choosing Matomo. Start your 21-day free trial today.

  Start improving your websites and apps

  21 day free trial. No credit card required.

  
  

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (change)

  Choose your analytics subdomain
  

  .matomo.cloud

  I accept the terms and conditions and data processing agreement (DPA)

  
  Your information will be used to create an account on our cloud service. For more information please consult our privacy policy.
  
  
  

  Start improving your websites now

  

  &lt;script type=&quot;text/javascript&quot;&gt;<br />
           if ('object' === typeof navigator.languages &amp;&amp; navigator.languages.length &amp;&amp; navigator.languages.indexOf) {<br />
               var lang = navigator.languages;<br />
               if (lang.indexOf('de') !== -1 || lang.indexOf('de-DE') !== -1 || lang.indexOf('hu') !== -1 || lang.indexOf('el') !== -1 || lang.indexOf('fr') !== -1 || lang.indexOf('tr') !== -1 || lang.indexOf('uk') !== -1 || lang.indexOf('en-gb') !== -1 || lang.indexOf('no') !== -1 || lang.indexOf('nb') !== -1 || lang.indexOf('nn') !== -1 || lang.indexOf('sv') !== -1<br />
                   || lang.indexOf('it') !== -1 || lang.indexOf('nl') !== -1 || lang.indexOf('pl') !== -1 || lang.indexOf('da') !== -1 || lang.indexOf('es') !== -1) {<br />
                   document.getElementById('matomoDataCenterEU').style.display = 'block';<br />
                   document.getElementById('matomoSignUpFormContainer').className = 'prefix-10 grid-60 tablet-grid-100 mobile-grid-100';<br />
               }<br />
           }<br />
       &lt;/script&gt;

• 10 Matomo Features You Possibly Didn’t Know About

  28 octobre 2022, par Erin

  Most users know Matomo as the privacy-focussed web analytics tool with data accuracy, superior to Google Analytics. 

  And we’re thrilled to be that — and more ! 

  At Matomo, our underlying product vision is to provide a full stack of accurate, user-friendly and privacy-mindful online marketing tools. 

  Over the years, we’ve expanded beyond baseline website statistics. Matomo Cloud users also get to benefit from additional powerful tools for audience segmentation, conversion optimisation, advanced event tracking and more. 

  Here are the top 10 advanced Matomo features you wish you knew about earlier (but won’t stop using now !). 

  Funnels

  At first glance, most customer journeys look sporadic. But every marketer will tell you that there is a method to almost every users’ madness. Or more precisely — there’s a method you can use to guide users towards conversions. 

  That’s called a customer journey — a schematic set of steps and actions people complete from developing awareness and interest in your solution to consideration and finally conversion.

  On average, 8 touchpoints are required to turn a prospect into a customer. Though the number can be significantly bigger in B2B sales and smaller for B2C Ecommerce websites. 

  With the Funnels feature, you can first map all the on-site touchpoints (desired actions) for different types of customers. Then examine the results you’re getting as prospects move through these checkbox steps.

  Funnel reports provide :

  • High-level metrics such as “Funnel conversion rate”, “Number of funnel conversions”, “Number of funnel entries”. 
  • Drilled-down reports for each funnel and each tracked action within it. This way you can track the success rates of each step and estimate their contribution to the cumulative effect.

  Segmented funnel reports for specific user cohorts (with Matomo Segmentation enabled).

  

  What makes funnels so fun (pun intended) ? The variety of use cases and configurations ! 

  You can build funnels to track conversion rates for :

  • Newsletter subscriptions
  • Job board applications 
  • Checkout or payment 
  • Product landing pages
  • Seasonal promo campaigns

  …. And pretty much any other page where users must complete a meaningful action. So go test this out. 

  Form Analytics

  On-site forms are a 101 tactic for lead generation. For most service businesses, a “contact request” or a “booking inquiry” submission means a new lead in your pipeline. 

  That said : the average on-site form conversion rates across industries stand at below 50% : 

  • Property – 37% 
  • Telecoms – 40%
  • Software — 46.83%

  That’s not bad, but it could be better. If only you could figure out why people abandon your forms….

  Oh wait, Matomo Form Analytics can supply you with answers. Form Analytics provide real-time information on key form metrics — total views, starter rate, submitter rate, conversions and more.

  

  Separately the average form hesitation time is also provided (in other words, the time a user contemplates if filling in a form is worth the effort). Plus, Matomo also tracks the time spent on form submission.

  You can review : 

  • Top drop-off fields – to understand where you are losing prospects. These fields should either be removed or simplified (e.g., with a dropdown menu) to increase conversions.
  • Most corrected-field – this will provide a clear indication of where your prospects are struggling with a form. Providing help text can simplify the process and increase conversions. 
  • Unesserary fields – with this metric, you’ll know which optional fields your leads aren’t interested in filling in and can remove them to help drive conversions. 

  With Form Analytics, you’ll be able to boost conversions and create a better on-site experience with accurate user data. 

  A/B testing

  Marketing is both an art and a science. A/B testing (or split testing) helps you statistically verify which creative ideas perform better. 

  A good conversion rate optimisation (CRO) practice is to test different elements and to do so often to find your top contenders.

  What can you split test ? Loads of things :

  • Page slogans and call-to-actions 
  • Button or submission form placements
  • Different landing page designs and layouts
  • Seasonal promo offers and banners
  • Pricing information 
  • Customer testimonial placements 

  More times than not, those small changes in page design or copy can lead to a double-digit lift in conversion rates. Accounting software Sage saw a 30% traffic boost after changing the homepage layout, copy and CTAs based on split test data. Depositphotos, in turn, got a 9.32% increase in account registration rate (CR) after testing a timed pop-up registration form. 

  The wrinkle ? A/B testing software isn’t exactly affordable, with tools averaging $119 – $1,995 per month. Plus, you then have to integrate a third-party tool with your website analytics for proper attribution — and this can get messy.

  Matomo saves you the hassle in both cases. An A/B testing tool is part of your Cloud subscription and plays nicely with other features — goal tracking, heatmaps, historic visitor profiles and more. 

  You can run split tests with Matomo on your websites or mobile apps — and find out if version A, B, C or D is the top performer. 

  

  Advertising Conversion Exports

  A well-executed search marketing or banner remarketing campaign can drive heaps of traffic to your website. But the big question is : How much of it will convert ?

  The AdTech industry has a major problem with proper attribution and, because of it, with ad fraud. 

  Globally, digital ad fraud will cost advertisers a hefty $8 billion by the end of 2022. That’s when another $74 million in ad budgets get wasted per quarter. 

  The reasons for ad budget waste may vary, but they often have a common denominator : lack of reliable conversion tracking data.

  Matomo helps you get a better sense of how you spend your cents with Advertising Conversion Reports. Unlike other MarTech analytics tools, you don’t need to embed any third-party advertising network trackers into your website or compromise user privacy.

  Instead, you can easily export accurate conversion data from Matomo (either manually via a CSV file or automated with an HTTPS link) into your Google Ads, Microsoft Advertising or Yandex Ads for cross-validation. This way you can get an objective view of the performance of different campaigns and optimise your budget allocations accordingly. 

  Find out more about tracking ad campaigns with Matomo.

  Matomo Tag Manager

  The marketing technology landscape is close to crossing 10,000 different solutions. Cross-platform advertising trackers and all sorts of customer data management tools comprise the bulk of that growing stack. 

  Remember : Each new tool embed adds extra “weight” to your web page. More tracking scripts equal slower page loading speed — and more frustration for your users. Likewise, extra embeds often means dialling up the developer (which takes time). Or tinkering with the site code yourself (which can result in errors and still raise the need to call a developer). 

  With Tag Manager, you can easily generate tags for :

  • Custom analytics reports 
  • Newsletter signups
  • Affiliates 
  • Form submission tracking 
  • Exit popups and surveys
  • Ads and more

  With Matomo Tag Manager, you can monitor, update or delete everything from one convenient interface. Finally, you can programme custom triggers — conditions when the tag gets activated — and specify data points (variables) it should collect. The latter is a great choice for staying privacy-focused and excluding any sensitive user information from processing. 

  With our tag management system (TMS), no rogue tags will mess up your analytics or conversion tracking. 

  Session recordings

  User experience (UX) plays a pivotal role in your conversion rates. 

  A five-year McKinsey study of 300 publicly listed companies found that companies with strong design practices have 32 percentage points higher revenue growth than their peers. 

  But what makes up a great website design and browsing experience ? Veteran UX designers name seven qualities :

  

  To figure out if your website meets all these criteria, you can use Session Recording — a tool for recording how users interact with your website. 

  By observing clicks, mouse moves, scrolls and form interactions you can determine problematic website design areas such as poor header navigation, subpar button placements or “boring” blocks of text. 

  Such observational studies are a huge part of the UX research process because they provide unbiased data on interaction. Or as Nielsen Norman Group puts it :

  “The way to get user data boils down to the basic rules of usability :

  • Watch what people actually do.
  • Do not believe what people say they do.
  • Definitely don’t believe what people predict they may do in the future.” 

  Most user behaviour analytics tools sell such functionality for a fee. With Matomo Cloud, this feature is included in your subscription. 

  Heatmaps

  While Session Replays provide qualitative insights, Heatmaps supply you with first-hand qualitative insights. Instead of individual user browsing sessions, you get consolidated data on where they click and how they scroll through your website. 

  

  Heatmaps are another favourite among UX designers and their CRO peers because you can :

  • Validate earlier design decisions around information architecture, page layout, button placements and so on. 
  • Develop new design hypotheses based on stats and then translate them into website design improvements. 
  • Identify distractive no-click elements that confuse users and remove them to improve conversions. 
  • Locate problematic user interface (UI) areas on specific devices or operating systems and improve them for a seamless experience.

  To get even more granular results, you can apply up to 100 Matomo segments to drill down on specific user groups, geographies or devices. 

  This way you can make data-based decisions for A/B testing, updating or redesigning your website pages. 

  Custom Alerts

  When it comes to your website, you don’t want to miss anything big — be it your biggest sales day or a sudden nosedive in traffic. 

  That’s when Custom Alerts come in handy. 

  

  With a few clicks, you can set up email or text-based alerts about important website metrics. Once you hit that metric, Matomo will send a ping. 

  You can also set different types of Custom Alerts for your teams. For example, your website administrator can get alerted about critical technical performance issues such as a sudden spike in traffic. It can indicate a DDoS attack (in the worst case) — and timely resolution is crucial here. Or suggest that your website is going viral and you might need to provision extra computing resources to ensure optimal site performance.

  Your sales team, in turn, can get alerted about new form submissions, so that they can quickly move on to lead scoring and subsequent follow-ups. 

  Use cases are plentiful with this feature. 

  Custom Dashboards and Reports

  Did you know you can get a personalised view of the main Matomo dashboards ? 

  By design, we made different website stats available as separate widgets. Hence, you can cherry-pick which stats get a prominent spot. Moreover, you can create and embed custom widgets into your Matomo dashboard to display third-party insights (e.g., POS data).

  Set up custom dashboard views for different teams, business stakeholders or clients to keep them in the loop on relevant website metrics. 

  

  Custom Reports feature, in turn, lets you slice and dice your traffic analytics the way you please. You can combine up to three different data dimensions per report and then add any number of supported metrics to get a personalised analytics report.

  For example, to zoom in on your website performance in a specific target market you can apply “location” (e.g., Germany) and “action type” (e.g., app downloads) dimensions and then get segmented data on metrics such as total visits, conversion rates, revenue and more. 

  Get to know even more ways to customise Matomo deployment.

  Roll Up Report

  Need to get aggregated traffic analytics from multiple web properties, but not ready to pay $150K per year for Google Analytics 360 for that ?

  We’ve got you with Roll-Up Reporting. You can get a 360-degree view into important KPIs like global revenue, conversion rates or form performance across multiple websites, online stores, mobile apps and even Intranet properties.

  

  Setting up this feature takes minutes, but saves you hours on manually exporting and cross-mapping data from different web analytics tools. 

  Channel all those saved hours into more productive things like increasing your conversion rates or boosting user engagement. 

  Avoid Marketing Tool Sprawl with Matomo 

  With Matomo as your website analytics and conversion optimisation app, you don’t need to switch between different systems, interfaces or have multiple tracking codes embedded on your site.

  And you don’t need to cultivate a disparate (and expensive !) MarTech tool stack — and then figure out if each of your tools is compliant with global privacy laws.

  All the tools you need are conveniently housed under one roof. 

  Want to learn more about Matomo features ? Check out product training videos next ! 

  21 day free trial. No credit card required.

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (change)

  Choose your analytics subdomain
  

  .matomo.cloud

  I hereby accept the terms and conditions and the data processing agreement (DPA).

  
  Your information will be used to create an account on our cloud service. For more information please consult our privacy policy.
  
  

  » Start improving your websites now