zhongwei/gh-henkisdabro-wookstar-claude-code-plugins-ga-suite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0ea83528711cccf9d840d6b27aeea9df9f69a2db
gh-henkisdabro-wookstar-cla…/skills/ga4-gtm-integration/references/gtm-ga4-setup-complete.md
Zhongwei Li 0ea8352871 Initial commit
2025-11-29 18:32:40 +08:00

7.9 KiB
Raw Blame History

Complete GTM-GA4 Setup Guide

Prerequisites

  1. GTM Container Installed - GTM container code already on website
  2. GA4 Property Created - GA4 property with Measurement ID available
  3. GTM Editor+ Access - Required permissions to create/modify tags

Step-by-Step Setup

Step 1: Install GTM Container (If Not Already Installed)

GTM Container Code Location:

Place in <head> section (immediately after <head> tag):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Place noscript fallback in <body> (immediately after <body> tag):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Step 2: Create GA4 Configuration Tag

In GTM Workspace:

  1. Navigate to Tags → New
  2. Tag Name: "GA4 - Configuration" (or "GA4 - Base Tag")

Tag Configuration:

  1. Click Tag Configuration box
  2. Select Google Tag (tag type)
  3. Tag ID: Enter GA4 Measurement ID (format: G-XXXXXXXXXX)
    • Find in: GA4 Admin → Data Streams → Web Stream → Measurement ID

Configuration Settings (Optional):

  1. Click Configuration Settings (expand if needed)
  2. Set optional parameters:
    • send_page_view: true (default - automatically sends page_view events)
    • allow_google_signals: true (for Demographics/Remarketing)
    • allow_ad_personalization_signals: true

Shared Event Settings (Optional):

  1. Click Shared Event Settings to add parameters sent with ALL events:
    • Example: user_tier, page_category, etc.

Triggering:

  1. Click Triggering box
  2. Select Initialization - All Pages
    • This fires BEFORE page_view
    • Ensures GA4 loads on every page

Save:

  1. Click Save

Result: GA4 Configuration tag created and will fire on all pages

Step 3: Test GA4 Configuration Tag

Using GTM Preview Mode:

  1. Click Preview button (top-right of GTM)
  2. Enter your website URL
  3. Click Connect
  4. Tag Assistant opens in new window

Verify in Tag Assistant:

  • Summary tab shows "Tag Fired: GA4 - Configuration"
  • Tag appears in "Tags Fired" section
  • Event: gtm.js (GTM initialization)
  • Initialization trigger activated

Verify in GA4 DebugView:

  1. Open GA4 property
  2. Go to Admin → DebugView
  3. See events appearing in real-time:
    • page_view (automatic from GA4 Configuration tag)
    • session_start
    • first_visit (if first time)

Step 4: Create GA4 Event Tags

Example: Button Click Event

Create Tag:

  1. Tags → New
  2. Name: "GA4 - Button Click - Subscribe"
  3. Tag Configuration → Google Tag
  4. Tag ID: Same GA4 Measurement ID (G-XXXXXXXXXX)
  5. Event Name: button_click

Event Parameters:

  1. Click Add Parameter
  2. Parameter entries:
    • Parameter Name: button_name → Value: {{Button Text}} (variable)
    • Parameter Name: button_location → Value: header
    • Parameter Name: button_id → Value: {{Click ID}}

Triggering:

  1. Click Triggering
  2. Click "+" to create new trigger

Create Trigger:

  1. Trigger Name: "Click - Subscribe Button"
  2. Trigger Type: Click - All Elements
  3. This trigger fires on: Some Clicks
  4. Filter:
    • Click ID → equals → subscribe-btn
  5. Click Save

Save Event Tag:

  1. Click Save

Step 5: Create Form Submission Event

Create Tag:

  1. Tags → New
  2. Name: "GA4 - Form Submit - Contact"
  3. Tag Configuration → Google Tag
  4. Tag ID: G-XXXXXXXXXX
  5. Event Name: form_submit

