Hello There!

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

Google Analytics Tracking to Boost Conversion Rate Optimization

progressive web apps

 

According to Google, Progressive Web Apps are experiences that combine the best of both worlds - the web and mobile apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full-screen experience.

Importance of Progressive Web Apps Tracking:

PWA is much more than a hot buzzword right now. It can resolve all your issues right from delivering a faster loading mobile website, decrease your page load time on it and also give you insights as to how much time it takes for a customer to book something from your mobile site. But, do you ever find yourself asking “What about Google Analytics implementation? How will that work in such dynamic sites? What about pageviews, sessions, source/medium? Well, we have all the answers on how to implement Google Analytics for PWA for you right here in this blog, read on to find out.

In this blog post, we are going to focus on achieving tangible benefits to your critical business KPIs through PWA.

Progressive Web Apps, in simple terms, is bringing an app into a mobile web in a revolutionary format. It can run on a reliable or even low internet connections, which will enable users to have quick access and will also help your business grow when compared to your native site.

Standard vs PWA pages

In today’s fast speed 4G times, every user is on the lookout to have quick access to the information or product he’s in search for. A survey by SplitMetrics suggests that an average of merely 26.4% of users that visit your app store page will install your app and other 73.6% of users are simply lost.

Many times users bounce immediately if a page takes a long time to load. By using PWA, there are many benefits across different verticals in terms of their user engagement and conversion rate.

Here’s how implementing and tracking PWA helps different verticals:

  • Digital Publisher: If you are implementing PWA, you can definitely improve the effectiveness in terms of increasing the average time spent on page and the number of pageviews. This would also translate into a significant decrease in terms of bounce rate and page load time.
  • E-commerce: PWA can enable eCommerce businesses to increase the effectiveness in terms of a better conversion rate that translates into an increase in sales.
  • Lead Generation: Optimize the effectiveness in terms of page load time and increase in leads
progressive web app tracking

Image2: Difference between PWA and Native M-Web

Use Cases:
1) Increase in the Time Spent on Page:

One of our clients is a digital publisher. They were experiencing a majority of incoming traffic on their mobile site but the engagement metrics were way less than that on Desktop. We identified that the reasons behind these were the high bounce rates and very short session durations. Contributing to these was the high average page load time when compared to other devices.

Once we understood their problem, our team suggested that the better approach to reducing page load time is to implement PWA. Tatvic provided complete support in the tracking and implementation process. It was then rolled out to 10% of the traffic so as to verify the user engagement metrics. The outcome was much more than our set expectations. We observed a sudden rise in user engagement which resulted in less page load time and users are spending more time.

2) The decrease in Bounce Rates:

With a strong decrease in desktop growth, one of our lead generation clients gets over 85% of their traffic from mobile devices and still in increasing trend. Most of their visitors come in from their native app and the rest all via their mobile website. However, their mobile site bounce rate kept getting higher day by day.

We analyzed the mobile site behavior and realized that their UI experience was too slow on Mobile. However, we observed that client is focused on acquiring quality users and growing their user engagement on the mobile web through Google Analytics data. We then looked into PWA as an alternative solution which provides a faster-loading and a similar experience like an App.

Client focused to re-engage for mobile site users, instead of acquiring new traffic. As a best practice, we suggested them to shift to PWA site altogether and also helped them with their tracking requirements. With just these two updates, their user engagement increased by double as opposed to the native mobile site which in turn increased their leads as well.

3) Optimization of Revenue and Conversation rate:

A popular eCommerce business was facing the challenge of a low conversion rate. They generally experience incoming traffic largely from their mobile website. Our team identified the pain point with the help of Google Analytics 360. The insights drawn from the analysis was that users with low internet speed experience a high page load time. This resulted in a low conversion rate.

However, thanks to our long-standing relationship with the client, we suggested our client implement PWA rather than working towards optimizing their mobile website. They shifted to a Progressive Web Apps site for 5% of users. Gradually, they experienced a dramatic change of 50% increase in their conversion rate.

Concluding Thoughts:

To conclude, PWA has shown all the traits that it has the potential power of becoming the future of Mobile websites. Ensure your users are better engaged and the journey isn’t broken prematurely. With the real life use cases shared in this blog, we aim to give you a better sense of how implementing Google Analytics for PWA has great impacts on your business.

Check out our webinar on Progressive Web Apps (PWA) Analytics Tracking with Google Analytics. Register today to ensure you don’t miss out on an awesome session.

If you’ve any queries, doubts or you need any help, please leave a comment below, we’d love to hear from you!

