Marketing Attribution Dashboard

Marketing Attribution Dashboard

Overview

Every ecommerce business faces attribution chaos: Meta says it drove 300 purchases, Google says 280, and your order management system shows 400 total. The overlap is real, the methodologies differ, and single-touch last-click models misrepresent the true value of upper-funnel channels. A proper attribution dashboard aggregates all marketing data in one place and applies a consistent model so you can make defensible budget decisions. For most merchants, a third-party attribution tool — not custom code — is the fastest path to accurate channel ROI.

When to Use This Skill

• When ad spend decisions rely on platform-reported ROAS rather than actual order data
• When you suspect paid social is stealing attribution from organic search or email
• When preparing a quarterly marketing budget review and need a defensible data source
• When launching a new channel and need to measure its true incremental contribution
• When reporting marketing performance to investors or a board

Core Instructions

Step 1: Choose the right attribution tool

Start with GA4 for most stores — it is free, handles multi-channel attribution with configurable models, and integrates natively with Google Ads. Upgrade to Triple Whale or Northbeam when you need real-time pixel data that survives iOS 14 restrictions.

Step 2: Set up attribution reporting

---

Shopify

With GA4 (recommended starting point): 1. Go to Shopify Admin → Online Store → Preferences → Google Analytics 2. Enter your GA4 Measurement ID (G-XXXXXXXXXX) 3. Enable Enhanced Ecommerce under GA4 property settings 4. In GA4 → Reports → Acquisition → Traffic Acquisition: set secondary dimension to Session campaign to break down by campaign 5. In GA4 → Reports → Acquisition → Traffic Acquisition: set the comparison period to 30 days and filter by Session medium to isolate paid, organic, email, and social

With Triple Whale (Shopify-native, recommended for paid social): 1. Install Triple Whale from the Shopify App Store 2. Go to Triple Whale → Pixel Setup and add the Triple Whale pixel to your theme — this is a first-party pixel not blocked by iOS 14 3. Connect your ad accounts: Triple Whale → Integrations → connect Meta, Google Ads, and TikTok 4. Triple Whale's Summary Page shows a unified ROAS view across all ad platforms using your actual Shopify order data as the source of truth 5. Use Triple Whale → Attribution → Model Comparison to compare last-click, first-click, and linear attribution in a single view

---

WooCommerce

With GA4: 1. Install MonsterInsights (free tier) or Google Site Kit from the WordPress plugin directory 2. Go to MonsterInsights → Settings → Analytics and connect your GA4 property 3. Enable enhanced ecommerce tracking — MonsterInsights handles the data layer events automatically 4. For UTM attribution reports: go to GA4 → Reports → Acquisition → Traffic Acquisition and filter by source/medium

With Wicked Reports (WooCommerce-specific): 1. Install Wicked Reports from the WordPress plugin directory 2. Connect your WooCommerce store and email platform (Klaviyo, Mailchimp) 3. Wicked Reports assigns multi-touch attribution to each order by tracking the full customer journey from first ad click to purchase 4. Go to Wicked Reports → ROI to see revenue per ad campaign using your actual order data

---

BigCommerce

1. Go to BigCommerce Admin → Settings → Analytics → Google Analytics 2. Enter your GA4 Measurement ID and enable Enhanced Ecommerce 3. For advanced attribution: install Triple Whale or Northbeam from the BigCommerce App Marketplace — both support BigCommerce via tracking pixel 4. In BigCommerce Analytics, go to Analytics → Marketing to see channel-level attribution based on BigCommerce's built-in last-click model

---

Custom / Headless

For headless stores, capture first-touch attribution server-side before building any reporting layer. Third-party tools like Triple Whale, Northbeam, or Rockerbox all provide a JavaScript pixel + server-side API for custom stacks.

If you need to build custom multi-touch attribution:

interface TouchpointEvent {
  sessionId: string;
  customerId?: string;
  anonymousId: string;
  channel: string;       // 'paid-social' | 'paid-search' | 'organic' | 'email' | 'sms' | 'direct'
  source: string;        // 'meta' | 'google' | 'tiktok' | 'klaviyo'
  medium: string;
  campaign?: string;
  orderId?: string;
  orderValue?: number;
  timestamp: Date;
}

