React.js with Google Analytics Web + App

Our goal

We want to use Google Analytics in our React.js project. In addition, this is a Firebase project using App + Web properties in its Google Analytics setting. Here is a step by step Guide.

Warning

Google Analytics’ App + Web properties are still in beta version when this article is written. I am highly skeptical about the reason why Firebase recommends using them as these properties are not currently supported in the Analytics app. Which means we cannot set up our customized events and track them in GA unless using BigQuery as this article mentioned. But yes, the events automatically collected by GA will still be shown in its dashboard.

This article will cover:

  1. Set up A + W config to show default events in GA
  2. Send A + W customized events in GTM and show them in GA’s debug view

Set up A + W config

As our project uses App + Web properties, we have a measurement id G-xxxxxxxx instead of a tracking idUA-xxxxxx-x (the difference is explained here) In order to link Google Analytics to our project, here are two approaches:

Product prefixes for global site tags (image from https://support.google.com/analytics/answer/9310895?hl=en&utm_id=ad&authuser=1)

Approach with gtag.js

To get your gtag script, let’s visit our Google Analytics page and choose our project in our data streams.

In the pop up window, click on the gtag.js toggle button and embed the code in our project (in our index.html)

the script should be something like this: (G-xxxxxx is our measurement id)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxx');
</script>

And that’s all! Now we can view the automatically collected events in our GA dashboard :)

Approach with GTM

A more “React” approach is to use Google Tag Manager.(but yes, it’s more complicated…) Here we use react-gtm-module. (BTW, using react-ga with a measurement id is not workable. That’s why I turned to gtm QQ)

npm install react-gtm-module --save

We now need our GTM id. In our Google Analytics dashboard, choose Google Tag Manager and create an account.

Here, GTM-xxxx is our GTM id.

Having a GTM id, we can now embed it into our React project. I add the following code in app.tsx as I’m using Typescript.

import TagManager from 'react-gtm-module'

const tagManagerArgs = {
gtmId: 'GTM-xxxxxx'
};

TagManager.initialize(tagManagerArgs)

Tada! That’s all about the coding part. The last thing we need to do is to link our GTM with the GA dashboard.

In Google Tag Manager, we have to first create a Tag (Tag Type set to Google Analytics: App + Web Configuration and Trigger set to All pages) After entering our measurement id, save and submit our changes.

Now we can see automatically collected events in Google Analytics dashboard when we run our React project. Hooray!

check the realtime user and confirm ourselves being detected :)

Send A + W customized events in GTM

As mentioned before, showing customized A + W events in GA is not yet available. But at least we surely can see events passed to GA’s debug view. So let’s start!

In our React project, we’d like to know how many times the Sign up! button is clicked. So we will add a Data layer in the function where we handle the sign up event. (FYI, A Data layer is an object containing all information we want to sent to GTM.) To make it simple, I’ll only pass the event name.

import TagManager from 'react-gtm-module'const args = {  dataLayer: {    event: "sign_up"
/* can pass more variables here if needed */
}, dataLayerName: "PageDataLayer"};TagManager.dataLayer(args);

Now choose “Preview” in Google Tag Manager.

Under preview mode, we are able to see our sign_up event being sent while the button is clicked.

In order to show events GTM received on our GA dashboard. We’ll need to set up a trigger and a Tag.

The trigger type is custom event. The event name should be exactly the same as the name we see in GTM’s preview mode. As we see event: 'sign_up' above, we’ll use sign_up for our event name.

After setting the trigger, we can link it to a new Tag with App + Web Event as our Tag Type. The configuration Tag is the one we’ve set above (using A + W config as its type.) Adding a debug_mode parameter and setting the value to true enable us to see the event being triggered on GA’s debug view.

Perfect! Now submit the changes and go to Google analytics. While clicking the Sign up! button in our web page, the event is now shown in the Debug view. (As long as there is one event setting the debug_mode to true , other events’ in GTM will also be shown in the Debug view.)

Unfortunately, that’s all we can see about our customized events on GA when using App + Web properties. (To be correct, it’s all I have found workable so far.) I’ll try to figure out how to change to GA setting in Firebase or move on to mixpanel or amplitude next week (tears…

Related articles:

  1. A Guide to Google Tag Manager Event Tracking
  2. Getting Started With Google Analytics: App + Web
  3. Step by Step: Setting up an App + Web Event Tag in GTM

--

--

--

💗 cooking, coding, and sharing (^o^)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Data Binding In Angular

Progressive Web Apps: Bridging the gap between web and mobile apps

Formik Forms in React (part 1)

Create a CSS Parser Using Tagged Template Literals

To Destroy or Not to Destroy

WorkflowGen 7.19.0

Ten Important Things About ReactJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wendee

Wendee

💗 cooking, coding, and sharing (^o^)

More from Medium

The beauty of Google Analytics

How to update your Gatsby Site to Google Analytics v4 — migration guide

Using framer-motion in React to add animation to Routes within your app.

React JS Google Analytics 4 with Firebase