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
};
