How to connect “Can I use” with your Google Analytics to show real browser support

Web Can I use is an indispensable part of every web developer today. Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Browser support for individual technologies is highlighted in color (browsers that support the functionality are displayed in green, those that do not support it in red, and browsers that support it partially or with polyfill are marked in mud green).

You can also see the percentage of browsers that support the technology at the top right. Can I use knows which browsers support what functionalities and at the same time have information about how much these browsers are used. Based on this, the application is able to calculate the percentage of users who will be able to use the new functionality. However, this number is only approximate and can usually vary by a few percent depending on the users of our application. In this article, I want to show you how to make this number completely accurate using Google Analytics.

Browser matters

The layout of browsers is a little different in each country, it also depends on whether our application is visited more from the phone or computer. If we want to make this number more precise, we need to know our visitors better. Basically, we need to find out what kind of browser our users have. And this is exactly what Google Analytics collects and we can use it for “Can I use”.

For example, in the Productboard we develop an application for Product Management and our visitors come largely from the USA and use our application on the vast majority of computers and not phones. This is quite good for us because there is a good representation of modern browsers in the USA and at the same time, we do not have to deal so much with mobile browsers, because there are sometimes problems with them.

Based on this hypothesis, we can assume that support for functionality in browsers could be even higher than global statistics.

Why it’s important

To confirm the above hypothesis, we will import the data directly from Google Analytics and see what the difference is. It may be only a few percent, but with high web traffic, this number is significant and we can use it to find out if we can afford to omit support for older browsers in the implementation.

Thanks to hard data, we can also argue very effectively if someone contradicts our decision to use this or that technology. Any polyfill or solution where we have to somehow simulate new functionality in an old browser costs a lot of extra work, and in the case of a small number of visitors with old browsers, it is questionable whether the actual implementation pays off at all. This implementation requires resources that may then be lacking in improving the product itself. That’s why we need to find a balance so that we don’t disadvantage many visitors and at the same time so that we can use technologies that save us work.

Import data from Google Analytics

This step-by-step guide will show you how to import data from Google Analytics into Can I use. For example, we want to find out what support CSS Scroll Snapping has (by the way, a great carousel feature) among our visitors’ browsers. If we replaced this functionality with Javascript, the performance would not be so good and at the same time, we would have to add a lot of code or use an external library, which we do not want.

We see that the total support for Scroll Snapping is 97.31% (these percentages may be different in “Can I use” live, of course, as browser support and their representation are changing).

1. Click to “Settings” button

2. Click “Open importer”.

Note: If you do not have Google Analytics, you can use the option to select a country or region for your application users at this time. It’s not that accurate, but it can also help you make decisions.

3. Click to “Google Analytics”:

4. Log in to your Google account

5. Select Google Analytics profile you want to check:

6. Select the date range which you want to check

7. Close modal window:

8. Select imported data (Label will be different according to your profile name) and close the modal:

All done!

Let’s see customized metrics:

We now see the exact data, which is displayed directly based on our data from Google Analytics. We see that Scroll Snapping support is 97.4%, which is still a few percent better than global data (95.31%).

At the same time, we can still filter how good it is directly on the mobile devices that Can I use tracks.

Conclusion

We’ve shown you how to import accurate device data from Google Analytics into Can I use and see if it’s worth using the new technology or going the other way.

Based on this data, we decided not to implement a carousel in our own way because Scroll Snapping support in our users’ browsers is good enough that we can use this technology.

Do you use Can I use with Google Analytics? Let us know your observations in the comments.

And by the way, we’ve got a Series D investment in Productboard recently, we’ve become a $ 1.7M unicorn and we’re still hiring!