Google Analytics with Google Tag Manager (GTM)

Track Canvas 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, and create a new tag that checks the user-agent in Google Tag Manager.

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 Canvas 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_user

• Scope: User

• Description: can be empty

• Event parameter: app_user

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, you can click on your website name in the top left area:

On the window that will appear, move to the “Google Tag Manager” icon, and select your website:

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

Then click the “New” button on the right side:

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 "canvas";
  } else {
    return "browser";
  }
}

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. Click “Tags” on the left sidebar:

Click the “New” button on the right side:

Click the “Tag configuration” block:

Pick “Google Analytics: GA4 Configuration” as the tag type:

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_user”:

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:

Step 6 - Reporting

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

Note that it might take up to 48 hours until you start seeing user data being tracked with the newly created custom dimension, so give it some time before you look into the reports.

To use your newly created custom dimension, go to your Google Analytics Dashboard, then Reports:

Select the type of report you want to see, in this case, we are using “Pages and screens”:

On the report parameters, click the small “+” icon:

Now pick your “app_user” custom dimension to start showing the data:

You will now see each page/screen view split between the canvas users and browser users: