CODEWITHSUNDEEP
google-analyticsprogressive-web-appsiphone-standalone-web-app
micahmills
micahmills

Reputation: 888

Track Add To HomeScreen Web App in Google Analytics

I have a mobile web app with the Add to Home Screen functionality working well. I am trying to determine how to use Google Analytics to best track the app usage for those who have installed the app to their home screen. There doesn't seem to be a default way to see if an app is in standalone mode in analytics, is there a best practice for Google Analytics to track apps installed on the home screen?

Upvotes: 3

Views: 3342

Answers (2)

Edward Moffett
Edward Moffett

Reputation: 1056

Derived from @Anand's answer I implemented the following:

  1. Set up a separate Google Analytics stream for the installed app. This will have its own measurement ID tag

  2. Detect which display mode is being used and select the appropriate tag to provide to Google's gtag.js. The assumption is that if the display-mode is not 'browser' then it is the home screen version of the app

    <script async src="https://www.googletagmanager.com/gtag/js"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  const measurementId = window.matchMedia('(display-mode: browser)').matches ? 'G-TAG-A' : 'G-TAG-B';
  gtag('config', measurementId);
</script>

Note, replace 'G-TAG-A|B' with your two Google Analytics supplied measurement IDs

Upvotes: 0

Anand
Anand

Reputation: 10120

You can detect if the app is launched in PWA mode. Refer this answer on how to do it. Once you know your app is running in PWA mode, you can use a different tracking ID to track the PWA applications separately or you can use the same tracking ID and use the traffic source with appropriate value based on your PWA detection.

Upvotes: 4

Related Questions