GA4 Event Tracking on Hygraph (GraphCMS) | OpsBlu Docs

GA4 Event Tracking on Hygraph (GraphCMS)

How to set up Google Analytics 4 event tracking on Hygraph (GraphCMS). Covers automatic events, Enhanced Measurement, custom events via GTM, and...

For general GA4 event concepts, see Google Analytics Event Tracking

GA4 Event Types

GA4 collects three categories of events:

Type Description Setup Required
Automatically collected page_view, first_visit, session_start None — fires with GA4 tag
Enhanced Measurement scroll, outbound_click, file_download, video_start Enable in GA4 Admin → Data Streams → Enhanced Measurement
Custom events Business-specific actions you define Push to data layer or call gtag()

If you have GTM installed on Hygraph (GraphCMS), use GTM to manage GA4 events:

1. Create a GA4 Configuration Tag

  • Tag Type: Google Analytics: GA4 Configuration
  • Measurement ID: G-XXXXXXXXXX
  • Trigger: All Pages

2. Create Custom Event Tags

For each custom event:

  • Tag Type: Google Analytics: GA4 Event
  • Configuration Tag: Select your GA4 config tag
  • Event Name: Your event name (e.g., form_submit)
  • Trigger: The appropriate trigger (Custom Event, Click, Form Submission, etc.)

3. Push Events from Your Site

Push custom events to the data layer so GTM can forward them to GA4:

// Form submission
dataLayer.push({
  'event': 'form_submit',
  'form_id': 'contact-form',
  'form_name': 'Contact Us'
});

// Button/CTA click
dataLayer.push({
  'event': 'cta_click',
  'cta_text': 'Get Started',
  'cta_location': 'hero-section'
});

Headless CMS Note

Since Hygraph (GraphCMS) is a headless CMS, events are pushed from your frontend framework code, not from Hygraph (GraphCMS) itself. Ensure your frontend pushes data layer events at the right lifecycle points (after component mount, on user interaction, etc.).

Alternative: Direct gtag() Calls

If you're not using GTM, fire events directly with gtag():

// Requires GA4 gtag.js to be loaded on the page
gtag('event', 'form_submit', {
  form_id: 'contact-form',
  form_name: 'Contact Us'
});

gtag('event', 'sign_up', {
  method: 'email'
});

GTM is still preferred because it separates tracking logic from site code and allows non-developers to manage events.

Suggested Events for Hygraph (GraphCMS) Sites

Event When to Fire Key Parameters
form_submit Contact/newsletter form form_id, form_name
sign_up Account creation method
cta_click CTA button clicks cta_text, cta_location
file_download PDF/document download file_name, file_type
search Site search search_term
share Social share buttons method, content_type

Verifying Events

  1. GA4 Realtime Report — Admin → Reports → Realtime shows events as they fire
  2. GA4 DebugView — Admin → Data Display → DebugView (requires enabling debug mode via GTM Preview or gtag('config', 'G-ID', { debug_mode: true }))
  3. GTM Preview Mode — Shows which tags fired and what data was sent
  4. Browser Console — console.log(window.dataLayer) to verify events were pushed

Next Steps

Back to top