Event Parameters:

  1. Add Parameters:
    • form_name → {{Form Name}}
    • form_id → {{Form ID}}
    • form_destination → /thank-you

Create Trigger:

  1. Triggering → New Trigger
  2. Name: "Form - Contact Form Submit"
  3. Type: Form Submission
  4. Fire on: Some Forms
  5. Filter: Form ID → equals → contact-form
  6. Save trigger and tag

Step 6: Implement Custom Event with Data Layer

On Website (in code):

// When user adds item to cart
document.querySelector('.add-to-cart-btn').addEventListener('click', function() {
  dataLayer.push({
    'event': 'add_to_cart',
    'product_id': 'SKU_123',
    'product_name': 'Blue T-Shirt',
    'price': 29.99,
    'quantity': 1
  });
});

In GTM:

Create Data Layer Variables:

  1. Variables → New
  2. Name: "DL - Product ID"
  3. Type: Data Layer Variable
  4. Variable Name: product_id
  5. Save

Repeat for product_name, price, quantity

Create GA4 Event Tag:

  1. Tags → New
  2. Name: "GA4 - Add to Cart"
  3. Tag Type: Google Tag
  4. Tag ID: G-XXXXXXXXXX
  5. Event Name: add_to_cart
  6. Parameters:
    • product_id → {{DL - Product ID}}
    • product_name → {{DL - Product Name}}
    • price → {{DL - Price}}
    • quantity → {{DL - Quantity}}

Create Trigger:

  1. Triggering → New
  2. Name: "Custom Event - Add to Cart"
  3. Type: Custom Event
  4. Event name: add_to_cart
  5. Save

Step 7: Test All Tags with Preview Mode

Preview Workflow:

  1. Click Preview in GTM
  2. Connect to website
  3. Navigate pages and interact with elements
  4. Tag Assistant shows:
    • Which tags fired
    • Which didn't fire (and why)
    • Variable values
    • Data layer state

Check Each Event:

  • Click subscribe button → Verify "GA4 - Button Click" fires
  • Submit contact form → Verify "GA4 - Form Submit" fires
  • Add item to cart → Verify "GA4 - Add to Cart" fires

Verify in GA4 DebugView:

  • All events appear with correct names
  • Parameters populate with expected values
  • No duplicate events

Step 8: Publish GTM Container

When Ready:

  1. Click Submit (top-right)
  2. Version Name: "GA4 Initial Setup - [Date]"
  3. Version Description: 
    - Added GA4 Configuration tag
- Added button click tracking
- Added form submission tracking
- Added add_to_cart event via data layer
  4. Click Publish
  5. Result: Changes live immediately on website

Step 9: Verify Production

After Publishing:

  1. Visit website (incognito/private mode)
  2. Enable Google Analytics Debugger Chrome extension
  3. Interact with tracked elements
  4. Check GA4 DebugView for events

Wait 24-48 hours:

  • Events appear in standard GA4 reports
  • Custom dimensions/metrics populate

Common Setup Issues

Issue Cause Solution
Tags not firing Wrong trigger conditions Check trigger settings in Preview mode
GA4 Configuration not firing Wrong trigger selected Must use "Initialization - All Pages"
Parameters empty Variables not created Create Data Layer Variables first
Duplicate page_views Both gtag.js and GTM Remove gtag.js snippet from website
Events delayed Normal processing Events appear in DebugView immediately, reports in 24-48 hours

Best Practices

Naming Conventions:

  • Tags: "GA4 - [Event Name]"
  • Triggers: "[Type] - [Description]"
  • Variables: "DL - [Variable Name]" or "GTM - [Built-in Name]"

Organization:

  • Use folders for related tags/triggers/variables
  • Document changes in version descriptions
  • Test thoroughly before publishing
  • Keep GA4 Configuration tag separate from event tags

Performance:

  • Use specific triggers (not "All Elements" when possible)
  • Minimize data layer pushes
  • Batch related events when feasible
Reference in New Issue View Git Blame Copy Permalink