Initial commit
This commit is contained in:
Zhongwei Li
468
skills/ga4-setup/assets/gtag-installation-template.html
Normal file
468
skills/ga4-setup/assets/gtag-installation-template.html
Normal file
@@ -0,0 +1,468 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GA4 gtag.js Installation Template</title>
|
||||
|
||||
<!--
|
||||
============================================
|
||||
GOOGLE ANALYTICS 4 (GA4) - gtag.js INSTALLATION
|
||||
============================================
|
||||
|
||||
INSTRUCTIONS:
|
||||
1. Replace G-XXXXXXXXXX with your actual Measurement ID from GA4
|
||||
2. Copy the entire Google tag section below
|
||||
3. Paste immediately after the opening <head> tag on every page
|
||||
4. Place BEFORE any other scripts (except meta tags)
|
||||
5. Test installation using GA4 DebugView
|
||||
|
||||
WHERE TO FIND YOUR MEASUREMENT ID:
|
||||
- Log in to analytics.google.com
|
||||
- Admin → Data Streams
|
||||
- Click your web data stream
|
||||
- Copy Measurement ID (format: G-XXXXXXXXXX)
|
||||
-->
|
||||
|
||||
<!-- Google tag (gtag.js) - START -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
// Basic Configuration
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
</script>
|
||||
<!-- Google tag (gtag.js) - END -->
|
||||
|
||||
<!-- Your other head elements below -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>GA4 gtag.js Installation Template</h1>
|
||||
|
||||
<p>This page demonstrates correct gtag.js placement for GA4 tracking.</p>
|
||||
|
||||
<!-- Your page content -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!--
|
||||
============================================
|
||||
ADVANCED CONFIGURATION OPTIONS
|
||||
============================================
|
||||
|
||||
Replace the basic gtag('config') line with any of these advanced configurations:
|
||||
-->
|
||||
|
||||
<!--
|
||||
OPTION 1: Basic Configuration (Default)
|
||||
Use this for standard page view tracking
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
OPTION 2: Configuration with Custom Settings
|
||||
Use this to customize data collection
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('config', 'G-XXXXXXXXXX', {
|
||||
'send_page_view': true, // Auto-send page views (default: true)
|
||||
'page_title': 'Custom Page Title', // Override page title
|
||||
'page_location': window.location.href, // Override page URL
|
||||
'allow_google_signals': true, // Enable demographics (requires consent)
|
||||
'allow_ad_personalization_signals': true // Enable ad personalization
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
OPTION 3: Multiple Properties
|
||||
Track to multiple GA4 properties simultaneously
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
// First property
|
||||
gtag('config', 'G-XXXXXXXXXX');
|
||||
|
||||
// Second property (client property, agency property, etc.)
|
||||
gtag('config', 'G-YYYYYYYYYY');
|
||||
|
||||
// Events automatically sent to both properties
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
OPTION 4: Configuration with User ID (Cross-device tracking)
|
||||
Use this if you have user authentication
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('config', 'G-XXXXXXXXXX', {
|
||||
'user_id': 'USER_12345' // Use non-PII identifier from your system
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
OPTION 5: Debug Mode (Testing Only - Remove for Production)
|
||||
Use this to see events in GA4 DebugView
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('config', 'G-XXXXXXXXXX', {
|
||||
'debug_mode': true // REMOVE THIS IN PRODUCTION
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
============================================
|
||||
CUSTOM EVENT TRACKING EXAMPLES
|
||||
============================================
|
||||
|
||||
Add these scripts where needed to track custom interactions
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 1: Track Button Click
|
||||
-->
|
||||
<!--
|
||||
<button onclick="trackButtonClick()">Subscribe</button>
|
||||
|
||||
<script>
|
||||
function trackButtonClick() {
|
||||
gtag('event', 'button_click', {
|
||||
'button_name': 'Subscribe',
|
||||
'button_location': 'header',
|
||||
'button_text': 'Subscribe'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 2: Track Form Submission
|
||||
-->
|
||||
<!--
|
||||
<form id="contact-form" onsubmit="return trackFormSubmit()">
|
||||
<input type="email" name="email" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function trackFormSubmit() {
|
||||
gtag('event', 'form_submit', {
|
||||
'form_name': 'Contact Form',
|
||||
'form_id': 'contact-form',
|
||||
'form_destination': '/thank-you'
|
||||
});
|
||||
return true; // Allow form to submit
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 3: Track Download
|
||||
-->
|
||||
<!--
|
||||
<a href="/files/brochure.pdf" onclick="trackDownload('brochure.pdf')">Download Brochure</a>
|
||||
|
||||
<script>
|
||||
function trackDownload(filename) {
|
||||
gtag('event', 'file_download', {
|
||||
'file_name': filename,
|
||||
'file_extension': filename.split('.').pop(),
|
||||
'link_url': window.location.href + '/files/' + filename
|
||||
});
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 4: Track Video Play (Custom video player)
|
||||
-->
|
||||
<!--
|
||||
<video id="product-video" controls>
|
||||
<source src="product-demo.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<script>
|
||||
document.getElementById('product-video').addEventListener('play', function() {
|
||||
gtag('event', 'video_start', {
|
||||
'video_title': 'Product Demo',
|
||||
'video_duration': this.duration,
|
||||
'video_provider': 'custom'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 5: Track Scroll Depth (Custom thresholds)
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
let scrollTracked = {25: false, 50: false, 75: false, 100: false};
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
let scrollPercent = Math.round((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
|
||||
|
||||
[25, 50, 75, 100].forEach(function(threshold) {
|
||||
if (scrollPercent >= threshold && !scrollTracked[threshold]) {
|
||||
gtag('event', 'scroll', {
|
||||
'percent_scrolled': threshold
|
||||
});
|
||||
scrollTracked[threshold] = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
============================================
|
||||
ECOMMERCE TRACKING EXAMPLES
|
||||
============================================
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 6: Track Product View
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('event', 'view_item', {
|
||||
'currency': 'USD',
|
||||
'value': 29.99,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Product Name',
|
||||
'item_category': 'Category',
|
||||
'item_variant': 'Blue',
|
||||
'item_brand': 'Brand',
|
||||
'price': 29.99,
|
||||
'quantity': 1
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 7: Track Add to Cart
|
||||
-->
|
||||
<!--
|
||||
<button onclick="addToCart()">Add to Cart</button>
|
||||
|
||||
<script>
|
||||
function addToCart() {
|
||||
gtag('event', 'add_to_cart', {
|
||||
'currency': 'USD',
|
||||
'value': 29.99,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Product Name',
|
||||
'item_category': 'Category',
|
||||
'price': 29.99,
|
||||
'quantity': 1
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 8: Track Purchase (Place on confirmation page)
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
gtag('event', 'purchase', {
|
||||
'transaction_id': 'TXN_12345', // Unique transaction ID
|
||||
'value': 84.97, // Total transaction value
|
||||
'currency': 'USD', // ISO 4217 currency code
|
||||
'tax': 4.99,
|
||||
'shipping': 10.00,
|
||||
'affiliation': 'Online Store',
|
||||
'coupon': 'SUMMER_SALE',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Product 1',
|
||||
'item_category': 'Category A',
|
||||
'item_variant': 'Blue',
|
||||
'item_brand': 'Brand X',
|
||||
'price': 29.99,
|
||||
'quantity': 2
|
||||
},
|
||||
{
|
||||
'item_id': 'SKU_67890',
|
||||
'item_name': 'Product 2',
|
||||
'item_category': 'Category B',
|
||||
'price': 24.99,
|
||||
'quantity': 1
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
============================================
|
||||
CONSENT MODE IMPLEMENTATION
|
||||
============================================
|
||||
|
||||
For GDPR/privacy compliance
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 9: Consent Mode Setup
|
||||
Place BEFORE the Google tag
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
// Set default consent state (before user interaction)
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'ad_user_data': 'denied',
|
||||
'ad_personalization': 'denied',
|
||||
'analytics_storage': 'denied'
|
||||
});
|
||||
|
||||
// Update consent after user accepts
|
||||
function acceptAllCookies() {
|
||||
gtag('consent', 'update', {
|
||||
'ad_storage': 'granted',
|
||||
'ad_user_data': 'granted',
|
||||
'ad_personalization': 'granted',
|
||||
'analytics_storage': 'granted'
|
||||
});
|
||||
}
|
||||
|
||||
// Update consent after user denies
|
||||
function denyAllCookies() {
|
||||
gtag('consent', 'update', {
|
||||
'ad_storage': 'denied',
|
||||
'ad_user_data': 'denied',
|
||||
'ad_personalization': 'denied',
|
||||
'analytics_storage': 'denied'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
============================================
|
||||
SINGLE PAGE APPLICATION (SPA) TRACKING
|
||||
============================================
|
||||
|
||||
For React, Vue, Angular apps
|
||||
-->
|
||||
|
||||
<!--
|
||||
EXAMPLE 10: Manual Page View Tracking (SPA)
|
||||
-->
|
||||
<!--
|
||||
<script>
|
||||
// Disable automatic page views
|
||||
gtag('config', 'G-XXXXXXXXXX', {
|
||||
'send_page_view': false
|
||||
});
|
||||
|
||||
// Send page view manually on route change
|
||||
function sendPageView(path, title) {
|
||||
gtag('event', 'page_view', {
|
||||
'page_title': title,
|
||||
'page_location': window.location.origin + path,
|
||||
'page_path': path
|
||||
});
|
||||
}
|
||||
|
||||
// Example: Call this in your router
|
||||
// sendPageView('/about', 'About Us');
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!--
|
||||
============================================
|
||||
VERIFICATION CHECKLIST
|
||||
============================================
|
||||
|
||||
After installation, verify:
|
||||
|
||||
1. Code Placement
|
||||
☐ In <head> section
|
||||
☐ Before other scripts
|
||||
☐ Measurement ID is correct (G-XXXXXXXXXX)
|
||||
|
||||
2. DebugView (Admin → DebugView)
|
||||
☐ Install Google Analytics Debugger extension
|
||||
☐ Visit website
|
||||
☐ Events appear in DebugView:
|
||||
☐ session_start
|
||||
☐ page_view
|
||||
☐ Custom events (if configured)
|
||||
|
||||
3. Realtime Reports (Reports → Realtime)
|
||||
☐ Shows 1+ active users
|
||||
☐ Events appearing in real-time
|
||||
|
||||
4. Browser Console
|
||||
☐ No JavaScript errors
|
||||
☐ F12 → Console → No gtag errors
|
||||
|
||||
5. Network Tab
|
||||
☐ F12 → Network → Filter "google-analytics"
|
||||
☐ Requests to www.google-analytics.com/g/collect
|
||||
☐ Status: 200 (success)
|
||||
|
||||
6. Standard Reports (24-48 hours)
|
||||
☐ User acquisition data
|
||||
☐ Engagement reports
|
||||
☐ Events report
|
||||
|
||||
============================================
|
||||
TROUBLESHOOTING
|
||||
============================================
|
||||
|
||||
No data appearing?
|
||||
- Verify Measurement ID matches Data Stream
|
||||
- Check browser console for errors
|
||||
- Disable ad blockers
|
||||
- Test in incognito mode
|
||||
- Wait 24-48 hours for standard reports
|
||||
|
||||
Data only in DebugView?
|
||||
- Remove debug_mode: true
|
||||
- Disable Google Analytics Debugger extension
|
||||
|
||||
Duplicate events?
|
||||
- Check for multiple gtag.js installations
|
||||
- Check for both gtag.js AND Google Tag Manager
|
||||
- Remove duplicate implementations
|
||||
|
||||
============================================
|
||||
ADDITIONAL RESOURCES
|
||||
============================================
|
||||
|
||||
Official Documentation:
|
||||
- GA4 Setup Guide: https://developers.google.com/analytics/devguides/collection/ga4
|
||||
- gtag.js Reference: https://developers.google.com/tag-platform/gtagjs
|
||||
- Event Reference: https://developers.google.com/analytics/devguides/collection/ga4/reference/events
|
||||
|
||||
Skills in This Repository:
|
||||
- See ga4-events-fundamentals for event best practices
|
||||
- See ga4-debugview for debugging techniques
|
||||
- See ga4-gtm-integration for Google Tag Manager alternative
|
||||
|
||||
============================================
|
||||
-->
|
||||
Reference in New Issue
Block a user