PWA analytics: How to collect data about users’ online and offline behavior

Progressive web apps (PWAs) combine the reach of a website with the functionalities of an app. They can be discovered and installed on any device with a modern web browser, on both mobile and desktop. That’s why they are becoming more and more popular.

According to a few statistics gathered by Forbes:

• The average bounce rate of a PWA is 42.86% lower than a similar mobile website.
• Companies that use PWAs notice an increase in mobile sessions by nearly 80%, page views by nearly 134% and overall engagement by 137% (in some even up to 400%).
• The average load time for PWAs is just 2.75 seconds, which is approximately eight times faster than an average mobile landing page.

With that in mind, PWA analytics can be quite a challenge. Our guide will show you how it works and what differentiates it from other types of analytics. We also gathered a few practical tips to help you set it up successfully.

Progressive web apps – characteristics and analytics

PWAs are web applications based on standard web technologies that mimic native apps, thanks to the addition of the newest JavaScript features.

PWAs, apart from the fact that they can work offline and be installed on a home screen, are:

• Reliable – they load instantly and never break, even in uncertain network conditions.
• Fast – they respond quickly to user interactions.
• Engaging – they look and work like a native app on the device, with an immersive user experience.

PWA analytics may be quite similar to web and app analytics, but there are a few key areas that can require a different approach.

PWA analytics vs web analytics

PWA analytics differs from traditional website analytics in its approach to tracking page navigation, determining page loading, configuring tag managers and loading scripts. We cover these factors further below.

Page navigation

Page navigation in PWAs works similarly to a single-page app and is fundamentally different from a traditional website. PWAs don’t have a browser refresh, so analytics scripts don’t know when a page view has occurred. As a result, the PWA needs to notify the analytics scripts about each page view event.

Page loading

There are a few important differences between PWAs and traditional websites when it comes to determining page loading. On a traditional website, events such as pageLoad or DOMContentLoaded can determine whether the page has loaded. However, these events only fire after a browser refresh. As there is no browser refresh on a PWA, such events won’t be useful to inform us about any subsequent page views.

Instead, PWAs determine that a page has loaded after detecting that all data necessary for the page is available. When a page is being initialized, it will typically send one or more network requests to get all the data necessary to render the page. A PWA page is considered loaded once all of these network requests have been completed.

Asynchronous script loading

In traditional websites, numerous analytics scripts are loaded synchronously, which can negatively impact the site’s performance. However, in the PWA environment, initial performance is critical. Analytics scripts can be large, and they can slow the initial load time if they’re loaded too early. That’s why analytics scripts should be loaded asynchronously whenever possible.

Tag managers

Tag managers give users an easy way to add more scripts to their site without deploying its new version. It’s possible to continue using tag managers with PWAs, but they need to be configured correctly.

It’s best to avoid reusing the same tag manager configuration from your traditional website, as the existing tag manager configuration may include scripts that are unnecessary for your PWA. Loading these scripts on your PWA would decrease the app’s performance.

PWA analytics vs native apps analytics

The main difference between PWA analytics and native apps analytics lies in how they recognize and track their users. Also, as much as the apps themselves, their analytics are built and configured differently.

Users recognition

PWAs use cookies to collect, store and share bits of information about users’ behavior. They use both session cookies that expire after a short time and persistent cookies that remain for a while. This helps in identifying logged-in users. Native apps, however, use Software Development Kits (SDKs) to recognize and track their users. SDKs provide a set of software development tools that allow for collecting various data types.

Measuring app’s performance

PWAs differ from native apps in many ways, one being the fact that you can’t find them in the App Store. That’s why App Store optimization (ASO) techniques won’t be helpful for them. PWAs work like websites, so they can easily be found and indexed in search engines. For this reason, while planning your analytics configuration, you should also think about measuring your app’s SEO performance. Compared to responsive web pages, PWA has increased performance and engagement, helping your website rank better in search results.

Subsequent page load time

Apart from all these differences, there is also a unique metric for PWAs. Because a browser refresh doesn’t occur between page navigation in your PWA, subsequent page load times can be significantly faster than with a traditional website. Tracking these subsequent page load times can help evaluate how long it takes users to complete important tasks using your PWA. For example, you can see how long it takes a visitor to add an item to their cart or to complete a purchase.

By tracking subsequent page load time, you can also identify areas where the PWA performance could see further improvement. For example, if you see that the subsequent page load time for a product detail page is higher than average, it may mean that one of the network requests for that page is slower than average. Then, you can investigate this network request and improve its performance.

Main challenges of PWA analytics

Since PWAs work like a website, only slightly differently launched, the main challenge for data tracking in a PWA is the hybrid web-app ecosystem. Also, by combining offline and online metrics, it can be difficult to track or differentiate those events.

As PWA includes both web and app metrics, it’s advisable to measure each feature on its own to ensure clear data for further optimization. Here is a list of things that can be the main challenges when implementing PWA analytics.

Increasing install rate

Making a PWA installable is a powerful feature, but its success depends on the UX patterns used – the same as with the install rate for native apps. Install rate can be easily measured on Chrome and Microsoft Edge, thanks to their support for tracking particular install events. On other browsers that don’t support that event, this metric will be harder to track. But how to make sure the install rate tracking will be well-implemented?

Solution: Optimize UX

For the right analytics to track installation rates and user engagement, you should optimize its flow and UX. First and foremost, you should remember to keep things simple and user-friendly. It’s crucial for users to get to their end goal as fast and conveniently as possible. Making your PWA analytics user-centric will definitely increase your install rate.

Understanding users behavior

Understanding the behavior of users that have installed PWAs is really important for your analytics to work. It helps you get real insights into what they are interested in, identify troublesome points in their customer journey, investigate how specific sections are performing and know what your users truly want from your app.

