Track app data in Google Analytics with Google Tag Manager (GTM)

Track MobiLoud page views via Google Analytics

You can track your app users via Google Analytics and Google Tag manager.

In order to do this, you will need to create a custom dimension in Google Analytics, a variable to detect the "canvas" string in the user agent, and a tag to track app users.

Even though this sounds simple enough, there are quite a few things you need to do on both platforms to achieve the desired result.

If you have a popular website, with many users, we’d recommend asking a developer to help you with this, to avoid issues with your Analytics metrics.

Before we start, keep in mind that MobiLoud relies on your website for all the content, when a page of your website is displayed in the app, we are simply performing an HTTPS request to it. For that reason, we are going to use the same Google Analytics Property that you use for your website, and it should look like this:

Let’s get started!

Step 1 - Create a custom dimension in Google Analytics

On the left sidebar, open the "Admin" area by clicking the "Gear" icon on the very bottom:

Now select “Custom Definitions” under the "Property" column:

Click the “Create custom dimensions” button on the right side of the screen:

A form will appear on the right side of your screen, and you must fill the fields as follows:

• Dimension name: app_session

• Scope: User

• Description: can be empty

• Event parameter: app_session

It is extremely important to use the values above, for consistency. Later, once you have a clear understanding of how the setup works, you can adjust it accordingly if you’d like to. Your form should look like this:

Step 2 - Copy your Web Steam Measurement ID

Before leaving your Google Analytics Dashboard, go to “Admin” on the left sidebar:

Select “Data Streams”:

Select your website’s data stream:

Click the “Copy” button on your Measurement ID, and save the number somewhere on your computer, you will need it later:

Step 3 - Setup your variable in Google Tag Manager

Let’s move to Google Tag Manager now.

Log in to your Google Tag Manager account, using this link: https://tagmanager.google.com/#/home

Make sure to select the correct website:

You are now in the “Tag Manager” area, click the “Variables” link on the left sidebar:

Scroll a bit to the bottom, and click the "New" button on the right side:

Add a name to your variable, and click on the large block that will appear to start configuring your Variable:

Now pick “Custom Javascript” as the variable type:

You will then be requested to provide a piece of Javascript code, as follows:

Here is the code so you can easily copy and paste it:

function() {
	var isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
  if(isApp) {
  	return true;
  } else {
  	return false;
  }
}

Make sure to save your variable:

Step 4 - Create your tag in Google Tag Manager

With your variable created, it is time to create your tag.

For this guide we consider that you have already configured your Google Analytics account into GTM, this is a requirement in order for the next steps described in this guide to work correclty.

To get started click “Tags” on the left sidebar:

Click the “New” button on the right side:

Click the “Tag configuration” block:

Select "Google Analytics" in the list of "Featured" tag types:

Select the "Google Analytics: GA4 Event":

Fill in the “Measurement ID” field with the value you previously copied from your Google Analytics account:

Expand the “User Properties” area and fill the “Property Name” field with “app_session”:

On the “Value” field, click the small brick icon and pick the variable you created in the previous step:

Now click the “Triggering” block:

Select “All pages”:

Click “Save”:

Step 5 - Submit your tags and install Google Tag Manager on your website

The first step now is to submit everything you created, so it goes live into production, you can do that by clicking the “Submit” button on the right side of the screen:

Google will ask you for a few confirmations, but just click the “Publish” button until your changes are submitted.

If you never used Google Tag Manager before, you might need to add its code to your website, you can find all the details on how to implement the code to your website by clicking on your Tag Manager ID, here:

Congratulations, if you followed all steps until this point, you should now be tracking all users that are viewing your website through the app.