Measure your Product with analytics using GTM & GA on React Apps

When you created a product at your startup especially if you have an internet product like a website or apps. How do you know your website has a visitor? how do you know your features are useful? and something like that. So this’s the point of view from engineers to measure your product with analytics.

when Engineer and Designer seeing users be like

So the point is you must get the data users on your product to define who your user is, their behavior, and what they do on your product. Why do you must get this data? this’s very important, I got this lesson when created.

When you want to create a products don’t forget always validate and validate again your ideas, market and your solutions.

So with analytics, you can see your ideas in the market really need your products or not.

If you know the enemy and know yourself. you need not fear the results of a hundred battles.
- Sun Tzu ( Art of War )

Google Analytics

So what’s Google Analytics ( GA ) do? GA is like a dashboard for analytics tools for your apps to watch what users doing when they visit your websites. You can see the bounce rate and something like that.

How do you implement Tracking on React Apps? you can use react-ga packages or react-gtm. In the next section, I’ll explain how to do that using react-ga.

So like the tutorial I was read ( I forgot the link btw ).This’s how I've implemented react-ga. Hope you enjoy it. So I created libs so they will reuseable function, this section just uses react-ga as a tracker for pageview and events.

libs/tracking.js -> libs for google analytics

import ReactGA from 'react-ga';

/* this is for initialize GA setup */
export const initGA = (trackingId) => {
 ReactGA.initialize(trackingId);
}
/* this is for getting url website when user access our websites */
export const PageView = () => {
ReactGA.pageview(window.location.pathname + window.location.search);
}
/**
* Event - Add custom tracking event. 
* This's for tracking when event clicked something like that they'll send the data to GA
* @param {string} category
* @param {string} action
* @param {string} label
*/
export const Event = (category, action, label) => {
 ReactGA.event({
  category: category,
  action: action,
  label: label
 });
};

home.js -> your root projects

import React, { useEffect } from 'react';
import { PageView, initGA } from 'lib';
const Home = () => {
  useEffect(() => {
    initGA(process.env.REACT_APP_GOOGLE_ANALYTIC_ID);
    PageView();
  },[]);
}

and then for buttons or forms or events what we want to track we can use like this

/* create a func to handle onClick */
const handleClickPhone = () => {
  /* call the Event func from libs */   
  Event("KALENDER", "MODAL BTN TRANSAKSI", "TELEPON");
};

/* inside the render you must create onClick func to detect if the user clicked it or not */
<Button onClick={handleClickPhone}>
  Phone
</Button>

and it’ll be seen like this when someone has triggered your events.

but it’s so complicated like every time we want to track the button or event we must create a function to handle that. So we can use alternatives using GTM ( Google Tag Manager ).

Flow GTM

What’s Google Tag Manager do? GTM is a middleware between your apps and the analytics tools ( like firebase or google analytics ), this’s a simple explanation. So when button triggered or visitor comes to your apps or webs, GTM’ll check or called and then push the data into analytics tools such as Pixel Facebook and GA. How we do that then?

First, initialize the GTM into your React app

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorker from './serviceWorker'
import GraphQlProvider from 'components/GraphQlProvider'
import TagManager from 'react-gtm-module'
import './index.css'
import 'styles/theme.scss'
import 'react-datepicker/dist/react-datepicker.css'
const tagManagerArgs = {
  gtmId: 'your gtm id'
}
TagManager.initialize(tagManagerArgs)
ReactDOM.render(
  <GraphQlProvider>
    <App />
  </GraphQlProvider>,
  document.getElementById('root')
)
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()

We initialize the GTM on the index.js ( root project react ). Add id into component or event you want to track in your projects.

<LinkButton id="btn_reorder" type="submit" onClick={handleClickRebuy}>
  <img src={rebuyIcon} alt="" className="mr-sm" />
  {t(`pesan ulang`)}
</LinkButton>

like that, I’m assigned a link button component with id = btn_reorder. On the GTM dashboard initialize the Google Analytics Id at GTM variables so we can push the data into GA.GTM has two kinds of variables built-in variables and user-defined variable which are custom variables.

How? click variables on menu GTM and then scroll to the bottom click new on user-defined variables and It’ll be on data layer too. Datalayer is data on our web or apps when we can take the value of it. Also, they’ve built-in variables like form-id, click-id, etc. All the variables will be shown on the datalayer.

user-defined variables — adding google analytics to GTM

Also, don’t forget we want to track click id right? we must activate the built-in variables first. Scroll-up on variables menu, configure and checklist what do you need to be shown on data layers.

After creating variables, create the trigger. What did the triggers do? they’ll call you if the condition is true. So after we checklist the Click Id, all the variables we checklist will be shown on datalayer and we can check the value of it.

you can set up the trigger as you want like trigger called all clicks or called when id equals btn_reorder like this. After the triggers created, create the tags

GTM — Creating Tags

Choose your Tag Type, this’s where do you want to send. In my case, I want the tags or the button when clicked send the data into Google Analytics. After that, you can choose the data category, action, label, and value.

On the Google Analytics Settings input your variables GA-Id you’ve already created also choose the trigger you’ve created before. The last thing’s step is to submit your workspace changed.

Submit your Version GTM

Fill the version name and description and publish it, now your tags have already on production now.

Result GTM on Google Analytics

Maybe in the next section, I’ll explain how to create a custom datalayer and some stuff on GTM. I hope you enjoy it thank’s for reading my article.

Thank’s for reading my article hope you enjoy it and don’t forget to claps

References :
https://medium.com/@malith.priyashan.dev/track-users-in-your-react-app-with-google-analytics-6364ebfcbae8
https://tagmanager.google.com/#/home
https://www.dewaweb.com/blog/panduan-google-tag-manager-part-1/