Pipes Demo — textový scénář

Změny proti verzi 2:

1. Piper má vlastní roli v kroku Transform Function (odbočka od videa) — napíše transformaci na základě jednoho promptu od uživatele a pak se zase schová.
2. Intro je skipnutelný tooltip nad rozostřenou maketou (ne fullscreen).
3. Žádné Skip tour — držíme Prev / Next v banneru, jak je teď.
4. Outro = formulář se žádostí o konzultaci (recyklujeme stávající), zrušitelný; po zrušení může uživatel volně proklikávat maketu nebo se vracet na jednotlivé kroky.
5. Source název & event pills jsou všude website.com (Bank Website z videa byl proto, že Karel točil v bankovní instanci).

Persona & framing

„As a data engineer, I need to collect events from my website, identify user profiles if possible, and send enriched data to Meta Conversion API.“

Tahle věta drží celou tour pohromadě a otevírá ji jako welcome tooltip (Step 1).

Výchozí stav workspace

• Sidebar: Dashboard / Sources / Profiles / Connections / Destinations / Monitoring / Authentication.
• Diagram „Pipes diagram“: 1 source (website.com, Event Stream) → 3 pipes → 3 destinations (Sklik API, Google Ads, Meta CAPI; všechny Disabled).
• „Last hour at a glance“: nuly.
• Grafy: prázdné, 10 dynamických timestamps.
• Sekce Latest events (dole na dashboardu): 10 mock eventů ze sourcu website.com, nejnovější rozbalený s JSON payloadem.
• Monitoring > Errors: validation_failed záznamy z website.com.

Tour mechanika (rekapitulace)

• Stálý banner nahoře: titulek kroku, Prev a Next šipky, indikátor 3 / 9.
• Spotlight + tooltip nad aktivním hotspotem; klick mimo hotspot = jemné zatřesení + dim overlay (jako teď).
• Klick na Prev / Next ignoruje spotlight (jako teď).
• Intro tooltip je skipnutelný křížkem nebo Next.
• Piper panel je pravý sloupec scenérie. Aktivuje se jen v Step 5b (rainbow glow se zesílí, panel získá pointer-events). Mimo Step 5 je vizuálně přítomný, ale neinteraktivní; v idle stavu drží decentní hint „Need help? Ask Piper anytime.“

Step 1 — Intro (skippable welcome tooltip)

Hotspot: žádný. Maketa je pod tooltipem rozostřená (filter: blur(4px) + dim overlay). Tooltip:

Meet Meiro Pipes. As a data engineer, I need to collect events from my website, identify user profiles if possible, and send enriched data to Meta Conversion API.

This tour walks through exactly that — in 8 steps. [Start tour] [✕ skip]

Akce:

• Start tour → blur zmizí, scénář pokračuje Step 2.
• ✕ skip → blur zmizí, tour je zavřený, maketa je plně proklikatelná. Banner zmizí.

Step 2 — Source: prepared data source + SDK

Timing v originále: 0:14–0:36 Hotspot: karta website.com v sloupci SOURCES.

Tooltip A (před klickem, kotva u source karty):

We start with collecting events from the website. For this we have a prepared data source connected to the Meiro SDK — it comes with prepared event types like page_view, form_start, form_submit, and many more.

Mikrointerakce: hover/spotlight nad sourcem zvýrazní jen ty pipes a destinations, do kterých website.com posílá (zbytek opacity: 0.4).

Akce uživatele: klikne na website.com → Source detail page.

Step 3 — Event Types & jejich role v identity resolution

Timing: 0:36–0:52 Kontext stránky: Source detail s hlavičkou website.com, URL https://sse-demo.eu1.pipes.meiro.io/collect/website-com, chips Enabled + Template web-sdk v2026-05-15, dot-grid 0 events in the last hour, sekce Connected Pipes (3 řádky), karta Pipes Tag (mpt.js), tabs Event Types | Data Mapping | Tracking Setup | History, list eventů (page_view, click, form_start, form_submit, scroll, file_download…).

Hotspot: tlačítko View Rules u eventu form_submit.

Tooltip:

These event types are important. They define not just what data is collected, but also the rules for identity resolution and how profiles get built. Open form_submit to see.

Akce uživatele: klikne View Rules u form_submit.

Step 4 — Form submit & identity stitching

Timing: 0:52–1:14 Kontext: modal Validation Rules: form_submit se otevírá — JSON Schema editor (read-only mock) a níž Identity Resolution Rules table (4 řádky: user_id → $.user_id, email → $.email, phone → $.phone, browser → $.device_id).

Hotspot: sekce Identity Resolution Rules.

Tooltip:

