@embedreach/components 0.3.47 → 0.3.49

package/dist/chunks/CallTracking.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { F as FeatureHighlights, h as Phone, T as TrendingUp, L as Link, K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+function _createMdxContent(props) {
+  const _components = {
+    p: "p",
+    ...props.components
+  };
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "Why Call Tracking Matters",
+      cardDescription: "If your business receives inbound phone calls, a significant share of your conversions may be invisible to your dashboard. Call tracking closes that gap by treating phone calls as measurable conversion events — just like a form submission or a purchase.",
+      cardIcon: Phone,
+      columns: 3,
+      highlights: [{
+        icon: Phone,
+        title: "Calls Are Conversions",
+        description: "A customer calling your business is often the most valuable action they can take. Without call tracking, that conversion goes unrecorded."
+      }, {
+        icon: TrendingUp,
+        title: "Attribution Without It Is Incomplete",
+        description: "Campaigns that drive calls will look like they have low ROAS. Call tracking surfaces the revenue and leads those campaigns are actually generating."
+      }, {
+        icon: Link,
+        title: "Connects Calls to Campaigns",
+        description: "Call tracking ties each inbound call back to the specific ad, keyword, or channel that brought that caller to you."
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "How Dynamic Number Insertion Works",
+      description: "The technique that makes source-level call attribution possible",
+      icon: Phone,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-3 text-sm",
+        children: [jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "Dynamic Number Insertion (DNI) is the core technology behind source-level call tracking. Instead of displaying a single static phone number on your website, DNI uses a JavaScript snippet to automatically swap the phone number a visitor sees based on how they arrived at your site."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "Each marketing source — Google Ads, a specific campaign, organic search, a social referral — gets assigned its own tracking number from a pool. When a visitor lands on your site, the snippet detects their source and replaces the phone number on the page with the tracking number assigned to that source. When the visitor calls, the provider knows exactly where they came from."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "After the call ends, the provider sends the call details — phone number, duration, source, campaign, and keyword — to your attribution system. From there it is recorded as a conversion and attributed to the right marketing channel."
+          })
+        })]
+      })
+    }), "\n", jsx(InfoCard, {
+      title: "Your Three Options",
+      description: "Google's native solution and two third-party call tracking platforms are currently supported. If you use another call tracking provider, please contact support.",
+      icon: Phone,
+      variant: "highlighted",
+      items: [{
+        title: "Google's Native Call Reporting",
+        description: "Google Ads provides its own call tracking through Google Forwarding Numbers — phone numbers Google supplies that temporarily replace your number in your ads and on your website. When a caller dials the forwarding number, Google records the call as a conversion and routes it to your real number. This is built directly into Google Ads and requires no third-party subscription. However, it only tracks calls that originate from Google Ads and does not track calls from other sources like Meta ads, organic search, or direct traffic."
+      }, {
+        title: "CallRail",
+        description: "CallRail is a dedicated call tracking platform that supports DNI across all traffic sources — not just Google. It assigns a pool of tracking numbers to your website and uses a lightweight JavaScript snippet to swap numbers based on the visitor's source. Each call is logged with the source, medium, campaign, keyword, landing page, and caller details. CallRail also integrates natively with Google Ads, allowing it to pass call conversions directly into your Google Ads account for bidding and optimization."
+      }, {
+        title: "Call Tracking Metrics (CTM)",
+        description: "Call Tracking Metrics is a similar platform to CallRail with DNI, multi-source attribution, and Google Ads integration. CTM focuses on businesses that need detailed call routing and call center features alongside attribution, and is popular in agencies managing multiple clients. Like CallRail, it tracks calls from any source and can pass conversion data into Google Ads."
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "How These Integrate With Your Dashboard",
+      description: "How call data flows from CallRail and CTM into Measure",
+      icon: Link,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-3 text-sm",
+        children: [jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "Google's native call reporting connects automatically when you link your Google Ads account — no additional setup is needed."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "For CallRail and CTM, the integration works through a webhook. When a call ends, CallRail or CTM sends the call details — including the source, campaign, keyword, and caller information — to a Reach-provided endpoint. Reach validates the request, records the call as a conversion event, and attributes it to the appropriate campaign in your dashboard."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "You will also need to configure your Google Ads account to send call data to your chosen provider. This is a one-time setting in Google Ads under Account Settings → Call Reporting, where you select CallRail or CTM as your call analytics provider. This allows call conversion data to flow back into your Google Ads campaigns for optimization."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "To set up either integration, open your dashboard settings and look for the CallRail or CTM option under Quick Links & Integrations."
+          })
+        })]
+      })
+    }), "\n", jsx(KeyPointsList, {
+      title: "Key things to know",
+      points: [{
+        text: "Google's native solution only tracks calls from Google Ads. If you run Meta ads or care about organic and direct call attribution, you need CallRail or CTM."
+      }, {
+        text: "DNI requires a JavaScript snippet on your website in addition to the webhook integration. Your call tracking provider will give you this snippet separately from the Reach setup."
+      }, {
+        text: "Call tracking numbers are temporary tracking numbers — they forward to your real number. Callers will always reach you; the tracking happens transparently in the background."
+      }, {
+        text: "You do not need to use all three options. Most businesses pick one: Google native if they only run Google Ads, or CallRail or CTM if they run ads across multiple platforms."
+      }],
+      variant: "highlighted"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}
+export {
+  MDXContent as default
+};

package/dist/chunks/CampaignPerformance.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { g as ChartNoAxesColumn, K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+function _createMdxContent(props) {
+  return jsxs(Fragment, {
+    children: [jsx(InfoCard, {
+      title: "Campaign Table Columns Explained",
+      description: "What each column in the campaign performance table tells you",
+      icon: ChartNoAxesColumn,
+      variant: "default",
+      items: [{
+        title: "Campaign",
+        description: "The name of the ad campaign as it appears in Google Ads or Meta. Use this to match what you see here with what you see inside your ad platform."
+      }, {
+        title: "Cost",
+        description: "Total ad spend for this campaign during the selected date range. This is the amount you paid the ad platform, pulled directly from your connected ad account."
+      }, {
+        title: "Impressions",
+        description: "How many times your ad was shown. A high impression count with low clicks suggests your ad is being seen but not compelling people to act."
+      }, {
+        title: "Clicks",
+        description: "How many times people clicked your ad. Clicks represent potential customers who showed enough interest to visit your site."
+      }, {
+        title: "Revenue",
+        description: "Attributed revenue driven by this campaign — the total value of conversions (purchases or leads) that Reach traced back to a click on this campaign's ads."
+      }, {
+        title: "ROAS",
+        description: "Return on Ad Spend: attributed revenue divided by cost for this campaign. A ROAS of 4 means you earned $4 in measured revenue for every $1 spent. Use this to compare efficiency across campaigns."
+      }, {
+        title: "Orders",
+        description: "The number of attributed conversions — purchases or transactions — that originated from this campaign. This counts all customers, regardless of whether they are new or returning."
+      }, {
+        title: "New Customers",
+        description: "The number of attributed conversions where the customer had not previously purchased from this business. This helps you understand how much of your ad spend is reaching people who have never bought from you before."
+      }, {
+        title: "New Customer Revenue",
+        description: "The total revenue attributed to new customers only. Comparing this to total revenue shows you how much of your return is coming from customer acquisition vs. repeat purchases."
+      }, {
+        title: "NCROAS",
+        description: "New Customer Return on Ad Spend: new customer revenue divided by cost. This metric tells you how efficiently a campaign is acquiring new customers. A campaign with a lower overall ROAS but a high NCROAS may still be extremely valuable for growth."
+      }]
+    }), "\n", jsx(KeyPointsList, {
+      title: "How to identify well-performing vs. underperforming campaigns",
+      points: [{
+        text: 'What counts as "good performance" depends on your goals. If your priority is driving total revenue, focus on ROAS and Revenue. If you are trying to grow your customer base, NCROAS and New Customers are the metrics that matter most. A campaign with modest ROAS but high NCROAS is doing its job if acquisition is your objective.'
+      }, {
+        text: "High ROAS + high Orders = a campaign worth scaling — consider increasing its budget to capture more of the same audience"
+      }, {
+        text: "High spend + low ROAS = a campaign that may be draining budget — investigate the targeting, creative, and landing page before cutting it entirely"
+      }, {
+        text: "Strong NCROAS but low overall ROAS = the campaign is bringing in new customers at a good rate, but those customers may be spending less on average — consider pairing it with a retention campaign to increase lifetime value"
+      }, {
+        text: "Zero orders after significant spend = the campaign is getting clicks but not driving purchases — check that the tracking snippet is installed on the landing page and review the landing page experience"
+      }],
+      variant: "highlighted"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent();
+}
+export {
+  MDXContent as default
+};

package/dist/chunks/ChannelsTab.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { f as createLucideIcon, F as FeatureHighlights, g as ChartNoAxesColumn, T as TrendingUp, K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+/**
+ * @license lucide-react v0.464.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Globe = createLucideIcon("Globe", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
+  ["path", { d: "M2 12h20", key: "9i4pu4" }]
+]);
+/**
+ * @license lucide-react v0.464.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Table = createLucideIcon("Table", [
+  ["path", { d: "M12 3v18", key: "108xh3" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M3 9h18", key: "1pudct" }],
+  ["path", { d: "M3 15h18", key: "5xshup" }]
+]);
+function _createMdxContent(props) {
+  const _components = {
+    p: "p",
+    ...props.components
+  };
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "What Channels Are",
+      cardDescription: "A channel is the marketing source that brought a customer to your site. Your Channels tab shows how revenue is distributed across every source we track.",
+      cardIcon: Globe,
+      columns: 3,
+      highlights: [{
+        icon: ChartNoAxesColumn,
+        title: "Paid Channels",
+        description: "Google Ads, Meta Ads"
+      }, {
+        icon: Globe,
+        title: "Organic Channels",
+        description: "Organic search, direct visits, social referrals, and other non-paid sources"
+      }, {
+        icon: TrendingUp,
+        title: "Unknown",
+        description: "Purchases we couldn't trace back to any marketing touchpoint"
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "Reading the Channels view",
+      description: "How to interpret the pie chart and revenue breakdown table",
+      icon: Globe,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-4 text-sm",
+        children: [jsxs("div", {
+          className: "flex items-start gap-3",
+          children: [jsx("div", {
+            className: "w-2 h-2 rounded-full bg-blue-500 mt-2 flex-shrink-0"
+          }), jsxs("div", {
+            children: [jsx("h5", {
+              className: "font-medium",
+              children: "Pie chart"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: jsx(_components.p, {
+                children: "Shows the proportional share of measured revenue by channel. A channel with a large slice\nis generating a large share of your attributable revenue."
+              })
+            })]
+          })]
+        }), jsxs("div", {
+          className: "flex items-start gap-3",
+          children: [jsx("div", {
+            className: "w-2 h-2 rounded-full bg-blue-500 mt-2 flex-shrink-0"
+          }), jsxs("div", {
+            children: [jsx("h5", {
+              className: "font-medium",
+              children: "Revenue breakdown table"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: jsx(_components.p, {
+                children: "Below the pie chart is a sortable table that breaks down measured revenue row by row. Each\nrow represents one source, channel, or campaign depending on how you have grouped the data.\nA totals row at the bottom summarizes all visible rows."
+              })
+            })]
+          })]
+        })]
+      })
+    }), "\n", jsx(InfoCard, {
+      title: "Reading the Revenue Breakdown Table",
+      description: "What each column means and how to use the Group By selector",
+      icon: Table,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-5 text-sm",
+        children: [jsxs("div", {
+          className: "space-y-3",
+          children: [jsx("h5", {
+            className: "font-medium",
+            children: "Columns"
+          }), jsxs("div", {
+            className: "space-y-2 pl-1",
+            children: [jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Source / Channel / Campaign"
+                }), " — The first column label changes to match whichever grouping you have selected. This is what the revenue in that row is attributed to."]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Transactions"
+                }), " — The number of purchases attributed to that row. Use this alongside revenue to understand average order value per source."]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Revenue"
+                }), " — The total measured revenue attributed to that row for the selected date range."]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Percentage"
+                }), " — That row's share of your total measured revenue. A quick way to see which sources are dominating without doing the math yourself."]
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "space-y-3",
+          children: [jsx("h5", {
+            className: "font-medium",
+            children: "Group By options"
+          }), jsx("p", {
+            className: "text-muted-foreground",
+            children: "The dropdown in the top-right corner of the table controls how rows are grouped. Each option answers a different question:"
+          }), jsxs("div", {
+            className: "space-y-2 pl-1",
+            children: [jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Source"
+                }), " — Groups by the specific platform or tool that brought the customer, such as Google Ads, Facebook, or HubSpot. This is the default and the most granular paid-vs-organic view."]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Channel"
+                }), " — Groups by marketing channel type: Paid, Organic, Email, Social, Referral, etc. Use this for a high-level strategy view."]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "UTM Campaign"
+                }), " — Groups by the ", jsx("code", {
+                  className: "font-mono bg-muted px-1 rounded text-xs",
+                  children: "utm_campaign"
+                }), ' value in your tracking URLs. Useful if you tag your links with campaign names like "summer-sale" or "brand-awareness".']
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "UTM Medium"
+                }), " — Groups by the ", jsx("code", {
+                  className: "font-mono bg-muted px-1 rounded text-xs",
+                  children: "utm_medium"
+                }), ' value, such as "email", "cpc", or "social". Helps you compare performance across broad marketing methods.']
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-2",
+              children: [jsx("div", {
+                className: "w-1.5 h-1.5 rounded-full bg-muted-foreground mt-1.5 flex-shrink-0"
+              }), jsxs("p", {
+                className: "text-muted-foreground",
+                children: [jsx("span", {
+                  className: "font-medium text-foreground",
+                  children: "Referrer"
+                }), " — Groups by the actual domain that sent the visitor, such as google.com or facebook.com. Useful for spotting unexpected traffic sources or measuring the value of partner websites."]
+              })]
+            })]
+          })]
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: "All columns are sortable. Click any column header to rank rows by that value. You can also search the table to filter down to a specific source or campaign name."
+        })]
+      })
+    }), "\n", jsx(KeyPointsList, {
+      title: "Using channels to understand your customer mix",
+      points: [{
+        text: "A large organic search share means customers are finding you without paid ads — this lowers your overall cost per acquisition"
+      }, {
+        text: "A large direct traffic share can mean strong brand awareness, but it can also mean the snippet missed some ad click tracking — verify your setup if this seems unusually high"
+      }, {
+        text: "Use the Channels tab to decide where to invest: if one source has a high revenue share or high transaction count, it's a candidate for increased budget"
+      }],
+      variant: "highlighted"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent(props);
+}
+export {
+  MDXContent as default
+};

package/dist/chunks/ClickVsTransactionAttribution.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { F as FeatureHighlights, M as MousePointer, K as KeyPointsList } from "./index.js";
+import "react";
+import { S as ShoppingCart } from "./shopping-cart.js";
+function _createMdxContent(props) {
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "Two Ways to View Revenue Timing",
+      cardDescription: "The attribution window toggle on the Transactions and Channels tabs lets you choose whether revenue is grouped by when the ad was clicked or when the purchase actually happened.",
+      cardIcon: MousePointer,
+      columns: 2,
+      highlights: [{
+        icon: MousePointer,
+        title: "Click-Based",
+        description: "Revenue is counted in the time period when the ad was clicked"
+      }, {
+        icon: ShoppingCart,
+        title: "Transaction-Based",
+        description: "Revenue is counted in the time period when the purchase occurred"
+      }]
+    }), "\n", jsx(KeyPointsList, {
+      title: "When each view is most useful",
+      points: [{
+        text: "Click-based is best for evaluating campaign performance: it shows how much revenue a campaign generated based on when customers engaged with it, even if they took days or weeks to buy"
+      }, {
+        text: "Transaction-based is best for financial reporting: it matches revenue to the calendar period it was actually received, regardless of when the original ad click happened"
+      }, {
+        text: "Click-based totals will differ from transaction-based totals because some purchases made today were driven by ad clicks that happened in a previous date range"
+      }, {
+        text: "If you're comparing your dashboard revenue to your actual sales records, use transaction-based — it lines up with when money actually changed hands"
+      }],
+      variant: "highlighted"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent();
+}
+export {
+  MDXContent as default
+};

package/dist/chunks/ConnectGoogleAds.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { P as ProcessSteps, L as Link } from "./index.js";
+import "react";
+function _createMdxContent(props) {
+  return jsx(ProcessSteps, {
+    title: "How to Connect Your Google Ads Account",
+    icon: Link,
+    steps: [{
+      number: 1,
+      title: "Open your dashboard settings",
+      description: "Click the settings icon in the top right of your dashboard to open the account settings panel."
+    }, {
+      number: 2,
+      title: "Select Google Ads",
+      description: 'Find the Ad Accounts section and click "Connect" next to Google Ads.'
+    }, {
+      number: 3,
+      title: "Sign in with Google",
+      description: "You'll be redirected to Google's sign-in page. Sign in with the Google account that has access to your Google Ads account."
+    }, {
+      number: 4,
+      title: "Grant permissions",
+      description: "Review and approve the requested permissions. We need read access to your campaigns, spend, and click data."
+    }, {
+      number: 5,
+      title: "Select your account",
+      description: "If you manage multiple Google Ads accounts, select the one you want to connect to this dashboard."
+    }, {
+      number: 6,
+      title: "Wait for data to sync",
+      description: "After connecting, your campaign and spend data will begin syncing. Initial data may take a few hours to appear."
+    }]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent();
+}
+export {
+  MDXContent as default
+};

package/dist/chunks/ConnectMeta.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { f as createLucideIcon, P as ProcessSteps, L as Link, T as TrendingUp } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+/**
+ * @license lucide-react v0.464.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Database = createLucideIcon("Database", [
+  ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
+  ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
+  ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
+]);
+function _createMdxContent(props) {
+  return jsxs(Fragment, {
+    children: [jsx(InfoCard, {
+      title: "Two things we connect, not one",
+      description: "Connecting Meta requires both your ad account and a Meta Dataset",
+      icon: Database,
+      variant: "highlighted",
+      items: [{
+        title: "Your Meta Ads account",
+        description: "This gives us access to your campaign spend, impressions, and click data — the same numbers you see inside Meta Ads Manager."
+      }, {
+        title: "A Meta Dataset (formerly called a Pixel)",
+        description: "This is how we send your offline conversion data back to Meta. When a tracked visitor makes a purchase on your site, we report that conversion to Meta through the Dataset so Meta can accurately attribute it to the right campaign and use it to optimize your ads."
+      }]
+    }), "\n", jsx(ProcessSteps, {
+      title: "How to Connect Your Meta Ads Account",
+      icon: Link,
+      steps: [{
+        number: 1,
+        title: "Open your dashboard settings",
+        description: "Click the settings icon in the top right of your dashboard to open the account settings panel."
+      }, {
+        number: 2,
+        title: "Select Meta Ads",
+        description: 'Find the Ad Accounts section and click "Connect" next to Meta (Facebook/Instagram) Ads.'
+      }, {
+        number: 3,
+        title: "Sign in with Facebook",
+        description: "You will be redirected to Facebook's login page. Sign in with the account that has Admin access to your Business Manager. Admin access is required — advertiser-only roles cannot complete the connection."
+      }, {
+        number: 4,
+        title: "Grant permissions",
+        description: "Review and approve the requested permissions. We need access to your ad account spend, campaign data, click events, and your Meta Dataset so we can send conversion data back to Meta."
+      }, {
+        number: 5,
+        title: "Select your Business Manager and ad account",
+        description: "Choose the Business Manager and the specific ad account you want to connect. If you manage multiple accounts, select the one running the ads you want to track."
+      }, {
+        number: 6,
+        title: "Select or create a Meta Dataset",
+        description: "If your ad account already has a Dataset (formerly called a Pixel), select it from the list. If none exists, we will automatically create one for you in the next step. The Dataset is what allows Meta to receive your conversion data and attribute purchases back to the correct campaigns."
+      }, {
+        number: 7,
+        title: "Wait for data to sync",
+        description: "After connecting, your Meta campaign and spend data will begin appearing in the dashboard. Initial sync may take a few hours. Conversion data sent via the Dataset may reflect a 24-hour delay in Meta Ads Manager."
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "Common connection issues",
+      description: "What to do if the connection fails or data is not showing up",
+      icon: TrendingUp,
+      variant: "warning",
+      items: [{
+        title: "You do not see the right Business Manager",
+        description: "Make sure you are logged into the Facebook account that is an Admin of the Business Manager you want to connect, not just a personal ad account.",
+        dotColor: "amber"
+      }, {
+        title: "Permission denied error",
+        description: "Your Facebook account must have Admin role on the Business Manager. Advertiser access is not sufficient. Check your role in Business Manager settings and ask an Admin to complete the connection if needed.",
+        dotColor: "amber"
+      }, {
+        title: "No Dataset found and automatic creation failed",
+        description: "If we cannot create a Dataset automatically, you can create one manually in Meta Events Manager (business.facebook.com) and then reconnect. Make sure the Dataset is owned by or shared with the same Business Manager you are connecting.",
+        dotColor: "amber"
+      }, {
+        title: "Data appears but is incomplete",
+        description: "Meta data is typically available with a 24-hour delay. If data from the past day is missing, this is normal — check back the following day.",
+        dotColor: "amber"
+      }]
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? jsx(MDXLayout, {
+    ...props,
+    children: jsx(_createMdxContent, {
+      ...props
+    })
+  }) : _createMdxContent();
+}
+export {
+  MDXContent as default
+};