How To Track Page Views on a Progressive Web App (PWA) Using Google Tag Manager (GTM)

What is PWA?

Progressive Web Application is a website on a mobile device mimicking a native mobile app. In simpler terms, you don’t have to visit App store or Google play to download an App.

Imagine a web page on your mobile with push notifications, fast scrolling, instant load time and responsive; all without installing any app.

Key Benefits of PWA:

  • Taking advantage of Native App’s seamless experience and the best of mobile sites.
  • Less burden on developers: no need to develop multiple apps across different mobile platforms – Huge Savings in Time, Effort and Money.
  • Zero dependency on App Analytics such as Appsflyer- Huge Savings again!

How does a traditional page tracking work on a webpage?

Page Tracking is measuring the number of times a page is served to a user (Page View). This tracking is done by sending a “Hit”, when a page is loaded.

If a page does not load in a browser, then the Google Analytics (GA) tracking code will not be able to identify a page view hit and hence no data to the GA server. Irrespective of whether you use the traditional GA tracking code or Google Tag Manager (GTM) code snippet, page loading functionality is highly imperative to get the right data on GA Reporting.

Now what is this to do with PWA? 

PWA is a great solution to make a developer and marketing team’s life easier and sane. To meet this expectation, PWA design must be:

  • Fast in terms of scrolling & navigation
  • Instant Loading

Usually to keep the design simple & faster, PWA sites are “single page web apps”, so does not “load” pages (except the landing home page); in that case you need to “push” a page view hit.

No page load -> No page view hit -> GA server has no clue -> No page view data in GA Reports

 

Solution: Tracking Page Views using “Click Events” using GTM

Click event on a Button = “Page View” for next page

image1

Step 1: Add a new tag on GTM with Track Type = “Page View” and set field attributes (under “More Settings”)

Think about how you would like to create your goal funnels while defining the Field Names (page & title)

image2

Step 2: Add a Trigger to specify condition for firing the tag

Remember, we are just redefining clicks on “Proceed to Menu” Button equals page view for the next page (Deal Selector Page)

We create a trigger with clickID equals to “Proceed to Menu” button’s ID attribute.

image3

Step 3: Testing Phase

a) Using GTM Preview Mode and Omnibug

image4

b) Google Analytics Real Time Reporting:

image5

Step 4: Publish the changes on GTM

I highly recommend to use Omnibug for quick testing on click events, makes life easier.

Julian from Measureschool explains this concept as “Virtual” Page View Tracking. Please click on this link to watch his video, beautifully explained!

 

Feel free to reach back for any questions or comments

Anand Aravamudhan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s