Tracking PWA events with Google Analytics
Progressive Web Apps allows applications to offer functionality that weren't possible before. Some of those include adding offline behaviour to a page, or allowing users to launch a website from the home screen.
When creating PWA-Directory, one of our goals was to enable those features and measure how much they contributed to the overall user experience and engagement to the website.
Which events to track?
Some of the things we wanted to discover with PWA-Directory were:
- The frequency of offline pageviews: This allows us to track how many users are accessing the service while offline and prioritize adding more offline features accordingly.
- How many users were adding PWA-Directory to their home screen: This will allows us to understand how users are reacting to the browser prompt, and how valueable the service is being to it's users.
- How many sessions are being started from the home screen: Adding an icon to the home screen is just the first step. We also need to understand how adding our service to the home screen affects user engagement.
How to track offline pageviews?
This was the first question we had to answer in order to track those events. Luckily, the team who build the Google I/O 2016 went through the same issue and released a handy library called sw-offline-google-analytics.
It works by using the service-worker to intercept requests to Google Analytics and retry them later if the user is offline and request fails. More information on how it works can be found Jeff Posnick's Offline Analytics Made Easy article.
An important caveat to note on this solution is that the library will only retry requests to Google Analytics up to 24 hours after the pageview. The reason for this is that GA only guarantees processing events up to 4 hours after they happened.
Adding an offline information to each pageview
Now our offline pageviews (or some of them) are making into Google Analytics. But there's nothing to differentiate which ones happened while the user was offline and which ones happened while the user was online.
The solution for this is to create a Custom Dimension on Google Analytics and add the online information using the navigator.onLine API.
Tracking home screen prompts
We can use the beforeinstallprompt event to track how many users are being asked to add our site to their home screen. Even better, the API allows us to get the outcome of the user's decision. We can send an event to Google Analytics to track this information.
Tracking sessions from the home screen
To track sessions being started from the home screen, add custom campaigns parameters to the the start_url one your application manifest. The start_url would become something like '/?utm_source=homescreen'.
Analyzing the data
We added the tracking features on Nov 21st, and collected some interesting data that can help us prioritize which features to work on. The following observations are based on data collected between Nov 21st and Dec 14th.
About 29% of PWA-Directory users are using it on mobile phones. From those, 4.16% of the pageviews happened while the user was offline. This may be due to the fact that Google Analytics only guarantees computing the pageview if it is sent to the server up to 4 hours after it happened or because the profile of PWA-Directory's users. Further research will be needed to understand the metric better.
During the same period, about 25% of the website unique users that were on a system that supports listening to home screen prompt events (Google Chrome on Android) were asked to add the application to the home screen. From those, 63% have accepted.
Navigation sessions started from the home screen accounted for 35.2% of the sessions on mobile devices. This is 15.19% of all PWA-Directory sessions.
Conclusion
Even though only 1.5% of the overall traffic came from offline pages, having an offline behaviour is one of the requisites to enable the A2H prompt.
Home screen users accounted for 15.19% of the sessions, which shows huge potential for engagement and makes is clear that implementing offline behaviour and turning PWA-Directory into a PWA is worth the time.
PWA-Directory is a service targeted to people with interests on Progressive Web Apps. This means a more tech savvy crowd who may be using it from office wi-fi, and faster devices. Make sure you add tracking to your application and understand the metrics from your user perspective.
What's next?
Service-workers also open the potential for push notifications. This is something we're looking to implement and analyze the impact on the near future. So, stay tuned for more news.
Want to know more about PWA-Directory? Check our project on Github!
