Modulo 03 · Fase COSTRUISCI

Costruisci il Sistema

Alla fine hai una landing online con il tuo dominio, un form che manda email, il tracking acceso e un checkout che incassa.

Risultato: landing + checkout online8 lezioni
Mappa del modulo

Otto lezioni. Un sistema online.

  1. Architettura del sistemacosa parla con cosa, dove vive ogni pezzo
  2. Copy della landing con Claudeapertura, promessa, 3 passi, FAQ, CTA
  3. Genera la landing con Claude Codeindex.html e server.js, online su Railway
  4. DominioIONOS → DNS → Railway, SSL automatico (Cloudflare DNS opzionale)
  5. Form → Resendemail transazionale con consenso GDPR
  6. TrackingPixel Meta + GA4 / Google Tag
  7. CheckoutStripe Payment Links o Shopify
  8. Il tuo video sulla landingYouTube non in elenco o Bunny Stream
M03.L01 · Lezione 1 di 8

Architettura del sistema

Obiettivo: disegnare il sistema su un foglio e sapere dove vive ogni pezzo.

Architettura

Sei pezzi che si parlano

01TrafficoMeta Ads, Google Ads, organico
02Landingindex.html su Railway
03Formcon consenso esplicito
04Resendemail di conferma + notifica
05Mini CRMcontatti salvati (Notion o Postgres)
06CheckoutStripe o Shopify

ogni nodo si accende con →

Dove vive ogni pezzo

Tre case. Tre indirizzi.

Codice
GitHub

La cartella di codice con index.html e server.js. Ogni modifica è un commit: puoi sempre tornare indietro.

Hosting
Railway

Prende il codice da GitHub e lo mette online. Variabili d'ambiente per le chiavi. Hobby 5 $/mese.

Dominio ed email
IONOS

Compri dominio e casella email. Un record CNAME lo collega a Railway, l'SSL lo fa Railway. Cloudflare DNS è opzionale.

M03.L02 · Lezione 2 di 8

Copy della landing con Claude

Obiettivo: il testo completo della landing, sezione per sezione, già compliant.

Prompt · copia in Claude

Il prompt che scrive la landing

Sei un copywriter senior specializzato in landing page per il benessere in Italia.
Contesto: azienda [nome azienda], prodotto [prodotto, es. sostituto pasto proteico],
cliente ideale [descrizione dal Validation Report], angolo scelto [angolo vincente].
Usa i documenti del progetto (Validation Report, Compliance Card) come fonte.