Look at form_submit. Besides other attributes, we collect user_id, email, phone, and device_id — and we actively use all of them in the identity resolution process to build the user profile.

Akce uživatele: Next v banneru zavře modal + vrátí na dashboard. Volitelně i Close v modalu posouvá tour dál (oba dva to musí dělat stejně).

Step 5 — Pipe & Transform Function (s Piper odbočkou)

Timing v originále: 1:14–1:56 (odchýlíme se od videa — místo prohlížení hotové funkce ji nechá uživatel napsat Piperovi)

5a — Vstup do pipe configu

Hotspot: karta Website to Meta CAPI v sloupci PIPES.

Tooltip:

While we collect events, the next step is to transform them. Each pipe converts events to the shape the destination expects — Meta CAPI, Google Ads, anywhere else. Let’s open one.

Akce: klick na pipe → Pipe configuration page (Connections > Pipes > Website to Meta CAPI).

5b — Piper sub-step (odchylka od videa)

Kontext stránky: Pipe config se otevírá s hlavičkou website.com → Meta CAPI (Enabled chip), tabs Configuration | History. Sekce Secrets (collapsed). Sekce Transform Function je prázdná — placeholder „No transform function defined yet. Ask Piper to write one for you, or write it manually.“

Tour aktivuje Piper panel (rainbow glow zesílí, panel získá pointer-events). V Piper input boxu se automaticky natypuje prompt:

„Write a transform function for Meta Conversion API. Map our event names (page_view, add_to_cart, begin_checkout, purchase, view_item, generate_lead, sign_up) to Meta’s names, and hash email and phone with SHA‑256.“

Hotspot: Send tlačítko v Piper input boxu.

Tooltip nad Pipera:

You don’t have to write transforms by hand. Piper drafts them from a short description. Hit Send.

Akce: uživatel klikne Send.

5c — Piper response + approval

V Piper threadu se objeví user message a pod ní Piper response s proposal card:

„Here’s a draft. Maps your event names to Meta’s standard ones, hashes email and phone with SHA‑256, and enriches each event with profile attributes (all_email_addresses, primary email & phone) from Meiro profiles.“

V cardu jsou tlačítka Accept (vlevo, primary) / Reject (vpravo). Pod cardem decentní tip:

Piper always asks for explicit approval before changing any Pipes setup.

Hotspot: Accept v proposal cardu.

Akce: klick na Accept.

5d — Transform funkce se objeví, Piper se schová

Po Accept se:

• Transform Function editor naplní vygenerovaným kódem (recyklujeme JS, který už máme z předchozího demo: eventMapping, hash helper, transform({ events, profiles, secrets })).
• Piper panel zmizí (piper-collapsed třída) nebo se sbalí do úzkého proužku s rainbow glow.
• Banner posune step counter (z 5b na 5c nebo se to celé počítá jako Step 5).

Tooltip (kotva na Transform Function editor):

One event can be routed to multiple destinations. The transform function can also enrich events — here Piper added hashed profile data (SHA‑256 email + phone) before the event leaves Pipes.

Akce: Next → návrat na dashboard.

Step 6 — Destination & Send Function

Timing: 1:56–2:12 Hotspot: karta Meta CAPI v sloupci EVENT DESTINATIONS na dashboardu.

Tooltip A (před klickem):

Destinations close the loop. Let’s see how the outbound side of Meta CAPI is wired.