Solution: Tracking source

You can track how many users are opening the PWA from the home screen. This can be done by adding a tracking parameter to the launch URL, so your analytics can measure that home screen traffic. You can also track if the PWA is accessed when a user clicks on any link from a search engine. Therefore, it’s important to also detect dynamically through JavaScript if users are in standalone mode and then use this as a variable or dimension for analytics tracking.

Measuring offline activity

Offline functionality is one of the biggest advantages for PWAs, which is also quite a challenge. In general, if a user can continue to interact with the PWA when the network has been temporarily disconnected, any hits generated by the tracking code won’t reach the endpoint. They’ll fail, and it will look like those interactions never took place.

Solution: Recording analytics pings

Offline activity can be measured by recording analytics pings when offline and then replaying them when the connection comes back. You can use service workers, which are unique components in the browser made to enhance web applications with mobile-like features and which serve as intermediaries between the browser and the server. One of their main advantages is caching.

While measuring offline activity, PWAs will look for unsuccessful HTTP requests, store them and resend them later. The timestamps can be adjusted based on how long the hit was cached for, making sure that the events in our reports reflect the actual timing of the user’s action.

We can also differentiate between offline and online interactions by using custom dimensions and metrics. All that’s required is a few quick edits to our tracking code, analytics property, and configuration.

Solution: Caching & conversions

Another way to measure impact while being offline is to compare conversion and engagement rates with and without service worker caching. It can be assumed that a more robust and resilient website will convert better. Results should be filtered down to see the impact the strongest.

Sending push notifications

PWAs push notifications are pop-up messages that companies can send to people who are visiting their website or have visited it previously. However, as opposed to native apps, users don’t need to have the app downloaded and installed on their phone, allowing them to be reached effortlessly. This positively impacts your engagement rates and often results in increased sales and brand awareness. However, simply sending progressive web app push notifications isn’t always enough on its own to boost users’ engagement. You need to undertake the right strategy to do it in a way that’s efficient for your business goals.

Solution: Tracking funnel

There is a whole funnel to keep track of when measuring push notifications. Tracking and measuring the whole funnel is important for push notifications, as they can easily be perceived as annoying by users, which may lead them to abandon the PWA. That’s why you should look closely for engagement metrics of users receiving notifications to see if there is attrition or churn.

PWA analytics supports users’ data privacy

When thinking about PWA analytics, you should always consider users’ privacy and data security. Many companies treat Google Analytics as a default platform for analyzing PWAs. Although this might be convenient, there are growing privacy concerns around the use of Google’s platform, especially in Europe.

Recent verdicts of several European data protection authorities (DPA) suggest that Google Analytics, including Firebase, aren’t exactly compliant with General Data Protection Regulation (GDPR). The platform transfers EU residents’ data to US servers, making it available for surveillance by US authorities. This violates privacy standards set out by the EU’s GDPR. To reduce the risks involved in EU-US data transfers, choose an EU-owned platform that allows you to keep data in the EU.

On top of that, you need to remember that since PWAs rely on cookies, there’s a good chance that your analytics collects users’ personal data. This means you need to either fully anonymize your data or start collecting valid user consent for analytics.

Anonymizing data in Google Analytics is hard because the platform uses unique user identifiers and encrypts them in a way that doesn’t satisfy the demands of GDPR. Google claims that it doesn’t collect personal data. However, the Austrian DPA’s decision in April 2022 was that its IP anonymization methods don’t provide enough protection. Why?

• IP anonymization only concerns the IP address. Other kinds of data, such as online identifiers, which are set via cookies or device data, are still transmitted by Google in plain text.
• IP anonymization takes place only after the data has been transferred to Google.

This means that Google Analytics still collects personal data.

For these reasons, you might consider other, more privacy-friendly analytics platforms for collecting data from your PWAs.

The table below compares a few functionalities included in the most popular PWA analytics platforms. You can see which one better suits your company’s needs.

	Firebase	Piwik PRO	Matomo	Adobe Analytics
Performance and features
Freemium plan available
Safe EU cloud hosting
Integrated consent manager
Advanced anonymization
Dedicated account manager & tech support

Here you can find a more detailed comparison of popular analytics platforms that allow you to track PWAs: The comparison of leading enterprise web analytics platforms: which solution will be right for you?

Best practices for making PWA analytics work

At the end of our guide, we want to give you a few practical tips that will help you implement PWA analytics so it delivers all the advantages we talked about before.

Make sure it’s safe and secure

It’s important that your PWA analytics provides a secure and trusted workflow. That’s why it should be served over HTTPS protocol with a secure authentication flow and automatic sign-in options. All these features provide security and privacy to users with low effort.

Remember about fast load time

Remembering about great user experience is important to retain users and increase conversion. PWA analytics enables tracking various user behavior, but only when implemented to support the app’s performance. It should serve your assets efficiently, cache the dynamic content easily and load particular services only when needed.

Measure data even when offline

PWAs behave similarly to native mobile apps, which means they can function offline whenever possible. Their analytics work that way too. You can access and maintain the gathered data offline while also keeping your previously signed-in users authenticated even when they’re not connected to the Internet.

Keep users engaged

Your users want to know about new features released for your app, and you want to keep their engagement high. Set up your PWA analytics so it can proactively and responsibly reach your users, either by sending push notifications or automating re-engagement messages based on cloud events.

Make your PWA analytics privacy-compliant

Tracking PWAs can be tricky but is also truly beneficial. In-depth analysis of PWAs users’ behavior allows you to gather valuable insights that you can use to improve the apps’ SEO and increase users’ engagement and retention. Privacy matters are as important as solving technical issues. If you want to learn more about how to make your PWA analytics more privacy-compliant, contact us.