GA4 Event Implementation Guide

GA4 Event Implementation Guide - EA-RS

📊 GA4 Property Details:
Property: EA-RS (www.ea-rs.com)
Measurement ID: G-XXR3TGGL80
Stream ID: 10515264213
Account: CCSS Ltd

✅ Current Status:
• 7 Key Events configured in GA4
• 1 Custom event created (generate_lead) - LIVE
• 6 events require website implementation

📋 Overview & Current Status

What's Already Done (No Code Needed)

✅ These 7 Key Events are LIVE in GA4:
✓ page_view
✓ session_start
✓ user_engagement
✓ file_download
✓ form_start
✓ purchase
✓ generate_lead (custom event - tracks /contact page visits)

What Your Dev Team Needs to Implement

The following events require JavaScript code to be added to your website. These will significantly improve your ability to track user interactions and measure lead generation effectiveness.

Event Name	Purpose	Priority	Status
form_submission	Track completed contact form submissions	🔴 High	Pending
phone_click	Track phone number clicks	🔴 High	Pending
quote_request	Track quote/consultation requests	🔴 High	Pending
resource_center_view	Track Resource Centre page visits	🟡 Medium	Pending
pdf_download	Track PDF file downloads specifically	🟡 Medium	Pending

🔴 HIGH PRIORITY Events (Implement First)

These events directly impact lead generation tracking and conversion measurement. Implement these first.

HIGH PRIORITY

1️⃣ form_submission

📌 What it tracks:

When users successfully submit the contact form

📊 Why it matters:

Critical for measuring actual lead conversions. This is the most important event after the initial page view.

🎯 Where to implement:

Contact form, Quote request form, and any other lead-generation forms

💻 Implementation Method 1: Direct GTM (Recommended)

If using Google Tag Manager, create a trigger that fires on form submission:

Form Trigger Setup:

- Event: Form Submission

- Form Name: Contains "contact" OR "quote" OR "request"

Event Setup in GTM:

Event Name: form_submission

Parameters:

  - form_name: {{Form Name}}

  - form_id: {{Form ID}}

  - form_destination: {{Page URL}}

💻 Implementation Method 2: Direct JavaScript (If not using GTM)

Add this code to your form submission handler:

// Track form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
    gtag('event', 'form_submission', {
        'form_name': 'contact_form',
        'form_id': this.id,
        'form_destination': window.location.href
    });
});

// For multiple forms:
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function(e) {
        gtag('event', 'form_submission', {
            'form_name': this.getAttribute('name') || this.id,
            'form_id': this.id
        });
    });
});
            

✅ Testing:

Open GA4 Real-time Report (Admin > Events > Events > DebugView)
Submit a test form on your website
Confirm "form_submission" event appears within 2 seconds

HIGH PRIORITY

2️⃣ phone_click

📌 What it tracks:

When users click on phone numbers to call you

📊 Why it matters:

Phone calls are high-intent actions. This shows users are seriously interested in your services.

🎯 Where to implement:

All phone number links (tel: links, click-to-call buttons)

💻 Implementation:

Add this code to track clicks on phone numbers:

// Track all phone number clicks
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
    link.addEventListener('click', function() {
        const phoneNumber = this.getAttribute('href').replace('tel:', '');
        gtag('event', 'phone_click', {
            'phone_number': phoneNumber,
            'click_location': this.parentElement.className || 'unknown'
        });
    });
});

// Alternative: If using click-to-call buttons
document.querySelectorAll('.call-button, .phone-button, [data-phone]').forEach(btn => {
    btn.addEventListener('click', function() {
        gtag('event', 'phone_click', {
            'button_type': this.className,
            'phone_number': this.getAttribute('data-phone') || 'main'
        });
    });
});
            

✅ Testing:

Open GA4 DebugView
Click a phone number on your website
Confirm "phone_click" event appears

HIGH PRIORITY

3️⃣ quote_request

📌 What it tracks:

When users submit quote or consultation request forms

📊 Why it matters:

Directly measures quote requests, a key business outcome for a fire & security company.

🎯 Where to implement:

Quote request forms, consultation booking forms

💻 Implementation:

// Track quote request form submissions
document.getElementById('quoteForm').addEventListener('submit', function(e) {
    gtag('event', 'quote_request', {
        'service_type': document.querySelector('select[name="service"]')?.value || 'unknown',
        'form_type': 'quote_request',
        'timestamp': new Date().toISOString()
    });
});

