Seamless Tracking of Healthcare Calculator Data Across 20 Languages

AtSpisek d.o.o.
Year2024
RoleSoftware Engineer and Integration Expert

Tools

Google Tag ManagerGoogle Analytics 4JavaScript

Background

The More Than Height project, an initiative launched by Novo Nordisk, aims to raise public awareness about how growth disorders affect children’s overall health and well-being. To support healthcare providers, R&D teams, and pharmaceutical partners, stakeholders rely on a Google Looker Studio dashboard that aggregates website traffic, user behaviour, and crucial calculator inputs and outputs.

The Challenge

When I first reviewed the Google Analytics setup for the interactive height-and-growth calculator on https://v2.morethanheight.com/en/, I discovered that key user‐entered values (15 distinct data points per session) were not being tracked. Without this information, stakeholders lacked insight into:

  1. Which calculation parameters were most common
  2. How different user segments (by country/language) interacted with the tool
  3. Whether the tool was influencing downstream behaviours (e.g., resource downloads or appointment bookings)

Crucially, I needed to capture this data without any direct access to the site’s CMS or backend code.

Solution

I developed a lightweight, scalable tracking layer entirely within Google Tag Manager (GTM). The core components were:

Custom JavaScript Listener

  1. Inspected the calculator’s existing HTML structure and form-submit events
  2. Extracted all 15 input and result variables via data attributes and form fields
  3. Distilled recurring DOM patterns so the same script could handle all 20 language variants

GTM Custom Variables

  1. Mapped each calculator field (e.g., “birthdate,” “height,” “dosage recommendation”) into GTM’s data layer
  2. Ensured consistent naming conventions across languages to simplify reporting

Custom Events in GTM

  1. Fired a standard “growth_calculation” event to GA4 upon form submission
  2. Attached all 15 data-layer variables as event parameters
  3. Leveraged GA4’s enhanced event schema for easy downstream use in Looker Studio

Implementation Steps

Audit & Mapping

  1. Identified all input and result fields in the calculator’s DOM
  2. Documented language-specific element IDs and classes

JS Snippet Development

  1. Wrote a JS module that:
  2. Waited for the calculator’s “submit” button click
  3. Queried each field by a shared data attribute
  4. Pushed an object into the window.dataLayer

GTM Configuration

  1. Created 15 Data Layer Variables, matching each calculator field
  2. Defined a Custom Event Trigger (“growth_calculation”)
  3. Built a GA4 Event tag to send those variables as parameters

Testing & QA

  1. Used GTM’s Preview Mode across five language variants
  2. Validated that all 15 parameters appeared correctly in GA4’s DebugView
  3. Verified consistency in user flows from initial input to the final Looker Studio dashboard

Outcome & Impact

  1. Complete Data Capture: All 15 calculator variables are now reliably tracked across 20 languages.
  2. Actionable Insights: Stakeholders can now see which ages, heights, and other parameters are most common, and how they correlate with follow-up behaviours.
  3. Enhanced Reporting: I enriched the existing Looker Studio KPI report with custom charts and filters powered by the new GA4 events, providing granular, multi-dimensional analysis for healthcare professionals, R&D teams, and manufacturers.

This streamlined tracking approach can be adapted for any interactive tool, delivering robust analytics without requiring access to the backend.