How to Implement Google Analytics App + Web on Your Website & Mobile App

June 02, 2020
By Emily Rosche,
Analytics Consultant

App + Web properties are an updated beta version of Google Analytics tracking. While there are some similarities between App + Web and the default Universal Analytics properties widely in use today, App + Web uses an event-driven data model and steps away from many aspects of Universal Analytics such as its hierarchical event structure and focus on session metrics and session-scoped data.

We encourage you to learn App + Web whether or not you have an app to track: event-based reporting is the future of both web and app analytics. For more details about  App + Web properties, check out this comprehensive App + Web video and overview (including FAQs) by Amanda Schroeder.

Because this tracking is the future of analytics, it's a great idea to get App + Web up and running in tandem with your current analytics implementation. In this post, we will focus on how to get started implementing App + Web tracking. 

Configuring App + Web

App + Web properties are built on two existing Google product platforms: Google Cloud Platform (GCP) and Firebase. Google Cloud Platform (GCP) is a huge suite of tools centered around things like data storage and computing, machine learning, and networking, among many other things. Firebase is a mobile development platform.

Though App + Web is built on Firebase, App + Web and the data it collects lives in Google Analytics (GA). Because of these relationships (many of which are behind the scenes), configuring App + Web might be a little confusing—our steps include:

1 - Creating an App + Web property by either (Required)
    1.1 - If you have an app: Configuring from Firebase project (Option 1)
    1.2 - If you do not have an app: Configuring from GA (Option 2)
2 - Setting up Data Stream(s) in GA (Required)

In this guide, we'll walk you through all of these steps and have included FAQs to help with the process!

1 - Create an App + Web property (Required)

The first thing we need to do is set up a new App + Web property. This can be done one of two ways: either 1.1) via Firebase or 1.2) via GA. We recommend setting up a property via Firebase, but have included instructions for both configuration options below.

Here are a few FAQs to help you decide which configuration option will work best for you.

How Does Google Cloud Platform Factor Into All of This?

You can choose to associate your new Firebase project with an existing GCP project. Please note that it's only possible to associate your Firebase project with an existing GCP project if the Firebase project is created from within the Firebase console (step 1.1 below)—not from within the Google Analytics interface (step 1.2 below).

A benefit of associating your Firebase project with an existing GCP project is the option to leverage the BigQuery export for your App + Web data in the same GCP project as your Universal Analytics data (this isn’t necessary, but a lot of our customers prefer this). 

Do I Really Need to Set Up a Firebase Project First?

If you have an app, it’s recommended to configure the Firebase project first. Check with your developers in case a Firebase project already exists (such as if you're using Firebase push notifications). If Firebase is already configured in your app for other purposes, you'll want to leverage the existing project instead of creating a new one.

A Firebase project is created if you either manually create the project from the Firebase console or if you create an app stream in the GA interface, one will be created behind the scenes for you.

If you do create an app stream in the GA interface and allow the project to be created behind the scenes, you won't be directed to it (you'll have to go to the Firebase console to find it) and you won't be able to name it. You can locate it in Firebase at a later date if you end up needing it.

What if I Already Created an App + Web property in Google Analytics?

If you already created an App + Web property in GA without first creating a Firebase project, a Firebase project still exists for your property if you have created an app stream. A Firebase project is automatically created behind the scenes when you create an App + Web property within GA, if you are configuring an app stream only. If you need to access your Firebase project, you can find it by going to the Firebase console.

If you created a web stream only from within GA, no Firebase project will exist. This is expected—no additional action needs to be taken here.

Will Any Data Show Up In Firebase? Or Will Data Only Exist in Google Analytics? 

You will be able to see any app and web data you collect with App + Web in Firebase as well!

What Will Firebase and App + Web Cost?

While there are Firebase products that are paid products, App + Web is free and there is no requirement to use other Firebase products, paid or otherwise.

1.1 - If You Have an App: Set Up an App + Web Property via Firebase

If you already use Firebase, you can use your existing project! If you don't currently have a Firebase project and have an app, we recommend creating a Firebase project first regardless of whether or not you currently plan on using Firebase and its products in the future. 

If you have an app, it is recommended to configure the Firebase project first. Check with your developers in case a Firebase project already exists (such as if you're using Firebase push notifications). If Firebase is already configured in your app for other purposes, you'll want to leverage the existing project instead of creating a new one.

I Don't Yet Have a Firebase Project

Creating a Firebase project gives you access to all Firebase has to offer in case you ever want to take advantage of other Firebase products. It also allows for product linking configurations that are not yet available from within GA's App + Web property, like linking GA to BigQuery. Additionally, if you want to use the BigQuery integration, we recommend that you start by creating a Firebase project regardless of whether or not you have apps because this integration is only available in the Firebase console at this time—better to be prepared!

Creating a Firebase project and linking it to Google Analytics will both 1) create a Firebase project and 2) create a GA App + Web property. To create a Firebase project, go to Firebase's console. Click "Create a project:"

image showing the home page of the firebase console

Name your project and click "Continue." On step two of three, you have an option to enable GA for your new Firebase project with a toggle! Ensure enable GA is toggled on and click "Continue."

image showing where to enable Google Analytics for your Firebase project

