AI Integration

# Flow Myna Integration Prompt [Website Tracker]

Help me add Flow Myna website tracking to my web application using the fm.js script.

**IMPORTANT: YOU MUST ASK ME QUESTIONS FIRST. Do NOT analyze code or make changes until I answer.**

---

## ABOUT FLOW MYNA TRACKER

Flow Myna Tracker (fm.js) is a lightweight, zero-config JavaScript snippet that auto-captures user journeys through your website for process mining. Just add a script tag and it starts tracking.

**What it captures automatically:**
- **Page views**: `Viewed /pricing`, `Viewed /about` (including SPA navigation)
- **External clicks**: `Clickout: Book a Demo`, `Clickout: Contact Sales` (links to other domains, mailto, tel)
- **Form interactions**: `Form Started`, `Form Submitted`

**How internal navigation clicks work:**
Internal clicks (nav links, buttons that go to another page on your site) are NOT separate events. Instead, the click metadata is attached as a `navigation_source` property on the subsequent page view event. For example, clicking a nav link to "/pricing" produces:
`Viewed /pricing` with property `navigation_source: "Nav: Pricing"`

This keeps the process graph clean: nodes are pages and external actions, not individual button clicks.

**Objects (automatic):**
- **Session**: A browsing session (30-min timeout) - this is the "case" in process mining
- **Visitor** / **User**: only after `FlowMyna.identify()` or `data-privacy-mode="identify"`. The default mode is cookieless — nothing is stored in the browser, visitors are stitched server-side within a day, and no consent banner is needed. Identify mode stores an id in localStorage and needs consent in the EU, so wire it into your consent flow (a common pattern is calling `identify()` only after login)

---

## YOUR FIRST TASK: ASK ME THESE QUESTIONS

Before doing anything else, ask me:

1. **What is your website or web app?**
   (e.g., "SaaS dashboard", "marketing site", "e-commerce store", "documentation site")

