How do I install the Analytics Integration skill?

Run npx skillmds@latest add finsilabs/analytics-integration in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Analytics Integration skill do?

Implement GA4, Meta Pixel, and server-side tagging with a proper data layer so you capture accurate conversion events for ad campaigns It is listed under Data & Analytics on SkillMD.

Is Analytics Integration safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Analytics Integration?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Analytics Integration free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Analytics Integration?

finsilabs (@finsilabs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Analytics Integration by finsilabs — Agent Skill

Name: Analytics Integration
Author: finsilabs

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 purchase event 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, and purchase events 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, and Purchase events

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 purchase with 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: 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

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

Analytics Integration

File contents

Analytics Integration

Overview

When to Use This Skill

Core Instructions

Step 1: Determine your platform and recommended approach

Step 2: Platform-specific analytics setup

Shopify

WooCommerce

BigCommerce

Custom / Headless

Best Practices

Common Pitfalls

Related Skills

Frequently asked questions

Analytics Integration

File contents

Analytics Integration

Overview

When to Use This Skill

Core Instructions

Step 1: Determine your platform and recommended approach

Step 2: Platform-specific analytics setup

Shopify

WooCommerce

BigCommerce

Custom / Headless

Best Practices

Common Pitfalls

Related Skills

Related skills

Frequently asked questions

How do I install the Analytics Integration skill?

What does the Analytics Integration skill do?

Is Analytics Integration safe to use?

Which AI agents work with Analytics Integration?

Is Analytics Integration free to use?

Who published Analytics Integration?