Track Progressive Web Apps with Google Analytics and Google Tag Manager

Progressive Web Apps

Progressive Web Apps

In this era of the modern web, there are many new technologies that enable you to work towards improving user experience. You must have heard of or read about PWA (Progressive Web Apps) sites. It provides your users with an app-like experience on their mobiles and also works offline. It has a magic master called “Service Workers” which makes it possible to load and store all the HTML, CSS, and Javascript files on the client’s browser in the first run itself and then requests for the data that needs to be updated from the website. With PWA, you get features like lower bandwidth usage, efficiency, well-supported libraries, and communities for implementation. What else do you need?

Progressive Web Apps

 

Image: service worker in the developer option menu

Do you find yourself asking questions like what about Google Analytics implementation? How will that work in such dynamic sites? How can I debug my implementation? How GA will handle my offline analytics request?  What about pageviews, sessions, and source/medium? Well, we have all the answers for you in this blog, read on to find out.

Google Analytics in PWA:

PWA sites, one-page sites, or Ajax-based sites - we have invested our time and efforts to get the best GA implementations that support all the Javascript. You can make use of virtual pageviews to track dynamic pages. For detailed GA implementation guidelines, you can follow this link.

In July 2016, Google launched an update called Offline Analytics made easyHere, they have provided a library offline-google-analytics-import.js which supports offline implementation. This library takes advantage of the Service Workers to store Google Analytics hits while the user is off the internet, and once that user connects to the internet, it sends the offline hits to GA.

Regular GA syntax will work just fine in case of tracking events and pageview hits according to the user actions. With extensive research, we also discovered that you can even differentiate the hits on the basis of users’ state (online or offline) when they performed any particular action. You can use Navigator.onLine API which returns true or false values based on the user’s network status.

ga('set', 'HitScope CustomDimension', navigator.onLine);

Use the above syntax to send the said user state in the hit-level custom dimension.  The recommended approach here is to set this custom dimension with each hit. This will help you to understand user behavior or their state (offline or online). Based on this data, you can get insights that will help you improve your user experience by adding relevant offline features or re-arrange them.

Using Google Tag Manager for PWA:

Until here, we have discussed on-page implementation. Now let’s talk about Google Tag Manager and DataLayer implementation on these Web Apps. Read this Google document for quick implementation of GTM on your website and this one for DataLayer implementation. We always recommend creating new containers for PWA sites. This ensures reduced load on the PWA since your existing site container may contain some extra tags that are not useful.
offline tracking

Image: Google Tag Manager container
You can access all the regular GTM features in PWA as well. Only “All Pages” and “Pageview triggers” do not work as expected because GTM will load only once. All your dynamic pages and user interaction can be captured via DataLayer implementation smoothly in such cases. We recommend the implementation of DataLayer in such a way that for all page loads, the gtm.js (All Pages) trigger should fire the pageview whereas, for dynamic pages, DataLayer should be pushed.

I’ve listed a few of the hurdles that we faced when we started implementing GA( via Google Tag Manager) on the PWA site.

  • firing pageviews incorrectly
  • Session breaking in between user journeys due to source/medium changes
  • Higher bounce rate due to session break
  • Tracking offline hits, GA script caching (GA script freshness) in service worker which sometimes stops sending the hits due to the unavailability of a tracker on that particular page.

Every site serves a different purpose and has different business objectives. Hence, accommodating a generalized solution for all issues is not recommended. Owing to this, the PWA implementation may vary.

Google Tag Manager for PWA

Image: Hits from service workers and hits from a live network

Best practices for PWA implementation:

For such a robust Google Analytics implementation, we recommend that you follow a set of best practices like

  • Create a separate GTM container for PWA
  • Implement a library that stores offline google analytics hits, Separate online/offline hits
  • Create a separate view as well for the PWA site
  • If you have implemented GTM, then GA script caching will not be an issue

In the case of GTM implementation, we have implemented many solutions for overcoming such issues by using the tracker name settings, forcing the referrer values to be set as null(“”) to stop the session breaking for all the tags except pageview, forcing document location values in fields to set.

With PWA, one needs to be closely involved while setting up the tracking as it differs from the regular GA implementations. There are certain courses that Google provides to help you understand what PWA is and how you can debug service workers for debugging your tracking. Once you have implemented, for thorough audits, you can use the network tab of the browser’s developer options menu and check how your hits are being sent to Google Analytics.

In the meantime, if you have any questions, please feel free to comment. We would love to answer your queries.

Bot Icon
Bot Icon

Tatvic Bot

Explore About Tatvic and Services