AI Integration
Use these prompts with Cursor, GitHub Copilot, or any AI coding assistant to integrate Flow Myna into your codebase. Choose Website Tracker for frontend page-flow tracking (zero-config script tag), or an SDK for server-side process tracking. The AI will analyze your code, suggest what to track, and implement it step-by-step with your approval.
How It Works
1
AI Asks Questions
The AI will ask what process you want to track and if you have an API key. Answer these first.
2
Review Plan
The AI analyzes your codebase and presents a plan. No code changes until you approve.
3
Implement
The AI implements tracking step-by-step, confirming each change with you.
Copy the Prompt
Select your integration method, then copy the prompt and paste it into your AI coding assistant.
# 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**: Persistent device identifier (localStorage, no cookies)
- **User**: Set via `FlowMyna.identify()` for authenticated users
---
## 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. The tracker persists the user ID in localStorage.
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!**Tips for Best Results
- Be specific about the process — Instead of "track everything", say "track order fulfillment from checkout to delivery". This helps the AI focus.
- Mention key files or modules — If you know where the process logic lives, tell the AI (e.g., "the order service is in
src/services/orders/"). - Review the suggested events — The AI will propose events to track. Remove ones you don't need and add any it missed.
- Start small — Track one process well before expanding. You can always run the prompt again for additional processes.
- Check the utility module — The AI creates a tracking utility. Review it to ensure it follows your project's patterns.
Key Required: Before running any integration, create a key in your Flow Myna workspace at Workspace → Data → API Keys. For the Website Tracker, create a "Website Tracker" key to get a tracker ID. For SDKs, create an API key that the AI will set up as an environment variable.
What Gets Tracked
The AI will typically suggest tracking:
| Pattern | Example Events | Objects |
|---|---|---|
| User journeys | Viewed /pricing, Clickout: Book a Demo, Form Submitted | Session, Visitor |
| State changes | Order Created, Order Paid, Order Shipped | Order, Customer |
| Assignments | Ticket Assigned, Case Escalated | Ticket, Agent, Team |
| Approvals | Invoice Approved, Request Rejected | Invoice, Approver |
| Handoffs | Lead Qualified, Lead Converted | Lead, Sales Rep, Account |