Akce: klick na Meta CAPI → Destination page (Destinations > Meta CAPI). Hlavička, Connected Pipes (Website to Meta CAPI from website.com, Enabled), tabs, Authorization placeholder, Send Function editor s vyplněnou async funkcí (mock pro Meta Conversions API — pixelId/accessToken ze Secrets, fetch() na https://graph.facebook.com/v19.0/{pixelId}/events).

Tooltip B (na Send Function editor):

The destination definition lets us write a send function fully customised to whatever sits on the other side — REST, webhook, Graph API. Credentials come from Secrets, never from the code.

Akce: Next → návrat na dashboard.

Step 7 — Monitoring: live event feed

Timing: 2:12–2:27 Kontext: dashboard scrolluje dolů na sekci Latest events. List 10 řádků, první rozbalený s JSON payloadem.

Hotspot: první řádek v Latest events.

Tooltip:

Meiro Pipes give full transparency to event ingestion. We immediately monitor what events are coming in — every payload, every identity, in real time.

Akce: klick na řádek → JSON payload se rozbalí (context, user_id, page_url, device_id, client_ids, session_id, custom_payload, browser_metrics).

Step 8 — Monitoring: errors

Timing: 2:27–end Hotspot: položka Errors v sidebaru (rozbalená skupina Monitoring).

Tooltip:

And the same transparency for failures. Validation errors, OAuth failures, deploy errors in send functions — they all surface here, by source, by category, on a timeline.

Akce: klick na Errors → Monitoring > Errors page (sloupcový graf + filtry + list validation_failed řádků odkazujících na website.com).

Step 9 — Outro: consultation request form

Hotspot: žádný. Místo tooltipu se nad maketou (rozostřená backdrop, podobně jako Step 1 intro) otevře formulář žádosti o konzultaci — recyklujeme stávající form (SiteCTA.astro nebo dedicated form komponenta, kterou na webu už máme; pokud má víc verzí, použijeme tu lehkou „request a demo“ s 3–5 poli: name, work email, company, message).

Banner copy formuláře:

That’s Meiro Pipes in 8 steps. Want to see it on your own data? Tell us about your stack and we’ll set up a working pipeline together. [Request a consultation] [✕ close]

Akce:

• Odeslat formulář → standardní success state (kterou už form má).
• ✕ close (nebo klick mimo) → formulář zmizí, maketa zůstane plně proklikatelná v posledním stavu (Monitoring > Errors).
• Banner nahoře zůstává viditelný, uživatel se může vracet na předchozí kroky přes Prev / Next šipky a libovolně si je projet znovu. Tooltipy se znovu rozsvěcují, hotspoty fungují.

Co je potřeba dodělat v maketě

Nové obrazovky / sekce

1. Source detail → Event Types tab s listem eventů a tlačítky View Rules.
2. Validation Rules modal: JSON Schema editor (read-only mock) + Identity Resolution Rules table.
3. Pipe configuration page s prázdnou Transform Function (placeholder), po Accept se naplní JS kódem.
4. Destination page (Meta CAPI) s Connected Pipes, Authorization placeholder, vyplněným Send Function editorem.
5. Dashboard → Latest events (10 řádků, první rozbalený, payload z website.com).
6. Monitoring > Errors page (graf + filtry + list validation_failed z website.com).
7. Intro overlay (rozostřená maketa pod tooltipem, skip křížkem).
8. Outro overlay (rozostřená maketa pod formulářem, zavírací křížek; po zavření maketa volně proklikatelná, banner stále viditelný).

Tour mechanika

9. Phase machine rozšířit na step-1 … step-9 se sub-fázemi step-5a, step-5b, step-5c, step-5d.
10. Hover-only zvýraznění v pipes diagramu (Step 2 i Step 6 — hover dimuje nepropojené karty).
11. Multi‑tooltip kroky (Step 2/5/6 — jeden hotspot, dvě tooltip pozice před/po klicku).
12. Sidebar expandable groups Connections (Pipes / Profile Syncs) a Monitoring (Health / Errors) musí být v tour módu klickatelné.
13. Piper panel toggle — v Step 5b se aktivuje (pointer-events, glow ↑), v 5d se schová (collapsed / hidden).
14. Prev / Next v banneru — držíme stávající chování, výslovně bez Skip tlačítka.

Drobnosti & rename

15. Source SSE Website → website.com všude (diagram, source detail header, breadcrumb, event pills v Latest events, source link v Errors). URL slug collect/website-com nebo collect/website.
16. Pipes diagram výchozí stav v maketě upravit, aby odpovídal videu (3 destinations, všechny Disabled).
17. Last hour at a glance zachovat jako nulové stavy.
18. Piper idle state s hintem „Need help? Ask Piper anytime.“ mimo Step 5.

Otevřené otázky — vyřešené Ondrovým feedbackem 21. 5. 2026

• Jazyk → EN.
• Role Pipera → aktivní v Step 5 (Transform Function), jinak pasivní scenérie.
• Intro → skipnutelný tooltip nad rozostřenou maketou.
• Skip tour → ne, držíme Prev/Next v banneru.
• Step 5 multi-tooltip → stačí Next.
• Outro → konzultační formulář (recyklujeme stávající), zrušitelný, po zrušení volný proklik maketou + možnost vracet se přes banner šipky.
• Bank Website vs website.com → všude website.com.

Zbývající otevřené detaily

• Který konkrétní formulář na webu recyklovat (link / cesta v repu)?
• Má Piper v idle stavu i mimo Step 5 mít hint hlášku, nebo má panel zůstat úplně tichý (bez textu, jen visual)?
• V Step 5b — má Piper prompt v inputu psát se postupně (typing animation, jako v původním demo) nebo se má objevit najednou? (Default: typing animation, pokud neřekneš jinak.)
• Co se má stát, když uživatel po Outru vleze zpátky na Step 5 — má se Piper znovu otevřít a transform funkce reset? (Default: stav po Accept je „canonical“, krok 5 už drží naplněný editor + decentní hint „You already approved this transform.“)