PWA Offline Google Analytics Tracking – GTM

PWA is the next alternative solution of mobile apps and provides ultimate user experience even when user is offline. This is one of the powerful feature of PWA which lets user engage with the apps, explore the site in regular way when user is offline. The other feature which takes the user experience to the next level is faster loading time. PWA does not require any install like regular iOS, Android and Window apps and works like a regular web page. You also need not to create separate properly to track it in Google Analytics.

Offline Tracking in Google Analytics

You can easily track all the hits in GA for your PWA when users are online in the similar way you track web properties but the problem arises when you want to track the offline user data in PWA.

Best Practices to track PWA

Virtual Pageviews: like a single page application or ajax based website you should track user navigation using virtual pageviews. You can push common event and one pageName variables using the datalayer.push({}); for all your virtual pageview.

Events: Track the user engagement with buttons, videos and other actions using events in Google Analytics.

Enhanced Ecommerce: if you are following regular enhanced ecommerce tracking guide which is available here https://developers.google.com/tag-manager/enhanced-ecommerce#details then your impressions, PDP and purchase stats won’t be track since they are being configured on Pageviews. You should use events instead of pageview trigger to track these stats.

Offline Tracking: This is little bit tricky but not impossible to track all your offline hits in Google Analytics. PWA has features to record all your offline interactions and then send back to them in GA when user come online. “Service Workers” in PWA do this all magic and provides you all user behaviour stats in Google Analytics.

Pixels / Conversion Codes: Use event instead of pageviews since it loads only for one time.

You can find detailed guide here to track offline tracking in GA for your PWA. Here you will find npm package npm install –save-dev sw-offline-google-analytics Which stores the offline analytics request and send them to GA when user come online with the help of service workers.

Cheque if the Service worker is running or not: Open Chrome Dev Tool and navigate to application tab. Click on Service Workers and check if its activate and running properly.

How do differentiate online vs offline stats in Google Analytics: you can easily set the hit level custom dimension for all your offline request. Service worker will send the request back to GA once user comes online. You can use secondary dimension to track the user engagement on your PWA.

Debug your offline GA Requests in Real time: Navigate to network tab and under the chrome dev tool and notice the different requests.