@embedreach/components 0.3.47 → 0.3.49

package/dist/chunks/RevenueVsCustomerAttribution.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { F as FeatureHighlights, U as Users, K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+import { D as DollarSign } from "./dollar-sign.js";
+function _createMdxContent(props) {
+  const _components = {
+    p: "p",
+    ...props.components
+  };
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "Revenue Attribution vs Customer Attribution",
+      cardDescription: "Revenue and customer counts use different attribution logic, which is why a sale can appear attributed to one sources while the customer affiliated with that sale is attributed to a different source. This will not always be the case, but it is important to understand why it may happen.",
+      cardIcon: DollarSign,
+      columns: 2,
+      highlights: [{
+        icon: DollarSign,
+        title: "Measured Revenue",
+        description: "Last-touch: the most recent marketing interaction before purchase gets credit"
+      }, {
+        icon: Users,
+        title: "New Customers",
+        description: "First-touch: the customer's very first visit ever gets permanent credit"
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "A concrete example",
+      description: "How the same customer can appear in two different places",
+      icon: Users,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-4 text-sm",
+        children: [jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "Imagine a customer who first found you through a Google Ad six months ago, then came back last\nweek by clicking a Facebook Ad before buying."
+          })
+        }), jsxs("div", {
+          className: "space-y-2",
+          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"
+            }), jsx("p", {
+              children: jsxs(_components.p, {
+                children: [jsx("span", {
+                  className: "font-medium",
+                  children: "Measured Revenue"
+                }), " attributes this sale to", " ", "\n", jsx("span", {
+                  className: "font-medium",
+                  children: "Facebook Ads"
+                }), " — the last paid click before purchase."]
+              })
+            })]
+          }), 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"
+            }), jsx("p", {
+              children: jsxs(_components.p, {
+                children: [jsx("span", {
+                  className: "font-medium",
+                  children: "New Customers"
+                }), " attributes this customer to", " ", "\n", jsx("span", {
+                  className: "font-medium",
+                  children: "Google Ads"
+                }), " — the very first interaction that brought\nthem to your site."]
+              })
+            })]
+          })]
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "These two data points simply answer different questions, but together paint a picture of how different marketing touchpoints affect your business."
+          })
+        })]
+      })
+    }), "\n", jsx(KeyPointsList, {
+      title: "When to use each view",
+      points: [{
+        text: "Use Measured Revenue to understand which campaigns are directly driving purchases right now — it reflects what's converting customers at the moment of sale"
+      }, {
+        text: "Use New Customers to understand which channels are introducing new people to your business for the first time — it reflects where your audience discovery is coming from"
+      }, {
+        text: "It's normal for the same customer to appear under different sources in each view — this is expected behavior, not a data error"
+      }],
+      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/TrackingSnippet.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { f as createLucideIcon, u as useHelpCenterActions, F as FeatureHighlights, L as Link, T as TrendingUp, P as ProcessSteps } 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 Code = createLucideIcon("Code", [
+  ["polyline", { points: "16 18 22 12 16 6", key: "z7tu5w" }],
+  ["polyline", { points: "8 6 2 12 8 18", key: "1eg1df" }]
+]);
+const OpenInstallPixelLink = ({ children }) => {
+  const { openInstallPixel } = useHelpCenterActions();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: openInstallPixel,
+      className: "text-primary underline underline-offset-4 hover:text-primary/80 cursor-pointer bg-transparent border-none p-0 font-[inherit] text-[inherit]",
+      children
+    }
+  );
+};
+function _createMdxContent(props) {
+  const _components = {
+    p: "p",
+    ...props.components
+  };
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "What the Tracking Snippet Does",
+      cardDescription: "A small piece of JavaScript code installed on your website. Without it, your dashboard will not show meaningful attribution data.",
+      cardIcon: Code,
+      columns: 3,
+      highlights: [{
+        icon: Link,
+        title: "Tracks Visitors",
+        description: "Identifies when someone lands on your site from an ad click"
+      }, {
+        icon: Code,
+        title: "Captures Conversions",
+        description: "Records when a tracked visitor completes a purchase or fills out a form"
+      }, {
+        icon: TrendingUp,
+        title: "Connects the Dots",
+        description: "Links the ad click to the purchase so revenue is attributed correctly"
+      }]
+    }), "\n", jsx(ProcessSteps, {
+      title: "How the snippet works",
+      icon: Code,
+      steps: [{
+        number: 1,
+        title: "Customer clicks an ad",
+        description: "When someone clicks one of your ads, the ad platform passes a click identifier in the URL (like a Google Click ID or Meta fbclid), as well as UTM parameters."
+      }, {
+        number: 2,
+        title: "Snippet captures the click",
+        description: "The snippet reads those identifiers from the URL and saves them in the customer's browser. This happens automatically in the background."
+      }, {
+        number: 3,
+        title: "Customer is identified",
+        description: "When the customer fills out any form on your site (contact us, purchase, sign up, etc.) or makes a phone call (if you have implemented call tracking), their information is captured and tied to the source of their click."
+      }, {
+        number: 4,
+        title: "Customer makes a purchase",
+        description: "When the customer completes a purchase, the purchase data is matched to the identifying information captured by the tracking snippet."
+      }, {
+        number: 5,
+        title: "Attribution is recorded",
+        description: "The system matches the click to the purchase and attributes the revenue to the correct campaign and channel, and you can then see it all in your dashboard."
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "Why your dashboard needs it",
+      description: "The snippet is required for attribution data to appear",
+      icon: TrendingUp,
+      variant: "warning",
+      children: jsxs("div", {
+        className: "space-y-3 text-sm",
+        children: [jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "Without the snippet installed on your website, we have no way to connect ad clicks to\npurchases. Your dashboard will show ad spend but will not show measured revenue or\nattribution data."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "The snippet should be installed on every page of your website, not just the homepage or\ncheckout page. Visitors can land on any page from an ad."
+          })
+        })]
+      })
+    }), "\n", jsx(InfoCard, {
+      title: "How to install it",
+      description: "You or your webmaster adds one snippet to your site",
+      icon: Code,
+      variant: "highlighted",
+      children: jsxs("div", {
+        className: "space-y-3 text-sm",
+        children: [jsx("p", {
+          className: "text-muted-foreground",
+          children: jsxs(_components.p, {
+            children: ["The snippet is a single block of JavaScript that gets pasted into the ", jsx("code", {
+              className: "font-mono bg-muted px-1 rounded text-xs",
+              children: "<head>"
+            }), " section of your website's HTML. Because the ", jsx("code", {
+              className: "font-mono bg-muted px-1 rounded text-xs",
+              children: "<head>"
+            }), " is shared across every page, installing it once is all it takes — you do not need to add it page by page."]
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(_components.p, {
+            children: "If you use a platform like WordPress, Shopify, or Squarespace, there is usually a dedicated field for adding scripts to the site-wide header. Your webmaster will know where to find it."
+          })
+        }), jsx("p", {
+          className: "text-muted-foreground",
+          children: jsx(OpenInstallPixelLink, {
+            children: "Click here to get your snippet and step-by-step installation instructions."
+          })
+        })]
+      })
+    })]
+  });
+}
+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/TrafficFunnel.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { P as ProcessSteps, U as Users, T as TrendingUp, 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(ProcessSteps, {
+      title: "The Traffic Funnel",
+      icon: Users,
+      steps: [{
+        number: 1,
+        title: "Visitors",
+        description: "Everyone who lands on your website, regardless of where they came from. This is the widest part of the funnel."
+      }, {
+        number: 2,
+        title: "Identified Leads",
+        description: "Visitors we've connected to a real person — someone who submitted a form, made an inquiry, or was identified by the tracking snippet via an email or phone number."
+      }, {
+        number: 3,
+        title: "Conversions",
+        description: "Identified leads who completed a purchase. These are the customers whose revenue appears in your measured revenue total."
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "Where you may be losing potential customers",
+      description: "The gap between each stage reveals where to focus",
+      icon: TrendingUp,
+      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: "Visitors to Leads gap"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: jsx(_components.p, {
+                children: "A large drop-off here means visitors are leaving without identifying themselves. Consider\nwhether your site has clear calls to action, contact forms, or easy ways for visitors to\nshare their information."
+              })
+            })]
+          })]
+        }), 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: "Leads to Conversions gap"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: jsx(_components.p, {
+                children: "A large drop-off here means leads are identified but not buying. This could point to\npricing, sales follow-up, or the checkout experience as areas to investigate."
+              })
+            })]
+          })]
+        })]
+      })
+    }), "\n", jsx(KeyPointsList, {
+      title: "Important to know",
+      points: [{
+        text: "The funnel only shows people we can track — visitors using ad blockers or private browsing may not appear"
+      }, {
+        text: "Funnel counts reflect the selected date range — comparing two date ranges side by side shows whether things are improving"
+      }],
+      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/UnknownConversions.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+import { C as CircleHelp } from "./circle-help.js";
+function _createMdxContent(props) {
+  return jsxs(Fragment, {
+    children: [jsx(InfoCard, {
+      title: 'Why Some Conversions Show as "Unknown"',
+      description: "Unknown appears when a purchase is recorded but we cannot find any marketing touchpoint in the 90-day window",
+      icon: CircleHelp,
+      variant: "warning",
+      intro: "A conversion is labeled Unknown when the purchase event fired but we could not connect it to any identifiable marketing source. This is expected to some degree — no tracking system captures 100% of customer journeys.",
+      items: [{
+        title: "Customer had no website visits in the 90-day window",
+        description: "They may have purchased based on word-of-mouth, an offline interaction, or a much older marketing impression that falls outside the attribution window.",
+        dotColor: "amber"
+      }, {
+        title: "The customer could not be matched",
+        description: "We track visitors by email or phone number. If the buyer used a different contact detail for the purchase than they did when browsing, we cannot make the connection.",
+        dotColor: "amber"
+      }, {
+        title: "The snippet did not fire on the checkout page",
+        description: "If the tracking snippet is not installed on the checkout or confirmation page, the conversion is recorded but the visit data is not captured.",
+        dotColor: "amber"
+      }, {
+        title: "Ad blockers or private browsing",
+        description: "Some customers browse with ad blockers that prevent the snippet from running, making their visit invisible to attribution.",
+        dotColor: "amber"
+      }]
+    }), "\n", jsx(KeyPointsList, {
+      title: "What you can do to reduce Unknown conversions",
+      points: [{
+        text: "Verify the tracking snippet is installed on every page of your website, including checkout confirmation pages"
+      }, {
+        text: "Ensure your purchase events are passing the correct customer identifiers (email or phone) so we can match the conversion to a visitor record"
+      }, {
+        text: "Some Unknown conversions are unavoidable — focus on ensuring the snippet is correctly installed before investigating further"
+      }],
+      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/WhatIsROAS.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { F as FeatureHighlights, T as TrendingUp, K as KeyPointsList } from "./index.js";
+import "react";
+import { I as InfoCard } from "./index2.js";
+import { D as DollarSign } from "./dollar-sign.js";
+function _createMdxContent(props) {
+  return jsxs(Fragment, {
+    children: [jsx(FeatureHighlights, {
+      cardTitle: "Return on Ad Spend (ROAS)",
+      cardDescription: "ROAS tells you how much revenue you earn for every dollar you spend on advertising. It's the primary way to evaluate whether your ads are working.",
+      cardIcon: TrendingUp,
+      columns: 2,
+      highlights: [{
+        icon: DollarSign,
+        title: "The Formula",
+        description: "Revenue from ads divided by Ad spend = ROAS"
+      }, {
+        icon: TrendingUp,
+        title: "What It Means",
+        description: "A ROAS of 3x means you earn $3 for every $1 spent on ads"
+      }]
+    }), "\n", jsx(InfoCard, {
+      title: "Reading Your ROAS",
+      description: "How to interpret the number you see in your dashboard",
+      icon: TrendingUp,
+      variant: "highlighted",
+      items: [{
+        title: "ROAS measures revenue returned, not profit",
+        description: "A ROAS of 1x means you recouped your ad spend in revenue — but revenue is not the same as profit. After accounting for the cost of goods, labor, and other expenses, you need your ROAS to be high enough that what remains after those costs exceeds what you spent on ads."
+      }, {
+        title: "Higher is better, but there is no universal target",
+        description: "The ROAS you need to be profitable depends on your margins. A business with high margins can do well at a lower ROAS. A business with thin margins needs a higher ROAS just to break even on ad spend."
+      }, {
+        title: "What counts as good varies by product",
+        description: "High-margin products can be profitable at 2-3x. Low-margin products may need 5x or higher to cover costs. Compare your ROAS to your margins, not to generic benchmarks."
+      }]
+    }), "\n", jsx(KeyPointsList, {
+      title: "Key things to remember",
+      points: [{
+        text: "ROAS only counts revenue we can trace back to an ad click — it reflects measured revenue, not your total business revenue"
+      }, {
+        text: "Use ROAS to compare campaigns: a campaign with a higher ROAS is delivering more revenue per dollar spent"
+      }, {
+        text: "ROAS goes up when you either increase revenue from ads or decrease ad spend without losing sales"
+      }],
+      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/circle-help.js

@@ -0,0 +1,15 @@
+import { f as createLucideIcon } from "./index.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 CircleHelp = createLucideIcon("CircleHelp", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+]);
+export {
+  CircleHelp as C
+};

package/dist/chunks/dollar-sign.js

@@ -0,0 +1,14 @@
+import { f as createLucideIcon } from "./index.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 DollarSign = createLucideIcon("DollarSign", [
+  ["line", { x1: "12", x2: "12", y1: "2", y2: "22", key: "7eqyqh" }],
+  ["path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6", key: "1b0p4s" }]
+]);
+export {
+  DollarSign as D
+};