// Or if you want to track a button click instead:
document.getElementById('quoteButton').addEventListener('click', function() {
    gtag('event', 'quote_request', {
        'button_location': 'hero_section',
        'device_type': /Mobile|Android/.test(navigator.userAgent) ? 'mobile' : 'desktop'
    });
});
            

✅ Testing:

Open GA4 DebugView
Submit a quote request form
Confirm "quote_request" event appears

🟡 MEDIUM PRIORITY Events (Implement Second)

These events provide valuable engagement and content tracking data. Implement after the high-priority events.

MEDIUM PRIORITY

4️⃣ resource_center_view

📌 What it tracks:

When users visit your Resource Centre

📊 Why it matters:

Shows content engagement and indicates users researching your services.

🎯 Where to implement:

Resource Centre landing page

💻 Implementation:

// Track Resource Centre page views
// Add this to the Resource Centre page template
if (window.location.pathname.includes('/resource') || 
    window.location.pathname.includes('/resources') ||
    document.body.classList.contains('resource-centre')) {

    gtag('event', 'resource_center_view', {
        'page_title': document.title,
        'page_url': window.location.href,
        'resource_type': 'content_hub'
    });
}

// Or track specific resource downloads
document.querySelectorAll('.resource-download').forEach(link => {
    link.addEventListener('click', function() {
        gtag('event', 'resource_center_view', {
            'resource_name': this.getAttribute('data-resource-name'),
            'resource_type': this.getAttribute('data-resource-type')
        });
    });
});
            

✅ Testing:

Visit your Resource Centre page and check GA4 DebugView for the event.

MEDIUM PRIORITY

5️⃣ pdf_download

📌 What it tracks:

Specifically tracks PDF file downloads (segmented from generic file downloads)

📊 Why it matters:

Helps identify which PDFs are most valuable to users (datasheets, guides, whitepapers).

🎯 Where to implement:

All PDF download links on your website

💻 Implementation:

// Track PDF downloads specifically
document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
    link.addEventListener('click', function(e) {
        const fileName = this.getAttribute('href').split('/').pop();
        const fileTitle = this.textContent || fileName;

        gtag('event', 'pdf_download', {
            'file_name': fileName,
            'file_title': fileTitle,
            'file_url': this.getAttribute('href'),
            'link_text': this.textContent
        });
    });
});

// Alternative: Add to specific PDF links with data attribute
document.querySelectorAll('a[data-file-type="pdf"]').forEach(link => {
    link.addEventListener('click', function() {
        gtag('event', 'pdf_download', {
            'file_name': this.getAttribute('data-file-name'),
            'file_category': this.getAttribute('data-category') || 'general'
        });
    });
});
            

✅ Testing:

Click on a PDF download link
Check GA4 DebugView for "pdf_download" event

🛠️ Implementation Methods

Method 1: Google Tag Manager (GTM) - RECOMMENDED

✅ Best for: Non-developers, easier to test, no site redeploy needed
⏱️ Setup time: 30 minutes
📚 Resources: GTM Event Tracking Guide

GTM Setup Steps:

Log into Google Tag Manager
Go to Triggers → Click New
Choose trigger type: Form Submission, Click, or Page View (based on event)
Configure the trigger conditions
Create a new Tag (Google Analytics: GA4 Event)
Configure the tag with event name and parameters
Attach the trigger to the tag
Preview and test in DebugView mode
Click Submit to publish

Method 2: Direct JavaScript

✅ Best for: Developers, full control, immediate implementation
⏱️ Setup time: 15 minutes
📋 Requirements: gtag or Google Analytics 4 script already on site

Basic JavaScript Implementation:

// Basic event tracking structure
gtag('event', 'event_name', {
    'parameter_name': 'parameter_value',
    'another_parameter': 'value'
});

// Example with error handling
if (typeof gtag === 'function') {
    gtag('event', 'phone_click', {
        'phone_number': '01234567890'
    });
} else {
    console.warn('Google Analytics not loaded yet');
}
        

Method 3: Hybrid Approach

Use GTM for complex tracking logic and JavaScript for simple, time-sensitive events. This is often the best approach for larger websites.

✅ Testing & Verification

Using GA4 DebugView

Steps to Test Events in Real-Time:

Go to Admin → Events → Events (in GA4)

Scroll down to "DebugView" or open it in a new tab

Your GA4 stream should appear in the list

Trigger the event on your website

Watch the event appear in real-time (usually within 1-2 seconds)

Verify event name and all parameters are correct

Common Issues & Solutions