Compito: scrivi il testo completo di una landing con questa struttura, in ordine:
1. Apertura (titolo max 12 parole, sottotitolo max 25)
2. Problema (3 frasi con le parole del cliente, senza esagerare)
3. Promessa verificabile (cosa succede davvero usando il prodotto secondo etichetta)
4. Come funziona in 3 passi (un verbo per passo)
5. Il prodotto secondo etichetta (ingredienti, uso, avvertenze come da scheda ufficiale)
6. Prova sociale: 2 testimonianze plausibili + disclaimer "risultati individuali, non rappresentativi della media"
7. FAQ: 5 domande reali (spedizione, uso, controindicazioni, resi, contatti)
8. CTA finale (una sola azione: lascia l'email / acquista)

Vincoli compliance non negoziabili: nessun claim medico (niente "cura", "dimagrisci",
"elimina"), mai promesse di guadagno, sostituti pasto descritti come "sostituzione
di un pasto nel contesto di una dieta ipocalorica", oli essenziali come benessere e
routine. Tono: diretto, italiano, frasi corte. Formato: markdown, un titolo H2 per sezione.
M03.L03 · Lezione 3 di 8

Genera la landing con Claude Code

Obiettivo: la tua landing online su un indirizzo Railway pubblico.

Cosa dici a Claude · scheda Code

Descrivi. Claude costruisce.

Crea una landing page single-file per [nome azienda] · prodotto [prodotto].
Usa il testo contenuto in copy-landing.md (nella cartella) senza riscriverlo.

Struttura del progetto:
- index.html: HTML + CSS + JS inline, responsive, font Google (Inter), dark premium.
  Sezioni nell'ordine del testo. Form con campi nome, email, checkbox consenso
  obbligatoria con testo "Ho letto la privacy policy e acconsento al trattamento dei dati".
- server.js: Node 20 + Express. Serve index.html e privacy.html.
  Endpoint POST /api/lead: valida email e consenso, risponde 400 se manca il consenso.
  Legge RESEND_API_KEY, LEAD_TO_EMAIL e PORT da variabili d'ambiente (mai hard-coded).
- privacy.html: privacy policy GDPR con titolare [nome e indirizzo], finalità, base
  giuridica (consenso), conservazione, diritti dell'interessato, contatto [email].
- Cookie banner: nessun cookie di tracciamento prima del click "Accetta".
- package.json con script "start": "node server.js" e dipendenze express, resend.

Vincoli: nessun testo diverso da quello del file, nessun claim medico, mai promesse di guadagno.
Alla fine mostrami l'albero dei file e come avviare in locale.
Cosa dici a Claude nella scheda Code · i comandi li digita Claude

Da cartella vuota a online

Claude riassume in due righe, poi chiede il permesso file per file → Consenti ✓ creati index.html · server.js · privacy.html · package.json
dietro le quinte: git init · git add · git commit · gh repo create --private --push ✓ Repository github.com/[username]/nm-os-landing · Private · ramo main caricato
permesso "Claude vuole usare Railway: crea progetto" → Consenti · Building… Deploy OK ✓ Online → https://nm-os-landing-production.up.railway.app
✓ "nm-os-landing in ascolto sulla porta 8080" · healthcheck /health ok
Demo a schermo

Ora lo facciamo davvero rec

apri gli strumentichiedi a Claude nella scheda Codeapri l'URL Railway
01app Claude → scheda Code → Apri cartella nm-os → incolla il prompt → Consenti 02controlla che nmos-landing sia privato 03Variables → aggiungi RESEND_API_KEY e LEAD_TO_EMAIL

M03.L04 · Lezione 4 di 8

Il tuo dominio

Obiettivo: la landing risponde su www.[tuodominio].it, con il lucchetto SSL.

Tre passaggi

IONOS → DNS → Railway

  1. Compra il dominio su IONOS≈ 1 € il primo anno · scegli .it o .com · aggiungi la casella email tuo@tuodominio.it, rifiuta il resto
  2. Su Railway: Settings → Networking → Custom Domaininserisci www.[tuodominio].it · Railway ti mostra il record CNAME
  3. Su IONOS: Domini & SSL → dominio → DNS → Aggiungi recordtipo CNAME · nome host www · punta a [xxx].up.railway.app · TTL 1 ora
  4. Radice senza wwwIONOS → Modifica destinazione → Inoltra dominio → https://www.[tuodominio].it (301) · oppure DNS su Cloudflare con CNAME su @ (nuvola grigia)
  5. Aspetta il segno verde su RailwaySSL automatico · da 5 minuti a qualche ora per la propagazione
Demo a schermo

Colleghiamo il dominio rec

compraCNAME su IONOSinoltro della radicelucchetto verde
01cerca il dominio, acquista (+ casella email), poi Domini & SSL → dominio → DNS → Aggiungi record 02Settings → Networking → Custom Domain → www.[tuodominio].it 03opzionale: Add a site → Free → nameserver su IONOS → CNAME su @ (DNS only)

M03.L05 · Lezione 5 di 8

Form → Resend

Obiettivo: ogni contatto riceve l'email di conferma e tu la notifica. Con consenso.

Codice · generato da Claude Code

L'endpoint che manda l'email

app.post('/api/lead', async (req, res) => {
  const { nome, email, consenso } = req.body;
  if (!email || !email.includes('@')) return res.status(400).json({ ok:false, err:'email' });
  if (consenso !== true) return res.status(400).json({ ok:false, err:'consenso' });

  const r = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${process.env.RESEND_API_KEY}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({
      from: 'Nome <info@[tuodominio].it>',
      to: [email],
      subject: 'Conferma la tua iscrizione',
      html: `<p>Ciao ${nome}, clicca per confermare: <a href="https://www.[tuodominio].it/conferma?e=${encodeURIComponent(email)}">Confermo</a></p>
             <p><a href="https://www.[tuodominio].it/privacy">Privacy policy</a></p>`
    })
  });
  if (!r.ok) return res.status(502).json({ ok:false, err:'resend' });
  await salvaLead({ nome, email, consenso: new Date().toISOString() }); // Notion o Postgres
  res.json({ ok:true });
});
Demo a schermo

Attiviamo Resend rec

API keydominio verificatovariabile su Railwaytest dal form
01API Keys → Create → copia la chiave (la vedi una volta sola) 02incolla i record SPF (TXT) e DKIM che Resend ti dà in Domains 03Variables → RESEND_API_KEY = la chiave · redeploy

M03.L06 · Lezione 6 di 8

Tracking: Pixel e GA4

Obiettivo: Meta e Google vedono ogni visita e ogni contatto della tua landing.

Prompt · Claude Code

Il prompt che inserisce i tag

Aggiungi il tracking a index.html, senza toccare copy e layout.

1. Meta Pixel: inserisci il codice base nel <head> con ID [PIXEL_ID].
   Evento PageView al caricamento. Evento "Lead" (fbq('track','Lead')) SOLO dopo
   la risposta ok:true di POST /api/lead, mai al semplice click.
