Google Analytics + caniuse = *MAGIC*

Import your Google Analytics data into caniuse for detailed feature support for your users.

Woman in woods levitating
How I feel right now. Photo by Rob Potter on Unsplash

Today I learned that you can import your Google Analytics data into caniuse to determine how many of your users would be able to use a particular front-end technology in their browser of choice. Maybe the rest of you have been holding out on this and just didn’t tell me. Maybe I had my head in the sand. Well, today I learned about it, and it’s amazing.

At Clio + Calliope, we are really excited about trying out CSS grid layouts, but we know it won’t cover all users. Now we can make informed decisions for our clients to use tools that will work in their browsers or provide fallbacks when our first pick does not work. Here is the output of caniuse using a year’s worth of Google Analytics data from one client:

Screenshot of caniuse support for CSS Grid
Can I use CSS Grid with my website’s users? Clearly not without fallbacks.

You can see in the top right-hand corner, that only 55.95% of our client’s users would be able to properly see a CSS grid layout (if also prefixed). So, clearly we cannot use grid without fallbacks that cover the rest of the browsers. Luckily, all I have to do to check for fallbacks like flexbox is to type “flexbox” in the Can I use _______ ? input box. Awesome sauce.

How to invoke this incantation #

Go to caniuse, and in the red Can I use _______ ? area, click on the Settings link to the right:

Close-up screenshot of main input with settings link to the right
Click on the gear/settings link to the right

Then, the left menu sidebar will include a button to Import... from Google Analytics:

Close-up screenshot of sidebar with Import button for Google Analytics
Click on Import...

Click on that, and follow the steps to give caniuse access permission to the Google account with your analytics information. Then, select a profile (website) that you want to import from and a date range.

After that, you should be ready to roll. Search for a particular technology, and you will see the stats for your website plus global usage in the top right.

Give thanks where thanks is due #

I have to send a special shout out to Matt Shwery for telling me about this today! You’re the best!

Hi, I'm Sia.

I'm a freelance performance engineer and web developer, and I'm available for your projects.

Hire me

Webmentions

1 Like

This Dot Media

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site:


← Home