טקסט לדוגמא<!doctype html><html lang="he" dir="rtl"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>מומחה GA4 + GTM | אודיט מדידה, חיבור ל-CRM ודשבורדי Looker</title> <meta name="description" content="אודיט GA4 + GTM, חיבור GA4↔HubSpot/Salesforce ודשבורדי Looker שמודדים השפעה. קבעו שיחת התאמה קצרה."> <meta property="og:title" content="מומחה GA4 + GTM ל-B2B/סטארטאפים"> <meta property="og:description" content="מסדרים מדידה, מחברים ל-CRM ובונים דשבורדים שמראים אמת."> <meta property="og:type" content="website"> <meta property="og:image" content="https://www.growthwithmoran.com/wp-content/uploads/2024/01/og-placeholder.jpg"> <meta name="theme-color" content="#0b5cff"> <style> :root{ --bg:#0b1220; --card:#101a2b; --ink:#e9eefc; --muted:#a8b3d1; --brand:#0b5cff; --brand-2:#6ad2ff; --ok:#10b981; --danger:#ef4444; --shadow: 0 10px 30px rgba(0,0,0,.25); --radius:20px; } html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Heebo","Rubik","Segoe UI",Tahoma,Arial,sans-serif} *{box-sizing:border-box} a{color:var(--brand);text-decoration:none} .container{width:min(1100px, 92%);margin:auto} .btn{display:inline-flex;gap:.5rem;align-items:center;background:var(--brand); color:#fff;border:none;border-radius:999px;padding:.85rem 1.25rem;font-weight:700;box-shadow:var(--shadow);cursor:pointer} .btn.secondary{background:#182a4d;color:var(--ink)} .btn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px} header.hero{position:relative;overflow:hidden;padding:clamp(32px,5vw,56px) 0 36px;border-bottom:1px solid #1b2742} .glow{position:absolute;inset:-30vh -20vw auto auto;width:70vw;height:70vh;background:radial-gradient( circle at 60% 40%, rgba(106,210,255,.45), transparent 55% );filter:blur(32px);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} h1{font-size:clamp(28px,4.4vw,44px);line-height:1.18;margin:0 0 14px;font-weight:900} .sub{font-size:clamp(16px,2.1vw,20px);color:var(--muted);margin-bottom:22px} .chip{display:inline-flex;gap:.45rem;align-items:center;padding:.4rem .75rem;border-radius:999px;background:#0e1b33;border:1px solid #1b2742;color:#cfe0ff;font-weight:700} .tick{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--ok),#21d4a5);display:inline-grid;place-items:center;color:#001b14} .card{background:var(--card);border:1px solid #1b2742;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 8px} .bullets .card{padding:18px} .bullets h3{margin:.1rem 0 .25rem;font-size:18px} .bullets p{margin:0;color:var(--muted);font-size:14px} .trust{display:flex;gap:22px;flex-wrap:wrap;opacity:.9;align-items:center} .trust img{height:28px;filter:grayscale(100%) brightness(1.2);opacity:.8} .form-wrap{position:relative} form{display:grid;gap:12px} label{display:block;font-size:14px;margin-bottom:6px;color:#cfe0ff} input,select,textarea{width:100%;padding:.9rem .9rem;border-radius:12px;background:#0c1526;border:1px solid #202d4b;color:var(--ink)} input::placeholder,textarea::placeholder{color:#7f91bd} .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .tiny{font-size:12px;color:#8ea2d6} .sticky-cta{position:sticky;bottom:0;background:linear-gradient( to top, rgba(11,18,32,.92), rgba(11,18,32,.65) );border-top:1px solid #1b2742;backdrop-filter:saturate(1.2) blur(6px);padding:12px 0;margin-top:28px} .features{margin:38px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .features .card{min-height:120px} .faq details{background:#0e1b33;border:1px solid #1b2742;border-radius:12px;padding:14px;margin:10px 0} .faq summary{cursor:pointer;font-weight:700} footer{padding:40px 0 50px;color:#8ea2d6} .ok{color:var(--ok)} .danger{color:var(--danger)} @media (max-width:940px){.hero-grid{grid-template-columns:1fr}.row{grid-template-columns:1fr}.bullets,.features{grid-template-columns:1fr} .sticky-cta .container{display:grid;gap:8px;justify-items:center}} </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Service", "name": "אודיט GA4 + GTM וחיבור GA4 ל-CRM", "provider": {"@type":"Person","name":"Moran Vizel","url":"https://www.growthwithmoran.com"}, "areaServed": "IL", "serviceType": "Google Analytics 4, Google Tag Manager, Looker Studio, HubSpot/Salesforce", "offers": {"@type":"Offer","price":"0","priceCurrency":"ILS","description":"שיחת התאמה ואבחון קצר ללא עלות"} } </script> <!-- GTM placeholder – החלף ל-GTM שלך, או הסר אם נטען כבר דרך האתר --> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX'); </script></head><body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <header class="hero"> <div class="glow"></div> <div class="container hero-grid"> <section> <span class="chip"><span class="tick">✔</span> אודיט מהיר + תיקונים</span> <h1>מומחה <span class="ok">GA4</span> + <span class="ok">GTM</span> ל-B2B/סטארטאפים</h1> <p class="sub">מסדרים מדידה, מחברים <strong>GA4↔HubSpot/Salesforce</strong> ובונים דשבורדי <strong>Looker</strong> שמראים השפעה אמיתית.</p> <div class="bullets"> <div class="card"><h3>אודיט GA4 + GTM</h3><p>תיקון תיוגים שבורים, הגדרת אירועים ומטרות, וולידציה לאורך המשפך.</p></div> <div class="card"><h3>GA4 ↔ CRM</h3><p>חיבור ל-HubSpot/Salesforce לאטריביושן ו-ROI על שיווק ותוכן.</p></div> <div class="card"><h3>דשבורדי Looker</h3><p>משפכים, נשירות ו-KPIs שמדברים הנהלה – לא רק דאטה.</p></div> </div> <div style="display:flex;gap:10px;flex-wrap:wrap"> <a href="#form" class="btn">לקביעת שיחת התאמה</a> <a href="#faq" class="btn secondary">איך זה עובד?</a> </div> <div class="trust" style="margin-top:22px"> <span class="tiny">עבדתי עם:</span> <img alt="Google Analytics" src="https://www.gstatic.com/analytics-suite/header/suite/v2/ic_analytics.svg"> <img alt="Google Tag Manager" src="https://www.gstatic.com/analytics-suite/header/suite/v2/ic_tag_manager.svg"> <img alt="Looker Studio" src="https://www.gstatic.com/analytics-suite/header/suite/v2/ic_data_studio.svg"> <img alt="HubSpot" src="https://uploads-ssl.webflow.com/5f6f2b1ac2f9c1f8a913b3e7/6400f9f2f0b7b1f1a7e9a296_hubspot.svg"> <img alt="Salesforce" src="https://upload.wikimedia.org/wikipedia/commons/3/30/Salesforce_logo.svg"> </div> </section> <aside class="card form-wrap" id="form"> <h2 style="margin:0 0 6px">קבעו שיחת התאמה קצרה</h2> <p class="tiny" style="margin:0 0 12px">15–20 דקות. בלי מחויבות. ממפים בעיה → תוכנית פעולה.</p> <!-- אפשר להחליף את הטופס להטמעת HubSpot: ראה הערה בסוף --> <form id="leadForm" novalidate> <div class="row"> <div><label for="name">שם מלא</label><input id="name" name="name" placeholder="שם מלא" required></div> <div><label for="email">אימייל עבודה</label><input id="email" name="email" type="email" placeholder="name@company.com" required></div> </div> <div class="row"> <div><label for="phone">טלפון</label><input id="phone" name="phone" inputmode="tel" placeholder="05X-XXXXXXX" required></div> <div> <label for="topic">מה דחוף לכם?</label> <select id="topic" name="topic" required> <option value="" disabled selected>בחרו נושא</option> <option>אודיט GA4</option> <option>GTM ותיוגים</option> <option>חיבור GA4 ל-HubSpot</option> <option>חיבור GA4 ל-Salesforce</option> <option>דשבורדי Looker Studio</option> <option>אחר</option> </select> </div> </div> <div> <label for="msg">כמה מילים על המצב היום</label> <textarea id="msg" name="message" rows="4" placeholder="לדוגמה: המעבר ל-GA4 נעשה, אבל אירועי רכישה לא מגיעים ל-HubSpot..."></textarea> </div> <button class="btn" type="submit">שלחו ובואו נקבע</button> <p class="tiny">בהגשה אתם מאשרים שניצור קשר. לא נעשה שימוש במידע מעבר לשיחה בינינו.</p> <p id="formStatus" class="tiny" role="status" aria-live="polite"></p> </form> <!-- HubSpot embed (אם תרצה להחליף את הטופס המקומי): <div id="hubspot-form"></div> <script src="//js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "XXXXXX", formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" }); </script> --> </aside> </div> </header> <main class="container"> <section class="features"> <div class="card"><h3>מה מקבלים?</h3><ul> <li>אודיט GA4 + GTM עם רשימת תיקונים</li> <li>מיפוי אירועים ו-KPIs לכל משפך</li> <li>המלצות אטריביושן ל-CRM</li> </ul></div> <div class="card"><h3>תוצרי עבודה</h3><ul> <li>מסמך תיקופים + checklists</li> <li>Dashboards ב-Looker (תבניות)</li> <li>תרשים זרימת דאטה ו-naming</li> </ul></div> <div class="card"><h3>SLA</h3><ul> <li>אבחון ראשוני: עד 48 שעות</li> <li>עדכוני סטטוס שקופים</li> <li>אפשר פיילוט שבוע ללא התחייבות</li> </ul></div> </section> <section id="faq" class="faq"> <h2>שאלות נפוצות</h2> <details><summary>יש לי כבר GA4 מותקן. למה צריך אודיט?</summary> <p>ב-GA4 הרבה קורה דרך GTM/Measurement Protocol. אודיט מוודא שהאירועים מוגדרים, מבוצעת וולידציה ואין דליפות בין סביבות.</p> </details> <details><summary>אפשר רק חיבור ל-HubSpot/Salesforce?</summary> <p>כן. נבדוק את הסכמה, נמליץ על מודל אטריביושן, ונחבר GA4→CRM כדי שתראו הכנסות לצד מקור.</p> </details> <details><summary>מה העלות?</summary> <p>מתחילים בשיחת התאמה ואבחון קצר ללא עלות. לאחר מכן – הצעת מחיר שקופה לפי תכולה.</p> </details> </section> </main> <div class="sticky-cta"> <div class="container" style="display:flex;justify-content:space-between;align-items:center;gap:12px"> <span class="tiny">רוצים לראות איפה נופלים משתמשים במסע? →</span> <a class="btn" href="#form">שיחת התאמה קצרה</a> </div> </div> <footer class="container"> <div class="tiny">© <span id="y"></span> Growth with Moran. כל הזכויות שמורות.</div> </footer> <script> const $ = s => document.querySelector(s); $('#y').textContent = new Date().getFullYear(); const form = document.getElementById('leadForm'); const statusEl = document.getElementById('formStatus'); async function submitLead(data){ // החלף ל-endpoint אמיתי (Formspree / webhook ב-Make/Zapier / Cloud Function) await new Promise(r=>setTimeout(r, 600)); // סימולציה return { ok: true }; } form?.addEventListener('submit', async (e)=>{ e.preventDefault(); statusEl.textContent = 'שולחים...'; statusEl.style.color = '#cfe0ff'; const payload = { name: form.name.value.trim(), email: form.email.value.trim(), phone: form.phone.value.trim(), topic: form.topic.value, message: form.message.value.trim(), page: location.href, ts: new Date().toISOString() }; if(!payload.name || !payload.email || !payload.phone || !payload.topic){ statusEl.textContent = 'נא למלא את כל השדות החיוניים.'; statusEl.style.color = 'var(--danger)'; return; } window.dataLayer = window.dataLayer || []; window.dataLayer.push({event:'lead_form_submit', lead_payload: payload}); try{ const res = await submitLead(payload); if(res.ok){ statusEl.textContent = 'תודה! קיבלנו. נחזור אליכם בקרוב.'; statusEl.style.color = 'var(--ok)'; form.reset(); window.dataLayer.push({event:'lead_form_success'}); }else{ throw new Error('failed'); } }catch(err){ statusEl.textContent = 'משהו לא עבד. נסו שוב או צרו קשר ישירות.'; statusEl.style.color = 'var(--danger)'; window.dataLayer.push({event:'lead_form_error', error: String(err)}); } }); </script></body></html>
