Analytics Integration
Overview
Implement a robust analytics stack for e-commerce using Google Analytics 4 (GA4), Meta Pixel, and Google Tag Manager (GTM). Covers structured data layer design for product and checkout events, server-side tagging via GTM server containers to improve data accuracy and bypass browser restrictions, and Meta Conversions API for reliable ad attribution.
When to Use This Skill
- When adding GA4 e-commerce tracking (product views, add-to-cart, checkout steps, purchase) to a new or existing store
- When implementing Meta Pixel alongside the Conversions API for dual-mode event delivery to improve ad attribution
- When migrating a GTM web container to a server-side container for better data control and cookie lifespans
- When troubleshooting missing or duplicate conversion events caused by ad blockers or client-side failures
- When meeting privacy requirements that mandate server-side deduplication between browser and server events
Core Instructions
Step 1: Determine your platform and recommended approach
| Platform | Recommended Analytics Setup | Key Actions |
|---|---|---|
| Shopify | Built-in GA4 integration + GTM app | Connect GA4 in Online Store → Preferences → Google Analytics; install GTM4WP or the official Google & YouTube channel app for Meta Pixel |
| WooCommerce | MonsterInsights plugin for GA4 + GTM | Install MonsterInsights (free tier or Pro from $99/yr) for GA4; install WooCommerce Google Analytics Integration (free) for enhanced e-commerce events |
| BigCommerce | Native GA4 integration + channel manager | Connect GA4 in Advanced Settings → Data Solutions → Google Analytics; use BigCommerce's Meta Pixel integration under the Channel Manager |
| Custom / Headless | GTM container + server-side container + custom data layer | Implement a canonical data layer, deploy GTM server container on Cloud Run or Vercel, and add Meta Conversions API from your backend |
Step 2: Platform-specific analytics setup
Shopify
Connect GA4 (built-in, no code required):
- Go to Online Store → Preferences → Google Analytics
- Click Connect your Google account and select your GA4 property
- Shopify sends all standard e-commerce events automatically:
page_view,view_item,add_to_cart,begin_checkout,purchase - In Google Analytics → Configure → Events, mark the
purchaseevent as a conversion
Track checkout funnel with GA4 Explorations:
- In GA4, go to Explore → Funnel exploration
- Create funnel steps:
- Step 1: begin_checkout event - Step 2: add_shipping_info event - Step 3: add_payment_info event - Step 4: purchase event
- This shows exactly where shoppers drop off in checkout
Add Meta Pixel:
- Go to the Shopify App Store and install the Meta channel app (free)
- Follow the setup wizard to connect your Facebook Business account
- Meta sends pixel events automatically through the Shopify integration, including the Conversions API for server-side deduplication
WooCommerce
Install MonsterInsights for GA4:
- Install MonsterInsights from wordpress.org (free tier available; Pro from $99/year adds enhanced e-commerce)
- Go to Insights → Settings → General and connect your GA4 property
- Enable Enhanced eCommerce Tracking in the MonsterInsights settings — this sends
add_to_cart,begin_checkout, andpurchaseevents to GA4 with product-level data
Add Meta Pixel:
- Install PixelYourSite (free tier available, pro from $69/year) from wordpress.org
- Enter your Pixel ID and connect via Facebook's Business Integration
- PixelYourSite includes the WooCommerce extension for
ViewContent,AddToCart,InitiateCheckout, andPurchaseevents
Verify events are firing:
- Install the Meta Pixel Helper Chrome extension
- Visit your product page and checkout — the extension shows which events fire on each page
- In GA4, use Admin → DebugView to confirm events arrive in real time
BigCommerce
Connect GA4 (built-in):
- Go to Advanced Settings → Data Solutions → Google Analytics
- Enter your GA4 Measurement ID (format:
G-XXXXXXXX) - BigCommerce fires e-commerce events automatically including
purchasewith full order data
Add Meta Pixel:
- Go to Channel Manager → Marketplace → Meta
- Connect your Facebook Business account
- BigCommerce sends Pixel events natively and supports the Conversions API for server-side deduplication
Custom / Headless
Design a canonical data layer first — every event follows the same shape regardless of which vendor consumes it:
// dataLayer must be initialized in <head> before GTM loads
window.dataLayer = window.dataLayer || [];
// Always clear ecommerce before pushing a new event (prevents GTM from merging stale items)
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: 'USD',
value: product.price * quantity,
items: [{
item_id: product.sku,
item_name: product.name,
item_brand: product.brand,
item_category: product.category,
price: product.price,
quantity,
}],
},
});Purchase event (fire after order confirmed, use server-generated order ID as transaction_id):
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: order.id, // Must be unique — deduplicate browser + server events
value: order.total,
tax: order.tax,
shipping: order.shippingCost,
currency: order.currency,
coupon: order.couponCode || '',
items: order.lineItems.map(line => ({
item_id: line.sku,
item_name: line.name,
price: line.unitPrice,
quantity: line.qty,
})),
},
});Meta Pixel with Conversions API deduplication — send the same event from browser and server using a shared event_id:
// Browser — pass event_id for deduplication
const eventId = `purchase_${order.id}`;
fbq('track', 'Purchase', {
value: order.total,
currency: order.currency,
content_ids: order.lineItems.map(l => l.sku),
content_type: 'product',
}, { eventID: eventId });
// Send eventId to server for the Conversions API mirror
await fetch('/api/analytics/meta-purchase', {
method: 'POST',
body: JSON.stringify({ orderId: order.id, eventId }),
});// Server-side Conversions API (Node.js)
import { ServerEvent, EventRequest, UserData, CustomData } from 'facebook-nodejs-business-sdk';
export async function sendMetaPurchase(order, eventId, userAgent, ipAddress) {
const userData = new UserData()
.setEmail(order.customerEmail) // Automatically hashed by SDK
.setClientIpAddress(ipAddress)
.setClientUserAgent(userAgent);
const customData = new CustomData()
.setValue(order.total)
.setCurrency(order.currency)
.setContentIds(order.lineItems.map(l => l.sku));
const serverEvent = new ServerEvent()
.setEventName('Purchase')
.setEventTime(Math.floor(Date.now() / 1000))
.setUserData(userData)
.setCustomData(customData)
.setEventId(eventId) // Matches browser eventID — Meta deduplicates automatically
.setActionSource('website');
await new EventRequest(process.env.META_ACCESS_TOKEN, process.env.META_PIXEL_ID)
.setEvents([serverEvent])
.execute();
}Initialize Google Consent Mode v2 (required for EU traffic as of March 2024):
// Must run BEFORE GTM or gtag.js loads
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'denied',
wait_for_update: 500, // Wait for CMP to update consent
});
// After user accepts cookies via your CMP:
gtag('consent', 'update', {
ad_storage: preferences.marketing ? 'granted' : 'denied',
ad_user_data: preferences.marketing ? 'granted' : 'denied',
analytics_storage: preferences.analytics ? 'granted' : 'denied',
});Validate events before deploying:
# GA4 Measurement Protocol validation (returns hit validation report)
curl -X POST \
"https://www.google-analytics.com/debug/mp/collect?measurement_id=G-XXXXXXXX&api_secret=YOUR_SECRET" \
-H "Content-Type: application/json" \
-d '{"client_id":"test-123","events":[{"name":"purchase","params":{"transaction_id":"T-001","value":59.99,"currency":"USD"}}]}'Best Practices
- Clear
ecommerce: nullbefore every e-commerce push — GTM merges data layer objects, so stale item arrays from a previous event will contaminate the next one - Use your server-generated order ID as
transaction_id— never generate it on the client; this ensures deduplication works when both browser and server events fire - Send Conversions API events from a post-payment webhook — webhook delivery is more reliable than the client completing a fetch call during checkout
- Gate
purchaseevents behind idempotency checks — store firedtransaction_idvalues in sessionStorage and skip re-firing if the confirmation page is reloaded - Use GTM environments for staging — test GTM changes in a staging environment so QA traffic never pollutes live reports
Common Pitfalls
| Problem | Solution |
|---|---|
| Duplicate purchase events in GA4 | Check sessionStorage.getItem('purchase_fired_' + order.id) before pushing; set it after the push fires |
| Items array empty in GTM | Forgot to push {ecommerce: null} before the event — GTM caches the previous items array |
| Meta Pixel and Conversions API both counting conversions | Pass matching eventID (browser) and event_id (server) — Meta deduplicates on this field |
| Shopify GA4 funnel shows no data | Verify the GA4 Measurement ID in Online Store → Preferences matches your property; check GA4 DebugView to confirm events are firing |
| MonsterInsights not tracking WooCommerce orders | Ensure the Pro license is active (Enhanced eCommerce requires Pro); clear any caching plugins after installation |
Related Skills
- @webhook-architecture
- @erp-integration
- @email-service-integration
- @gdpr-ecommerce