function classifyChannel(utm: UtmParams, referrer?: string): string {
  if (utm.medium === 'cpc' || utm.medium === 'paid')       return 'paid-search';
  if (utm.medium === 'paid-social' || utm.source?.match(/meta|facebook|instagram|tiktok/i)) return 'paid-social';
  if (utm.medium === 'email')                               return 'email';
  if (utm.medium === 'sms')                                 return 'sms';
  if (referrer?.match(/google|bing|yahoo/i))                return 'organic-search';
  if (referrer && !referrer.includes(process.env.STORE_DOMAIN!)) return 'referral';
  return 'direct';
}

// Attribution model: 40% first touch, 40% last touch, 20% distributed across middle
function positionBasedWeights(touchpoints: TouchpointEvent[]): number[] {
  const n = touchpoints.length;
  if (n === 1) return [1];
  if (n === 2) return [0.5, 0.5];
  const middleShare = 0.2 / (n - 2);
  return touchpoints.map((_, i) => {
    if (i === 0) return 0.4;
    if (i === n - 1) return 0.4;
    return middleShare;
  });
}

Use a dedicated attribution API service like Rockerbox or Northbeam rather than building the full attribution engine from scratch — the complexity of cross-device stitching and model computation is not worth custom-building for most stores.

Step 3: Configure UTM tracking consistently

UTM parameters are the foundation of any attribution system. Without consistent UTMs, even GA4 cannot attribute sessions correctly.

Standard UTM structure:

Use Google's Campaign URL Builder at ga-dev-tools.google.com/campaign-url-builder to generate UTM links consistently.

In Klaviyo: Go to Klaviyo → Account → Settings → UTM Tracking and enable auto-UTM tagging — Klaviyo appends UTM parameters to all email links automatically.

In Meta Ads: Go to Ads Manager → Campaign → URL Parameters and add utm_source={{site_source_name}}&utm_medium=paid-social&utm_campaign={{campaign.name}}&utm_content={{ad.name}} to your ad URL parameters at the campaign level.

Step 4: Build a blended ROAS dashboard in GA4

1. Go to GA4 → Explore → Free Form and create a new exploration 2. Set Dimensions: Session source/medium, Session campaign 3. Set Metrics: Sessions, Ecommerce purchases, Purchase revenue, Transactions 4. Add a filter: Session medium contains paid to isolate paid channels 5. Use GA4 → Advertising → Attribution to compare last-click vs. data-driven attribution models side by side 6. For manual ROAS: export GA4 revenue by channel → enter ad spend from each platform → calculate Revenue / Spend in a spreadsheet

Automate with Google Looker Studio (free): 1. Connect Looker Studio to GA4, Google Ads, and your Shopify/WooCommerce data source 2. Build a blended channel dashboard using Looker Studio's Blend Data feature 3. Join GA4 session data with Google Ads spend by campaign name

Step 5: Measure attribution health

Best Practices

• GA4 is ground truth, not platform dashboards — every ad platform over-attributes to itself; your order database and GA4 are the closest thing to ground truth
• Use position-based attribution for budget decisions — it rewards both discovery (first-touch) and closing (last-touch) channels; linear attribution underweights email and organic
• Set a 30-day lookback minimum — customers research for weeks before buying; 7-day windows miss upper-funnel contributions from paid social
• Consistent UTMs are more important than the tool — even the best attribution tool fails with inconsistent or missing UTM parameters; audit UTM coverage before buying a tool
• Compare models, not just the default — looking at the same period under last-click vs. linear vs. position-based reveals which channels are being systematically over- or under-credited

Common Pitfalls

Related Skills

• @meta-ads-integration
• @google-ads-ecommerce
• @tiktok-ads-integration
• @affiliate-program
• @influencer-marketplace-integration

Attribution Model Engine

Problem/Feature Description

A DTC ecommerce company is launching a marketing analytics platform and needs to move away from relying on last-click attribution. The analytics team has collected multi-channel touchpoint data for thousands of orders but currently has no way to compare how different attribution philosophies would allocate revenue credit across channels like paid search, paid social, and email.

The head of growth wants to evaluate several attribution approaches side by side to understand which channels are being over- or under-valued under their current last-click model. Specifically, they need an engine that can take an order and its associated touchpoint sequence and output how much revenue credit each touchpoint should receive, depending on which model is selected. The engine must handle edge cases (single touchpoint, two touchpoints) and must be defensible to the CFO — meaning the math must be provably correct.

Output Specification