Issue	Cause	Solution
Event not appearing in DebugView	gtag not loaded or wrong property ID	Check browser console for errors. Verify GA4 script is loaded.
Event name has special characters	Invalid event name format	Use lowercase with underscores only: event_name (not Event Name)
Parameters not showing	Parameter names have spaces or special chars	Use snake_case for parameter names: user_id (not user id)
Event fires multiple times	Event listener not properly scoped	Add null checks and event listener cleanup

Browser Console Debugging

// Open browser DevTools (F12) and run this to verify gtag is working:
if (window.gtag) {
    console.log('✅ Google Analytics is loaded');
    gtag('event', 'test_event', {'test': 'value'});
} else {
    console.error('❌ Google Analytics not loaded');
}

// Check if events are firing
window.gtag = (function(f) {
    return function(...args) {
        if (args[0] === 'event') {
            console.log('📊 Event Fired:', args);
        }
        return f.apply(this, args);
    };
})(window.gtag);
        

📝 Implementation Checklist

Before You Start

Confirm GA4 property is set up correctly
Verify Google Analytics 4 script is installed on all pages
Test that gtag() function is available in browser console
Have access to Google Tag Manager (if using GTM method)

Implementation Tasks

form_submission - Add form tracking code
Test form_submission in DebugView
phone_click - Add phone click tracking
Test phone_click in DebugView
quote_request - Add quote request tracking
Test quote_request in DebugView
resource_center_view - Add resource centre tracking
Test resource_center_view in DebugView
pdf_download - Add PDF tracking
Test pdf_download in DebugView

Post-Implementation

Confirm all events appear in GA4 within 24-48 hours
Monitor for duplicate events (parameter differences)
Check GA4 real-time report for proper event names
Review conversion tracking if using these as conversions
Document implementation for team reference

💡 Best Practices

Event Naming Conventions

✓ DO:
• Use lowercase only: event_name
• Use underscores for spaces: form_submission
• Be descriptive: what_user_action

✗ DON'T:
• Use spaces: "form submission"
• Mix cases: "formSubmission"
• Use special characters: form@submission

Parameter Guidelines

Keep parameters consistent:
• Always use the same parameter names
• Always use the same data types (string, number, boolean)
• Document your parameters in a shared spreadsheet
• Avoid excessive parameters (keep to 5-10 per event)

Performance Tips

Debounce events: Prevent the same event firing multiple times per user session
Lazy load GA: Don't load analytics scripts until after page content loads
Use Event Batching: Group multiple events in a single request when possible
Monitor performance: Ensure tracking code doesn't impact page load time

📚 GA4 Event Parameters Reference

Event	Recommended Parameters	Data Type
form_submission	form_name, form_id, form_destination	String
phone_click	phone_number, click_location	String
quote_request	service_type, form_type	String
resource_center_view	page_title, resource_type	String
pdf_download	file_name, file_category	String

🤝 Support & Resources

Documentation

Getting Help

If you need help:
1. Check the Browser Console (F12) for JavaScript errors
2. Verify gtag() is available: window.gtag
3. Use GA4 DebugView to check event parameters
4. Review the "Common Issues & Solutions" table above
5. Consult the official GA4 documentation links

Document Information:

Company: EA-RS Fire & Security Ltd
Website: www.ea-rs.com
GA4 Property: G-XXR3TGGL80

This guide was created as part of a comprehensive GA4 analytics implementation. All events have been configured in the GA4 property and are ready to receive tracking data once the website code is updated as outlined above.

Questions or Issues? Contact your analytics administrator or refer to the Support & Resources section above.

🎯 GA4 Event Implementation Guide

📋 Overview & Current Status

What's Already Done (No Code Needed)

What Your Dev Team Needs to Implement

🔴 HIGH PRIORITY Events (Implement First)

1️⃣ form_submission

2️⃣ phone_click

3️⃣ quote_request

🟡 MEDIUM PRIORITY Events (Implement Second)

4️⃣ resource_center_view

5️⃣ pdf_download

🛠️ Implementation Methods

Method 1: Google Tag Manager (GTM) - RECOMMENDED

Method 2: Direct JavaScript

Method 3: Hybrid Approach

✅ Testing & Verification

Using GA4 DebugView

Common Issues & Solutions

Browser Console Debugging

📝 Implementation Checklist

Before You Start

Implementation Tasks

Post-Implementation

💡 Best Practices

Event Naming Conventions

Parameter Guidelines

Performance Tips

📚 GA4 Event Parameters Reference

🤝 Support & Resources

Documentation

Getting Help