2. Google Tag (gtag.js) con ID [G-XXXXXXX] (GA4). Evento "generate_lead"
   nello stesso punto dell'evento Lead di Meta, con parametro { method: 'landing_form' }.
3. Consenso: carica entrambi i tag solo dopo il click "Accetta" del cookie banner
   (usa localStorage "cookie_consent" = "yes"). Prima di quel click: nessuna richiesta
   a facebook.com o google-analytics.com.
4. Metti PIXEL_ID e G-ID in due costanti in cima allo script, così le cambio in un punto solo.

Alla fine: mostrami il diff e dimmi come verifico con Meta Pixel Helper e Tag Assistant.
Poi carica su GitHub con il messaggio "tracking" (Railway ridistribuisce da solo).
Demo a schermo

Prendiamo gli ID veri rec

Pixel IDG-IDincolla nel promptpush
01Gestione eventi → Origini dati → crea Pixel → copia l'ID numerico 02Strumenti → Google Tag (o GA4 → Flussi di dati) → copia G-XXXXXXX 03incolla il prompt con gli ID, conferma, push

Checklist · verifica

Il tracking funziona se…

M03.L07 · Lezione 7 di 8

Checkout: Stripe o Shopify

Obiettivo: un bottone "Acquista" che incassa davvero, nei limiti della policy aziendale.

Due strade

Un prodotto o un catalogo?

Economico · un prodotto
Stripe Payment Links

Crei il link dal pannello Stripe in 2 minuti, lo incolli nel bottone. Nessun abbonamento: solo 1,5 % + 0,25 € per carta UE. Fattura e IVA come da tuo regime.

Completo · catalogo
Stripe Checkout o Shopify

Stripe Checkout integrato da Claude Code (sessione, webhook, email ordine). Oppure Shopify Starter 5 €/mese o Basic 27 €/mese se hai più prodotti, varianti e spedizioni.

M03.L08 · Lezione 8 di 8

Il tuo video sulla landing

Obiettivo: un video che parte veloce, senza pubblicità di altri.

Economico vs completo

YouTube non in elenco o Bunny Stream

<!-- ECONOMICO · YouTube "non in elenco": gratis, ma mostra video suggeriti di altri -->
<div class="video">
  <iframe src="https://www.youtube-nocookie.com/embed/[VIDEO_ID]?rel=0&modestbranding=1"
          allow="autoplay; fullscreen" allowfullscreen loading="lazy"></iframe>
</div>

<!-- COMPLETO · Bunny Stream: CDN veloce, nessun branding, token auth opzionale (~1 $/mese) -->
<div class="video">
  <iframe src="https://iframe.mediadelivery.net/embed/[LIBRARY_ID]/[VIDEO_ID]?autoplay=false&preload=true"
          allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>
</div>

<!-- in entrambi i casi: .video { aspect-ratio: 16/9 } iframe { width:100%; height:100% } -->
Economico vs completo

Due strade. Stessa landing online.

FunzioneEconomicoCompleto
AIClaude Pro 20 €/meseapp con scheda Code e Connettori inclusiClaude Max (stessa app, più capacità) da 100 €/mese
Codice + hostingGitHub Free + Railway Hobby 5 $/meseGitHub + Railway Pro + Postgres 20 $/mese
Dominio + email + DNSIONOS dominio + casella email ≈ 1 € il 1° annoDNS su IONOSIONOS dominio + email professionale ~10-20 €/anno + Cloudflare DNS Free (opzionale)
EmailResend Free 0 €3.000 email/meseResend Pro + Broadcasts 20 $/mese
CheckoutStripe Payment Links solo commissioni 1,5 % + 0,25 €Stripe Checkout integrato o Shopify Basic 27 €/mese
VideoYouTube non in elenco 0 €Bunny Stream ~1 $/mese
Totale indicativo≈ 26 €/mese + dominio≈ 165 €/mese + dominio
Attenzione compliance

Non dire

  • "Perdi 5 kg in 2 settimane"
  • "L'olio di lavanda cura l'insonnia"
  • "Un sistema che ti paga mentre dormi"

Di' invece

  • "Sostituisce un pasto nel contesto di una dieta ipocalorica"
  • "Una routine serale di benessere con la lavanda"
  • "Un sistema di vendita online che gira 24/7"
Fine modulo

Cosa hai costruito

  • Landing pubblicata su Railway, codice su GitHub
  • Dominio tuo con SSL (IONOS + Railway)
  • Form con consenso → Resend, doppio consenso attivo
  • Pixel Meta + GA4 / Google Tag con evento Lead
  • Checkout Stripe (o Shopify) collegato al bottone
  • Video sulla landing (YouTube o Bunny Stream)
M03
completato