Implement the attribution model engine as a TypeScript module. The module should export:

1. A computeWeights function that, given a list of touchpoints and a model name, returns an array of fractional weights (one per touchpoint). 2. An attributeConversion function that takes an order (with id and total), a list of touchpoints, and a model name, and returns an AttributedConversion object containing per-touchpoint credit amounts and fractions.

Write the implementation to attribution-engine.ts.

Also write a demo.ts script that:

• Creates 3 sample orders with different touchpoint sequences (1 touchpoint, 2 touchpoints, 4+ touchpoints)
• Runs each order through all supported attribution models
• Prints the resulting weight arrays and credit amounts to the console in a readable format
• Verifies that weights sum to 1.0 (within floating-point tolerance) for each model/order combination and prints a summary of which checks passed

Run the demo with npx ts-node demo.ts and save the console output to demo-output.txt.

Marketing Attribution Dashboard UI

Problem/Feature Description

A growth analytics team at an ecommerce company has finished building the backend attribution engine and now needs a React front-end dashboard that their marketing managers can use daily. The existing dashboard only shows last-click data pulled directly from Google Analytics. Managers are frustrated because the numbers don't reconcile with actual orders, and they have no way to see how changing the attribution model affects channel rankings.

The new dashboard needs to present aggregated marketing performance data fetched from an internal API endpoint (/api/attribution/metrics). It should allow users to switch between attribution models and time periods on the fly, display key performance indicators prominently, visualize the most common multi-channel customer journeys, and let stakeholders see a side-by-side comparison of how different attribution models credit the same orders. Critically, the data team has warned that the sum of per-channel attributed revenue will often exceed the actual total order revenue when using multi-touch models — the UI must make this clear rather than confusing users. The team also needs the dashboard to auto-refresh without requiring a page reload, since the underlying data updates throughout the day.

Output Specification

Build the React dashboard as a TypeScript/TSX component. Write the implementation to AttributionDashboard.tsx.

The component should include: 1. Controls to select the attribution model and the time period. 2. Summary KPI cards section. 3. A channel performance table. 4. A section visualizing common customer journey paths. 5. A section for comparing attribution models.

Also write a dashboard-spec.md file that describes:

• The data fetching strategy used (library, refresh behavior)
• How the dashboard handles the discrepancy between per-channel attributed revenue and actual total revenue
• The default attribution model and default time period and the rationale for each choice
• How each attribution model is explained to non-technical users in the UI (include the actual copy/text for at least 3 model explainers)
• How channel metrics are segmented (what breakdown dimensions are used)
• The journey path query limit and why it was chosen

Marketing Touchpoint Collection Middleware

Problem/Feature Description

A mid-size apparel brand runs ads on Meta, Google, and TikTok, sends campaigns through Klaviyo, and also gets significant organic search and direct traffic. They have had a persistent headache: their client-side analytics have been silently losing data due to ad blockers, browser privacy restrictions, and iOS tracking changes. The data engineering team estimates that up to 35% of paid sessions are going untracked.

The solution agreed upon is to move all touchpoint collection to the server side. An Express.js API already handles all page requests and checkout events. The team needs a middleware function that intercepts each request and writes a touchpoint record to the database. The middleware must correctly classify what channel drove each visit, handle both new and returning visitors, and ensure session boundaries are respected. A separate concern is identity resolution: once a customer checks out and is identified, all the pre-login anonymous touchpoints in that session should be linked to their customer record so the attribution model has a complete journey.

Output Specification

Implement the server-side touchpoint tracking middleware as a TypeScript module. Write the code to touchpoint-middleware.ts.

The file should include: 1. A trackTouchpoint Express middleware function that records touchpoints to the database. 2. A classifyChannel function that categorises a visit based on UTM parameters and the HTTP referrer. 3. A stitchCustomerTouchpoints function (or equivalent) that links pre-login anonymous touchpoints to a customer ID after login/checkout.

Also write a channel-classification-tests.ts file that tests the classifyChannel function with at least 8 different input scenarios (covering various UTM combinations and referrer values), prints the input and expected vs. actual output for each test case, and exits with a non-zero code if any test fails. Run the tests with npx ts-node channel-classification-tests.ts and save the output to classification-test-output.txt.

You may stub out the actual database calls (e.g. db.touchpoints.create) and cookie/session utilities as needed — focus on the logic.