Next, you can select the GA account you want to link your new Firebase project to. There is also an option to create a new account if you don't have an existing GA account. 

Once you've completed all three steps to create your Firebase project, head back to Google Analytics—a brand new App + Web property should exist in the GA account you just selected or created.

To start collecting data, you'll need to implement both the Firebase SDK; when you add an app to your Firebase project from the Project Overview > Settings screen, you will be guided through the steps for installing Firebase in your app. Once the SDK is configured, you'll also need to add tracking code for the app interactions you wish to track.

I Already Have a Firebase Project

If you already have a Firebase project, you should enable an App + Web property from inside Firebase. First, go to Project settings:

image showing Firebase project settings

Google Analytics is an option under the Integrations tab:

image showing Google Analytics as an available option under the integrations tab in Firebase

If this integration is already enabled, you don't need to do this step! An App + Web property should already exist in GA if the project was recently created with GA enabled.

Because analytics is part of the core Firebase SDK, if the SDK is already installed in your app, configuration is complete.

If you haven't added an app to your Firebase project yet, to start collecting data you'll need to implement the Firebase SDK; when you add an app to your Firebase project from the Project Overview > Settings screen, you will be guided through the steps for installing Firebase in your app. Once the SDK is configured, you'll also need to add tracking code for the app interactions you wish to track.

1.2 - If you Don’t Have an App: Set up an App + Web property via Google Analytics 

If you don't want to set up a Firebase project first, you can create your App + Web property from within GA. Start on the admin page in GA; you can create a new App + Web property in an existing GA account. Click on the "+ Create Property" button in the Property column:

image showing how to create your App + Web property from within Google Analytics

Select the "Apps and Web BETA" property type and click "Continue:"

image showing app and web beta option in Google Analytics

Fill out the information for your new App + Web property and click "Create."

image showing last step to create app + web property in google analytics

2 - Set up Data Streams in Google Analytics (Required)

At this point, you need to link a data stream to the property in order to populate it with data:

image showing first stepping in linking the data stream to the property

Configuring the data stream will require different pieces of information, depending on your stream type. There are options for iOS apps, Android apps, and web tracking:

image showing where to configure the data stream

When configuring a web data stream, there is an option for "Enhanced measurement." This is plug-and-play event tracking that only requires the flip of a toggle to configure. These events will not require any additional tracking configuration. You can choose from several frequently tracked interactions:

image with pop up menu showing enhanced measurement as an option to select

When configuring an app data stream, you'll be guided through data stream config and will then be directed to add the Firebase SDK. Implementing the SDK is required for app tracking:

image showing where to implement Firebase SDK

After creating your first data stream, you'll land on the data stream management page where you can see all connected streams, add new streams, and reconfigure existing streams:

image showing data stream management page

Implementing an App + Web Property

Now that we have our new App + Web property in GA to store our data, we need to implement tracking on our app and/or website to start collecting data. Here, we'll be using Google Tag Manager (GTM) for that data collection.

Because App + Web is a new version of analytics, it has a different tag type from Universal Analytics. In fact, there are two App + Web tag types:

image showing the two tag types for app + Web

App + Web Configuration Tag

To implement App + Web tracking, we'll start with setting up a tag in GTM. Select the tag type "Google Analytics: App + Web Configuration." When you select this tag type, there is one value you need to get from GA: the Measurement ID. To find this in GA, go to your data stream management page (Property > Data Streams) and click into the data stream you want to configure tracking for:

image showing where to set up tag in google tag manager to implement app + web tracking

Add your Measurement ID to the configuration tag in GTM. The web component of App + Web is essentially the gtag.js library—reference the documentation for gtag in order to learn more about the types of additional settings that you may want to configure on this tag. For example, it is recommended that you set cookie_domain to auto:

image showing where to dd your Measurement ID to the configuration tag in GTM

App + Web Event Tag

For all interactions you want to track other than pageviews, you'll need to use the "Google Analytics: App + Web Event" tag type. For example:

image showing tag configuration with app + web event tag type selected

Notice the difference between this new event tag and the Universal Analytics event tag:

There is no longer a three-level event hierarchy, Custom Dimensions, or Custom Metrics—instead, events will be grouped in GA by "Event Name" and will have parameters and User Properties associated with each event.

Event Parameters and User Properties are similar to Custom Dimensions, Custom Metrics, and Event Category/Action/Label fields, but with no forced hierarchy and less scoping to think about, you have more freedom around how to structure these events. This can also simplify strategizing event data collection as you only need to consider "what data do I want to associate with this interaction" (Event Parameters) and "what data do I want to associate with my users in terms of this interaction" (User Properties).

Next Steps

Now that you have a place to store your App + Web data and a handle on the basics of sending data to your new App + Web property, the sky's the limit! We encourage you to continue learning about App + Web and—if possible—to set up App + Web event tracking that parallels your current Universal Analytics collection. Start getting comfortable with App + Web configuration and reporting!

chart showing steps of app + web implementation and the coverage it provides

Watch this space for additional App + Web blog posts! These posts will cover things like reporting, new dimensions and metrics, permissions, advanced implementation opportunities, and updates to App + Web as new features are rolled out.