Google Analytics 4 & Google Tag Manager Installation Guide

Prerequisites

Before starting, ensure:

✔ You have a Google account with access to Google Analytics and Google Tag Manager
✔ You have admin access to your web application’s codebase
✔ (Optional, for dashboards) Access to Looker Studio

Part 1: Google Analytics 4 (GA4) Setup

Step 1: Create a GA4 Property

Visit analytics.google.com and sign in
Click Admin → Create Property
Enter:
- Property name (e.g., DIGIT Portal - Production)
- Reporting time zone & Currency
Click Next, specify business info → Create

Step 2: Create a Data Stream

Select Web
Enter Website URL (example: https://your-domain.gov.in)
Set Stream name (example: Main Website)
Keep Enhanced Measurement enabled
Click Create Stream

Step 3: Note Your Measurement ID

Format: G-XXXXXXXXXX → You'll need this for integration

Part 2: Google Tag Manager (GTM) Setup

Step 1: Create GTM Account + Container

Visit tagmanager.google.com → Create Account
Add:
- Account name = Organization name
- Country
Container name = Website URL
Target platform = Web
Accept Terms of Service

Step 2: Embed GTM Snippets

Insert into your web app:

Inside <head>

<script>/* GTM HEAD CODE */</script>

Right after <body> open

<noscript>/* GTM BODY CODE */</noscript>

Container ID format: GTM-XXXXXXX

Part 3: Web Application Integration (Workbench UI)

We are enabling analytics for workbench-ui using Nginx-based custom JavaScript injection as part of the Helm configuration. In the hcm-demo-latest environment, the following configuration injects external analytics scripts into the application at runtime:

workbench-ui:
  custom-js-injection: |
    sub_filter.conf: "
      sub_filter  '<head>' '<head>
      <script src=https://hcm-demo-assets.s3.ap-south-1.amazonaws.com/demo/globalConfigsWorkbenchDemo.js type=text/javascript ></script>
      <script src=https://hcm-demo-assets.s3.ap-south-1.amazonaws.com/analytics/analytics.js type=text/javascript ></script>
      ';"

The injected file analytics.js (hosted at https://hcm-demo-assets.s3.ap-south-1.amazonaws.com/analytics/analytics.js) contains everything required for analytics, including loading Google Tag Manager and custom Google Analytics scripts.

Example expected content of analytics.js:

// -------------------------------------------
// Google Tag Manager (GTM) Initialization
// -------------------------------------------
(function setupGTM() {
  console.info("Google Tag Manager initialized");

  // Create dataLayer if not present
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    "gtm.start": new Date().getTime(),
    event: "gtm.js"
  });

  // Insert GTM script
  var gtmScript = document.createElement("script");
  gtmScript.async = true;
  gtmScript.src = "https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX";

  var firstScript = document.getElementsByTagName("script")[0];
  firstScript.parentNode.insertBefore(gtmScript, firstScript);

  // Noscript fallback (iframe)
  var noscript = document.createElement("noscript");
  noscript.innerHTML =
    '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>';

  document.addEventListener("DOMContentLoaded", function () {
    document.body.insertBefore(noscript, document.body.firstChild);
  });
})();

// -------------------------------------------
// Google Analytics 4 Loader
// -------------------------------------------
(function loadGA4() {
  console.info("Loading Google Analytics 4");

  // Load GA4 script
  var ga4Script = document.createElement("script");
  ga4Script.async = true;
  ga4Script.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX";
  document.head.appendChild(ga4Script);

  // GA4 configuration
  ga4Script.onload = function () {
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());
    gtag("config", "G-XXXXXXX", { send_page_view: true });
  };
})();

Reference

Devops changes

health-campaign-devops/config-as-code/helm/environments/hcm-demo-latest.yaml at 861f4e33377a24fb0be0f84bbbe839ec3588e210 · egovernments/health-campaign-devopsGitHub

Analytics Script

https://hcm-demo-assets.s3.ap-south-1.amazonaws.com/analytics/analytics.jshcm-demo-assets.s3.ap-south-1.amazonaws.com

Step 2: Configure GA4 Tag in GTM

In GTM: Tags → New
Name: GA4 Configuration
Select:
- Tag Configuration → Google Analytics: GA4 Configuration
Enter Measurement ID
Trigger → All Pages
Save

Step 3: Publish Container

📌 GTM → Submit → Version name + Publish

Part 4: Verification & Debugging

🔍 Debug Options

Tool

Usage

GA4 DebugView

Shows events in real-time

GTM Preview Mode

Validates tag triggers on live site

GA4 Realtime Report

Live users + active pages

Enable Debug Mode Manually

gtag('config', 'G-XXXXXXXXXX', { debug_mode: true });

Data Retention

GA4 → Admin → Data Settings → Data Retention Set according to compliance needs

Part 5: Looker Studio (Dashboarding & Reporting)

🎯 Purpose: Create custom analytics dashboards using GA4 data

Step 1: Open Looker Studio

Go to: https://lookerstudio.google.com/

Click Create → Report

Step 2: Connect GA4 Data Source

Under Select a data source
Choose: → Google Analytics
Select your GA4 property & data stream
Click Add → Add to Report

Step 3: Build Dashboards

You can now: ✔ Add charts (Time series, tables, geo maps, funnels) ✔ Customize filters (e.g., Application Module, Page Type) ✔ Create KPIs like:

Step 4: Apply Filters for Govt Use-Cases

Example recommended filters:

Filter

Purpose

Tenant ID

City/ULB performance

Service Module

eGov product usage

Page Name

Screen-level visibility

Device Category

Web/Mobile split

You can:

Share internally with view/edit permissions
Embed dashboard inside DIGIT admin panels (iframe)
Schedule PDF email reports to stakeholders

PreviousWeb Analytics Tools NextConcepts

Last updated 19 days ago

Was this helpful?