// Analytics Setup

Google Analytics 4
Integration Guide

Step-by-step instructions for Mr. Burns to connect Google Analytics to creaturesincrisis.org. Takes about 10 minutes.

1 Create a Google Analytics 4 Property

If you don't already have a Google Analytics account set up for creaturesincrisis.org, create one now. If you have one, skip to Step 3.

  1. Go to analytics.google.com
  2. Click Admin (gear icon) in the bottom left
  3. In the Account column, select your account or click "Create account"
  4. In the Property column, click Create property
  5. Enter "creaturesincrisis.org" as the property name
  6. Select "Web" as the business size category
  7. Enter your website URL: https://creaturesincrisis.org
  8. Click Create and accept the terms

2 Find Your Measurement ID

Once your property is created, Google Analytics will show you a Data Stream. From there you get your Measurement ID:

  1. In Admin, click Data Streams under your new property
  2. Click your web stream (it should auto-detect creaturesincrisis.org)
  3. Scroll to "Global Site Tag" section
  4. Copy the Measurement ID — it looks like: G-XXXXXXXXXX

⚠ Measurement ID Format

Your ID starts with G- followed by 10 alphanumeric characters. Example: G-M3HX8K2P7Q. Copy it exactly — no extra spaces.

3 Replace the Placeholder in Every File

The GA4 tracking code is already installed site-wide. You just need to replace G-MEASUREMENT_ID with your real ID.

Find and replace G-MEASUREMENT_ID in all these files:

HTML
index.html
HTML
analytics.html
HTML
education.html
HTML
dashboard.html
HTML
species_template_v2.html
JS
js/exit-intent.js

Regenerate species pages after editing species_template_v2.html to apply to all species pages.

4 The Code That's Already Installed

This is the exact GA4 script injected into every page (inside the <head>, before any other scripts):

<script async src="https://www.googletagmanager.com/gtag/js?id=G-MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-MEASUREMENT_ID'); </script> <!-- ============================================================ -->

This uses the gtag.js approach — the official Google Analytics 4 tagging method. It loads asynchronously so it won't slow down your pages.

5 Verify It's Working

After replacing the placeholder ID and deploying:

  1. Visit creaturesincrisis.org in your browser
  2. Open Google Analytics → Realtime (left sidebar)
  3. You should see yourself as an active user on the site
  4. Wait 24–48 hours for standard reports to populate

⚠ AdBlockers

If you have an ad blocker extension, disable it temporarily when testing — many blockers also block Google Analytics tracking.

6 What GA4 Will Track

With this integration, Google Analytics will automatically collect:

  • Pageviews — every page a visitor loads
  • Session duration — how long people spend on the site
  • Bounce rate — visitors who leave after viewing one page
  • Traffic sources — where visitors come from (Google, social, direct)
  • Device/browser info — desktop vs mobile vs tablet
  • Geographic data — country/city of visitors
  • Top pages — which species pages get the most traffic

Custom events (like quiz completions and pledge submissions) can be added to GA4 by calling gtag('event', 'event_name', { ... }) in JavaScript.

✓ What's Already Done

You don't need to touch these — they're already configured. The GA4 script placeholder is present in all major pages. When you swap in your real Measurement ID, data collection begins immediately across the entire site.