2. **Do you already have a Flow Myna tracker ID?**
   (It looks like `fm_abc123xyz`. If not, I'll tell you where to create one: Workspace > Data > API Keys > Website Tracker)

3. **What framework are you using?**
   (e.g., Next.js, React, Vue, Svelte, plain HTML, Astro, etc.)

4. **What user flows matter most to you?**
   (e.g., "signup flow", "onboarding", "checkout", "content engagement", "all page navigation")

**STOP HERE. Ask these questions and wait for my answers before proceeding.**

---

## AFTER I ANSWER, YOU WILL:

1. **ADD** the fm.js script tag to the root layout/document head
2. **AUDIT** all pages for CTA elements that match the default CTA selectors
3. **IDENTIFY** ambiguous click targets (same visible text on multiple clickable elements)
4. **ADD** `data-track` attributes to disambiguate duplicate CTAs
5. **CONFIGURE** URL exclusions for pages that should not be tracked (admin, dashboard, etc.)
6. **OPTIONALLY** add `FlowMyna.capture()` calls for custom business events
7. **OPTIONALLY** add `FlowMyna.identify()` at login/authentication points
8. **PRESENT** a plan and **WAIT** for approval before making changes

---

## STEP 1: INSTALL THE SCRIPT

Add this to your root layout or HTML head (ONCE, not per page):

```html
<script src="https://flowmyna.com/fm.js?t=YOUR_TRACKER_ID" defer></script>
```

**Framework-specific examples:**

Next.js (app/layout.tsx):
```tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://flowmyna.com/fm.js?t=YOUR_TRACKER_ID" strategy="afterInteractive" />
      </body>
    </html>
  )
}
```

Plain HTML:
```html
<head>
  <script src="https://flowmyna.com/fm.js?t=YOUR_TRACKER_ID" defer></script>
</head>
```

To exclude sensitive pages, add the `data-exclude-urls` attribute:
```html
<script
  src="https://flowmyna.com/fm.js?t=YOUR_TRACKER_ID"
  data-exclude-urls="/dashboard,/admin,/settings,/internal"
  defer
></script>
```

---

## STEP 2: AUDIT AND DISAMBIGUATE CTAs

This is the most important step. The tracker auto-captures clicks on CTA elements. When the same visible text appears on multiple clickable elements (e.g., "Pricing" in both the nav and footer), the events are ambiguous.

**Default CTA selectors** (elements that trigger click tracking):
```
a[href*="calendly"]      a[href*="mailto:"]
a[href^="/partners"]     a[href^="/pricing"]
a[href^="/demo"]         a[href^="/signup"]
a[href^="/register"]     a[href^="/contact"]
button[type="submit"]    [data-cta]
[data-track]             .cta
.btn-primary             .button-primary
```

**How to disambiguate with `data-track`:**

Add a `data-track` attribute with a location prefix. The tracker uses this value instead of the element text.

```html
<!-- Nav link -->
<a href="/pricing" data-track="Nav: Pricing">Pricing</a>

<!-- Footer link -->
<a href="/pricing" data-track="Footer: Pricing">Pricing</a>

<!-- Hero CTA button -->
<a href="/pricing" data-track="Hero: View Pricing" class="btn-primary">View Pricing</a>

<!-- External link (will produce "Clickout: Header: Book a Demo") -->
<a href="https://calendly.com/..." data-track="Header: Book a Demo" class="btn-primary">Book a Demo</a>
```

**Recommended location prefixes:**
`Nav:`, `Footer:`, `Header:`, `Hero:`, `Sidebar:`, `Banner:`, `Modal:`, `Bottom CTA:`, `Mobile Menu:`

**How events flow:**
- Internal click on `data-track="Nav: Pricing"` + navigation to /pricing produces:
  `Viewed /pricing` with property `navigation_source: "Nav: Pricing"`
- External click on `data-track="Header: Book a Demo"` produces:
  `Clickout: Header: Book a Demo`
- Click on element WITHOUT `data-track` uses the element's visible text automatically

---

## STEP 3: AUDIT PROCESS

When auditing the codebase, follow this process:

1. **Find the root layout** - this is where the script tag goes
2. **Find shared components** - navigation, header, footer, sidebar (these appear on every page)
3. **For each page**, list all elements matching the CTA selectors above
4. **Flag duplicates** - same visible text on multiple elements within a page (including shared nav/footer)
5. **Add `data-track`** with location prefix to EVERY duplicated CTA

**Common ambiguities to look for:**
| Ambiguity | Example | Fix |
|-----------|---------|-----|
| Nav link = footer link | "Pricing" in both | `data-track="Nav: Pricing"` / `data-track="Footer: Pricing"` |
| Desktop CTA = mobile CTA | "Sign Up" in header and mobile menu | `data-track="Header: Sign Up"` / `data-track="Mobile Menu: Sign Up"` |
| Hero CTA = bottom CTA | "Get Started" at top and bottom of page | `data-track="Hero: Get Started"` / `data-track="Bottom CTA: Get Started"` |
| Multiple pricing cards | "Buy Now" on each tier | `data-track="Starter: Buy Now"` / `data-track="Pro: Buy Now"` |
| FAQ mailto = footer mailto | "Contact Us" in FAQ and footer | `data-track="FAQ: Contact Us"` / `data-track="Footer: Contact Us"` |

---

## STEP 4: OPTIONAL CUSTOM EVENTS

For actions that aren't page views, external clicks, or form submissions, use `FlowMyna.capture()`:

```javascript
// Track custom business events
FlowMyna.capture('Feature Activated', { feature: 'dark-mode' });
FlowMyna.capture('Plan Selected', { plan: 'pro', billing: 'annual' });
FlowMyna.capture('Video Played', { video_id: 'intro-demo', duration: 120 });
FlowMyna.capture('Search Performed', { query: 'pricing', results_count: 5 });
```

---

## STEP 5: OPTIONAL USER IDENTIFICATION

Link anonymous sessions to authenticated users (call once after login):

```javascript
FlowMyna.identify('user-123', {
  email: 'user@example.com',
  name: 'Jane Doe',
  plan: 'premium'
});
```

This creates a User object linked to the session, enabling cross-session analysis.

---

## IMPLEMENTATION RULES

1. **Script tag goes in the root layout ONCE** - not per page. fm.js handles SPA navigation automatically.
2. **Use `data-track` on EVERY CTA where the same text appears multiple times** on a page (including shared header/footer).
3. **Use location-based prefixes** for `data-track` values: `Nav:`, `Footer:`, `Hero:`, etc.
4. **Exclude sensitive pages** with `data-exclude-urls` or `FlowMyna.init({ excludeUrls: [...] })`.
5. **For SPAs** (React, Next.js, Vue): fm.js hooks pushState/replaceState/popstate automatically. No extra code needed.
6. **For server-rendered pages** (MPA): fm.js captures a pageview on every page load. No extra code needed.
7. **Call `FlowMyna.identify()` once after login**, not on every page load. Calling it switches the tracker to identify mode (an id in localStorage) — until then nothing is stored in the browser.
8. **Do NOT wrap `FlowMyna.capture()` in try/catch** - the tracker already handles errors silently.

---

## CONFIGURATION REFERENCE

```javascript
// Optional: override defaults after script loads
FlowMyna.init({
  // Exclude pages from tracking
  excludeUrls: ['/dashboard', '/admin', '/settings'],

  // Control what gets auto-captured
  autocapture: {
    pageviews: true,           // Track page views
    clicks: 'cta',             // 'all' | 'cta' | false
    forms: true,               // Track form interactions
    hashChanges: true,         // Track #hash changes
    historyChanges: true,      // Track SPA navigation
  },

  // Custom CTA selectors (merged with defaults)
  ctaSelectors: [
    '.my-cta-class',
    '[data-cta]',
    'a[href^="/signup"]',
  ],

  // Elements to ignore
  ignoreSelectors: ['.no-track', '[data-fm-ignore]'],

  // Debug mode (logs events to console)
  debug: true,
});
```

---

## EXAMPLE: SaaS MARKETING SITE

**Shared layout** (header + footer on every page):
| Element | data-track | Event produced |
|---------|------------|----------------|
| Nav "Pricing" link | `Nav: Pricing` | `Viewed /pricing` with `navigation_source: "Nav: Pricing"` |
| Nav "Sign Up" button | `Header: Sign Up` | `Viewed /signup` with `navigation_source: "Header: Sign Up"` |
| Footer "Pricing" link | `Footer: Pricing` | `Viewed /pricing` with `navigation_source: "Footer: Pricing"` |
| Footer "Contact" mailto | `Footer: Contact` | `Clickout: Footer: Contact` |

**Home page:**
| Element | data-track | Event produced |
|---------|------------|----------------|
| Hero "Get Started" button | `Hero: Get Started` | `Viewed /signup` with `navigation_source: "Hero: Get Started"` |
| Hero "Book a Demo" Calendly link | `Hero: Book a Demo` | `Clickout: Hero: Book a Demo` |
| Bottom "Get Started" button | `Bottom CTA: Get Started` | `Viewed /signup` with `navigation_source: "Bottom CTA: Get Started"` |

---

## CHECKLIST BEFORE IMPLEMENTATION

- [ ] Script tag added to root layout (once)
- [ ] Sensitive pages excluded via data-exclude-urls or excludeUrls
- [ ] All pages audited for CTA elements matching default selectors
- [ ] Ambiguous CTAs identified (same text, multiple locations)
- [ ] `data-track` attributes added with location prefixes to all ambiguous CTAs
- [ ] Optional: custom events added via FlowMyna.capture()
- [ ] Optional: user identification added via FlowMyna.identify() at login

---

**Now ask me the questions above!**