analytics-integration（分析整合）

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

Step 2: Platform-specific analytics setup

Shopify

Connect GA4 (built-in, no code required):

1. Go to Online Store → Preferences → Google Analytics
2. Click Connect your Google account and select your GA4 property
3. Shopify sends all standard e-commerce events automatically: page_view, view_item, add_to_cart, begin_checkout, purchase
4. In Google Analytics → Configure → Events, mark the purchase event as a conversion

Track checkout funnel with GA4 Explorations:

1. In GA4, go to Explore → Funnel exploration
2. Create funnel steps:

- Step 1: begin_checkout event - Step 2: add_shipping_info event - Step 3: add_payment_info event - Step 4: purchase event

1. This shows exactly where shoppers drop off in checkout

Add Meta Pixel:

1. Go to the Shopify App Store and install the Meta channel app (free)
2. Follow the setup wizard to connect your Facebook Business account
3. Meta sends pixel events automatically through the Shopify integration, including the Conversions API for server-side deduplication

WooCommerce

Install MonsterInsights for GA4:

1. Install MonsterInsights from wordpress.org (free tier available; Pro from $99/year adds enhanced e-commerce)
2. Go to Insights → Settings → General and connect your GA4 property
3. Enable Enhanced eCommerce Tracking in the MonsterInsights settings — this sends add_to_cart, begin_checkout, and purchase events to GA4 with product-level data

Add Meta Pixel:

1. Install PixelYourSite (free tier available, pro from $69/year) from wordpress.org
2. Enter your Pixel ID and connect via Facebook's Business Integration
3. PixelYourSite includes the WooCommerce extension for ViewContent, AddToCart, InitiateCheckout, and Purchase events

Verify events are firing:

1. Install the Meta Pixel Helper Chrome extension
2. Visit your product page and checkout — the extension shows which events fire on each page
3. In GA4, use Admin → DebugView to confirm events arrive in real time

BigCommerce

Connect GA4 (built-in):

1. Go to Advanced Settings → Data Solutions → Google Analytics
2. Enter your GA4 Measurement ID (format: G-XXXXXXXX)
3. BigCommerce fires e-commerce events automatically including purchase with full order data

Add Meta Pixel:

1. Go to Channel Manager → Marketplace → Meta
2. Connect your Facebook Business account
3. 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: null before 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 purchase events behind idempotency checks — store fired transaction_id values 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

Related Skills

• @webhook-architecture
• @erp-integration
• @email-service-integration
• @gdpr-ecommerce