Using gtag with SPAs screen_view vs page_view and how page_path fits

Question

I have built an Angular SPA and I am ready to implement tracking. I want to keep it simple so no plug-in just direct gtag tracking. So, I've gone through all this documentation for the most part it makes sense. The only thing I am confused about is screen_view vs page_view and how does page_path fit in. Have a look at the following snippet:

screen documentation page

When building web apps, use screen_view events to measure specific screen views in Google Analytics. This provides similar functionality to Firebase screen_view events on native Android or iOS apps, or pageview events on standard web pages.

Since i built a web app and it is not standard web pages this to me means I should be using screen_view over page_view. If you take that at face value it's fine but it's followed up with another piece of documentation saying:

SPA documentation page

When your application loads content dynamically and updates the URL in the address bar, the page URL stored with gtag.js should be updated as well.

Alright if I've taken what I have learned above, on navigation to a new page, I should be doing this:

gtag('config', GA_MEASUREMENT_ID, {'page_path': page_path});

gtag('event', 'screen_view', {
  'app_name': app_name,
  'screen_name' : screen_name
});

Is this correct? Should I be running both of these? Also, is screen_view over page_view the correct event to use with SPAs?

one note: if this is correct my plan is to turn off page_view all together and just go with screen_view

Stretcherbearer

Answer 1

Background

The Page View event/metric goes back to Google Analytics origins in 2005 (probably even to Urchin, the service GA was built upon).

The ability to use GA for mobile apps didn't exist until much later (the iPhone was introduced in 2007 mind you). Page Views make less sense in apps (there's no URL, path. etc), so I guess this is when the Screen View was added.

Use Cases

• App only - you most likely use Screen View (*see disclaimer below)

• An app and a website (for example IMDb, a website where users can find info about movie/tv titles and the people involved, but they have an app as well) - sending Screen View events from the website allows for a unified measurement with similar events coming from the app. Depending on the exact structure of your app & website, Page View events may become redundant.

• Website only - you can use Screen View instead of Page View but I don't see any advantage in doing so. The difference between a static website and a SPA is whether the Page View events are natural or synthetic.

---

Disclaimer: I'm a frontend dev so I don't have experience with native mobile apps. I'm also not a Google Analytics expert. However, I was interested in the question in subject, was disappointed by the lack of answers, so decided to share my understanding.

Bollard

Answer 2

Depends on your situation. For us, we have a non-SPA site (www.example.com) and the "app" site (.example.com).

Sending event "page_view" to undefined
js?id=G-YHR3YXDXTH:402 Request parameters:
js?id=G-YHR3YXDXTH:402 v: 2
js?id=G-YHR3YXDXTH:402 tid: G-YHR3YXDXTH
js?id=G-YHR3YXDXTH:402 gtm: 2oeae2
js?id=G-YHR3YXDXTH:402 _p: 272994004
js?id=G-YHR3YXDXTH:402 sr: 1680x1050
js?id=G-YHR3YXDXTH:402 _dbg: 1
js?id=G-YHR3YXDXTH:402 ul: en-us
js?id=G-YHR3YXDXTH:402 cid: 359333373.1603462384
js?id=G-YHR3YXDXTH:402 Event parameters:
js?id=G-YHR3YXDXTH:402 en: page_view
js?id=G-YHR3YXDXTH:402 Shared parameters:
js?id=G-YHR3YXDXTH:402 dl: https://www.example.com/webinars
js?id=G-YHR3YXDXTH:402 dr: https://www.example.com/
js?id=G-YHR3YXDXTH:402 dt: Site: Webinars
js?id=G-YHR3YXDXTH:402 sid: 1603852939
js?id=G-YHR3YXDXTH:402 sct: 5
js?id=G-YHR3YXDXTH:402 seg: 1

On the <subdomain>.site.com we do:

gtag({'config', <ga_measurement_id>, {send_page_view: false})

and

gtag('config', <ga_measurement_id>, {
  page_location: currentUrl,
  page_path: pagePath,
})

Which gives in the debug panel:

Sending event "page_view" to undefined
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Request parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 v: 2
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 tid: G-YHR3YXDXTH
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 gtm: 2oeae2
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _p: 2097856708
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sr: 1680x1050
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _dbg: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 ul: en-us
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _uei: 25
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 cid: 386132987.1603852323
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Event parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 en: page_view
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _et: 985
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 ep.page_path: /members/725
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Shared parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dl: https://dev.example.com/members/725
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dr: https://dev.example.com/members
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dt: Dev Site
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sid: 1603852434
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sct: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 seg: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 

From the looks of it, those match up.

The solution of using {send_page_view: false} on both and using screen_view event instead would probably work

NOTE: docs

Kinsfolk