GTM DataLayer Implementation: 16 Screens Tracked

<style> /* ─── Global typography matching velocitygrowth.ae ─── */ .vg-section p { font-family:'Nunito Sans',sans-serif;font-size:16px;line-height:1.7;color:#06054B;margin:0 0 16px; } .vg-section p:last-child { margin-bottom:0; } .vg-section p strong { color:#06054B; } /* Key Takeaway (white bg, same as body) */ .vg-key-takeaway-content p { font-family:'Nunito Sans',sans-serif;font-size:16px;line-height:1.7;color:#06054B !important;margin:0 0 16px; } .vg-key-takeaway-content p strong { color:#06054B !important; } .vg-key-takeaway-content p:last-child { margin-bottom:0; } /* Force colors on all injected content - Webflow overrides without !important */ #vg-casestudy-content p { color:#06054B !important; } #vg-casestudy-content li { color:inherit !important; } #vg-casestudy-content .vg-challenge-card p, #vg-casestudy-content .vg-challenge-card li { color:#c8cdd3 !important; } #vg-casestudy-content .vg-challenge-card p[style*="color:#fff"] { color:#fff !important; } #vg-casestudy-content .vg-impact-narrative p { color:#c8cdd3 !important; } /* Impact narrative (navy bg, light text) */ .vg-impact-narrative p { font-family:'Nunito Sans',sans-serif;font-size:16px;line-height:1.7;color:#c8cdd3;margin:0 0 16px; } .vg-impact-narrative p strong { color:#fff; } .vg-impact-narrative p:last-child { margin-bottom:0; } /* Metric card hover glow */ .vg-metric-card { transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; } /* Challenge tiles (navy bg) - white glow on hover */ .vg-challenge-card { transition: all 0.3s cubic-bezier(0.22,1,0.36,1); cursor: default; } .vg-challenge-card:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgba(148,49,255,0.35), 0 0 48px rgba(148,49,255,0.15), 0 8px 24px rgba(0,0,0,0.25); } /* Execution tiles (white bg) - purple glow on hover */ .vg-exec-card { transition: all 0.3s cubic-bezier(0.22,1,0.36,1); cursor: default; } .vg-exec-card:hover { transform: translateY(-4px); border-color: rgba(148,49,255,0.25) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.06), 0 16px 48px rgba(148,49,255,0.15), 0 0 0 1px rgba(148,49,255,0.1); } @media (max-width: 768px) { .vg-takeaway-grid { grid-template-columns: 1fr !important; } .vg-form-card { position: static !important; } } .vg-metric-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.35) !important; box-shadow: 0 0 20px rgba(255,255,255,0.08), 0 0 40px rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.2); background: rgba(255,255,255,0.1) !important; } </style> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">    <section class="vg-section" style="background:#06054B;padding:80px 0 60px;position:relative;overflow:hidden;">  <svg style="position:absolute;top:-40px;right:-60px;width:400px;height:400px;opacity:0.06;" viewBox="0 0 400 400" fill="none" aria-hidden="true"> <circle cx="200" cy="200" r="180" stroke="#9431ff" stroke-width="2"/> <circle cx="200" cy="200" r="130" stroke="#9431ff" stroke-width="1.5"/> <circle cx="200" cy="200" r="80" stroke="#9431ff" stroke-width="1"/> </svg> <svg style="position:absolute;bottom:-20px;left:-40px;width:300px;height:300px;opacity:0.05;" viewBox="0 0 300 300" fill="none" aria-hidden="true"> <rect x="30" y="30" width="240" height="240" rx="20" stroke="#9431ff" stroke-width="2" transform="rotate(15 150 150)"/> <rect x="60" y="60" width="180" height="180" rx="15" stroke="#9431ff" stroke-width="1.5" transform="rotate(15 150 150)"/> </svg> <div style="max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;">  <nav style="margin-bottom:24px;" aria-label="Breadcrumb"> <ol style="list-style:none;padding:0;margin:0;display:flex;gap:8px;align-items:center;font-family:'Nunito Sans',sans-serif;font-size:14px;color:#94a3b8;flex-wrap:wrap;"> <li><a href="https://www.velocitygrowth.ae" style="color:#94a3b8;text-decoration:none;">Home</a></li> <li style="color:#94a3b8;">›</li> <li><a href="https://www.velocitygrowth.ae/case-studies" style="color:#94a3b8;text-decoration:none;">Our Work</a></li> <li style="color:#94a3b8;">›</li> <li style="color:#9431ff;">A Multi-Screen Consumer Platform, UAE</li> </ol> </nav>  <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;"> <div style="flex:1;min-width:280px;">  <div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;"> <span style="display:inline-block;padding:6px 14px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;background:#9431ff;color:#fff;">Spotlight</span> <span style="display:inline-block;padding:6px 14px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:500;background:rgba(255,255,255,0.12);color:#c8cdd3;">UAE</span> </div>  <h1 style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:700;line-height:1.1;color:#fff;margin:0 0 16px;">A Multi-Screen Consumer Platform, UAE</h1>  <p style="font-family:'Nunito Sans',sans-serif;font-size:18px;line-height:1.6;color:#c8cdd3;margin:0 0 24px;max-width:700px;">Implemented GTM DataLayer tracking across 16 screens for a UAE consumer platform, creating the event foundation for analytics, remarketing, and conversion tracking.</p>  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;"> <span style="display:inline-block;padding:4px 12px;border-radius:6px;font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;background:rgba(148,49,255,0.15);color:#c084fc;">Growth Analytics</span> <span style="display:inline-block;padding:4px 12px;border-radius:6px;font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;background:rgba(148,49,255,0.15);color:#c084fc;">Growth Engineering</span> </div>  <div style="display:flex;gap:8px;flex-wrap:wrap;"> <span style="display:inline-block;padding:5px 14px;border-radius:6px;font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;background:rgba(255,255,255,0.9);color:#06054B;">Consumer Apps</span> <span style="display:inline-block;padding:5px 14px;border-radius:6px;font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;background:rgba(255,255,255,0.9);color:#06054B;">Consumer Platform</span> </div> </div>  <div style="display:flex;gap:10px;flex-shrink:0;margin-top:48px;"> <button onclick="navigator.clipboard.writeText(window.location.href).then(function(){var b=this;b.innerHTML='<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';setTimeout(function(){b.innerHTML='<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy Link'},2000)}.bind(this))" style="display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:100px;border:2px solid rgba(255,255,255,0.5);background:transparent;color:#fff;font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.borderColor='#fff'" onmouseout="this.style.background='transparent';this.style.borderColor='rgba(255,255,255,0.5)'"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy Link </button> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.velocitygrowth.ae%2Fcase-studies%2Fdatalayer-gtm-implementation-uae" target="_blank" rel="noopener noreferrer" style="display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:100px;border:none;background:#9431ff;color:#fff;font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:all 0.2s;" onmouseover="this.style.background='#7a28d6'" onmouseout="this.style.background='#9431ff'"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> Share on LinkedIn </a> </div> </div>  <div style="margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.08);"> <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;"> <div style="font-family:'Montserrat',sans-serif;font-size:56px;font-weight:600;line-height:1;background:linear-gradient(135deg,#9431ff 0%,#c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">16</div> <div> <div style="font-family:'Nunito Sans',sans-serif;font-size:18px;font-weight:600;color:#fff;line-height:1.3;">Screens Instrumented</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:14px;color:#94a3b8;line-height:1.3;">via GTM DataLayer implementation</div> </div> </div> </div> </div> </section>    <section class="vg-section" style="background:#fff;padding:80px 0;"> <div style="max-width:1000px;margin:0 auto;padding:0 24px;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">The Challenge</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:#06054B;margin:0 0 32px;letter-spacing:-0.48px;line-height:46px;">What We Were Solving</h2> <p style="font-family:Nunito Sans,sans-serif;font-size:18px;line-height:1.7;color:#06054B;margin:0 0 36px;">A UAE consumer platform had Google Tag Manager installed but the DataLayer was empty. No user actions were being captured, making analytics, remarketing, and conversion tracking impossible.</p><div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;"><div class="vg-challenge-card" style="background:#06054B;border-radius:12px;padding:28px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:#fff;margin:0 0 12px;">Empty DataLayer</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#c8cdd3;"><li>GTM installed but no events pushed</li><li>User actions invisible to analytics</li><li>Remarketing audiences could not be built</li></ul></div><div class="vg-challenge-card" style="background:#06054B;border-radius:12px;padding:28px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#c084fc" stroke-width="2"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:#fff;margin:0 0 12px;">16 Screens Untracked</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#c8cdd3;"><li>Key screens producing no behavioral data</li><li>Conversion paths unmeasured</li><li>No foundation for GA4 or any analytics tool</li></ul></div></div> </div> </section>    <section class="vg-section" style="background:#fff;padding:0 0 80px;"> <div style="max-width:1000px;margin:0 auto;padding:0 24px;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">The Approach</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:#06054B;margin:0 0 32px;letter-spacing:-0.48px;line-height:46px;">How We Thought About It</h2> <p style="font-family:Nunito Sans,sans-serif;font-size:18px;line-height:1.7;color:#06054B;margin:0 0 36px;">Design a DataLayer schema for all 16 screens, implement event pushes for every meaningful user action, and validate data flow into GA4 and marketing tools.</p><div style="position:relative;padding-left:48px;"><div style="position:absolute;left:19px;top:40px;bottom:40px;width:2px;background:linear-gradient(180deg,#9431ff,rgba(148,49,255,0.15));"></div><div style="position:relative;margin-bottom:36px;"><div style="position:absolute;left:-48px;top:0;width:40px;height:40px;border-radius:50%;background:#9431ff;display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:#fff;">1</div><p style="font-family:Montserrat,sans-serif;font-size:20px;font-weight:600;color:#06054B;margin:0 0 12px;letter-spacing:-0.4px;padding-top:8px;">DataLayer Schema Design</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#06054B;"><li>Audited all 16 screens for trackable user actions</li><li>Designed event naming conventions and property standards</li><li>Mapped which events feed analytics vs. remarketing vs. conversion tracking</li></ul></div><div style="position:relative;"><div style="position:absolute;left:-48px;top:0;width:40px;height:40px;border-radius:50%;background:#9431ff;display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:#fff;">2</div><p style="font-family:Montserrat,sans-serif;font-size:20px;font-weight:600;color:#06054B;margin:0 0 12px;letter-spacing:-0.4px;padding-top:8px;">Implementation and Validation</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#06054B;"><li>Implemented dataLayer.push() calls for every screen</li><li>Configured GTM tags to forward events to GA4 and ad platforms</li><li>Validated data accuracy via GTM Preview mode and real-time reports</li></ul></div></div> </div> </section>    <section class="vg-section" style="background:#f8f9fa;padding:80px 0;"> <div style="max-width:1000px;margin:0 auto;padding:0 24px;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">The Execution</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:#06054B;margin:0 0 32px;letter-spacing:-0.48px;line-height:46px;">What We Delivered</h2> <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;"><div class="vg-exec-card" style="background:#fff;border-radius:12px;padding:28px;border:1px solid #e2e8f0;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 12px;">DataLayer Design</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#06054B;"><li>16-screen event schema</li><li>Standardized naming conventions</li><li>Analytics + remarketing mapping</li></ul></div><div class="vg-exec-card" style="background:#fff;border-radius:12px;padding:28px;border:1px solid #e2e8f0;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 12px;">Implementation</p><ul style="margin:0;padding:0 0 0 18px;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.8;color:#06054B;"><li>dataLayer.push() across all screens</li><li>GTM tags configured for GA4 + ads</li><li>Validation via Preview mode</li></ul></div></div> </div> </section>    <section class="vg-section" style="background:#06054B;padding:80px 0;position:relative;overflow:hidden;"> <svg style="position:absolute;top:-40px;right:-60px;width:400px;height:400px;opacity:0.06;" viewBox="0 0 400 400" fill="none" aria-hidden="true"> <circle cx="200" cy="200" r="180" stroke="#9431ff" stroke-width="2"/> <circle cx="200" cy="200" r="130" stroke="#9431ff" stroke-width="1.5"/> </svg> <svg style="position:absolute;bottom:-30px;left:-50px;width:300px;height:300px;opacity:0.05;" viewBox="0 0 300 300" fill="none" aria-hidden="true"> <rect x="30" y="30" width="240" height="240" rx="20" stroke="#9431ff" stroke-width="2" transform="rotate(15 150 150)"/> </svg> <div style="max-width:1000px;margin:0 auto;padding:0 24px;position:relative;z-index:1;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#c084fc;margin:0 0 8px;letter-spacing:0.04em;">The Impact</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:#fff;margin:0 0 40px;letter-spacing:-0.48px;line-height:46px;">Results That Moved the Needle</h2>  <div class="vg-grid-4" style="display:grid;grid-template-columns:repeat(1,1fr);gap:16px;margin-bottom:48px;"> <div class="vg-metric-card" style="padding:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:110px;cursor:default;"> <div style="font-family:'Montserrat',sans-serif;font-size:28px;font-weight:600;color:#fff;"><span class="vg-anim-num" data-value="16" data-decimals="0">0</span><span></span></div> <div style="font-family:'Nunito Sans',sans-serif;font-size:13px;color:#94a3b8;margin-top:4px;">Screens Instrumented</div> </div> </div>    <div class="vg-impact-narrative"> <div style="background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:24px;margin-top:8px;"><div style="display:flex;align-items:center;gap:16px;"><div style="flex-shrink:0;"><div style="font-family:Montserrat,sans-serif;font-size:40px;font-weight:600;color:#fff;line-height:1;">16</div><div style="font-family:Nunito Sans,sans-serif;font-size:12px;color:#fff;margin-top:4px;font-weight:600;">screens tracked</div></div><div style="width:1px;height:52px;background:rgba(255,255,255,0.2);"></div><p style="font-family:Nunito Sans,sans-serif;font-size:15px;line-height:1.6;color:#c8cdd3;margin:0;">From zero behavioral data to complete coverage across all 16 screens. GA4 now shows full user journeys, remarketing audiences are built from actual behavior, and conversion tracking reflects real business outcomes. The DataLayer is the invisible foundation that makes everything else work.</p></div></div> </div>  </div> </section>    <section class="vg-section" style="background:#f8f9fa;padding:80px 0;"> <div style="max-width:1200px;margin:0 auto;padding:0 24px;"> <div class="vg-takeaway-grid" style="display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:stretch;">  <div style="display:flex;flex-direction:column;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">Key Takeaway</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#06054B;margin:0 0 28px;letter-spacing:-0.48px;line-height:38px;">What This Means for Your Business</h2> <div class="vg-key-takeaway-content"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;"><div style="background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.08);display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;color:#06054B;margin:0;">GTM Without DataLayer Is Empty</p></div><p style="font-size:14px;line-height:1.6;margin:0;">Having Google Tag Manager installed gives you the infrastructure. But without DataLayer events, GTM has nothing to work with. The DataLayer is what turns GTM from an empty container into a growth tool.</p></div><div style="background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;"><div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(148,49,255,0.08);display:flex;align-items:center;justify-content:center;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div><p style="font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;color:#06054B;margin:0;">Schema Before Implementation</p></div><p style="font-size:14px;line-height:1.6;margin:0;">Implementing events screen by screen without a schema produces inconsistent data. Designing the full naming convention and property standards first ensures every event is analytically useful.</p></div></div> </div>  <div style="margin-top:28px;padding:20px 24px;border-left:3px solid #9431ff;border-radius:0 8px 8px 0;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:15px;line-height:1.7;color:#06054B;margin:0;">Every growth transformation starts with a conversation. Tell us about your business and we'll work with you to help unlock growth.</p> </div>  <div style="display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:24px;"> <div style="flex:1;height:1px;background:linear-gradient(90deg,transparent,#9431ff);"></div> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> </div> </div>  <div class="vg-form-card" style="position:sticky;top:24px;">  <div style="background:#06054B;border-radius:16px 16px 0 0;padding:20px 28px;"> <div style="display:flex;gap:24px;align-items:center;justify-content:center;"> <div style="text-align:center;"> <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#fff;">33+</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:11px;color:#94a3b8;margin-top:2px;">Brands Grown</div> </div> <div style="width:1px;height:32px;background:rgba(255,255,255,0.15);"></div> <div style="text-align:center;"> <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#fff;">$1.4B</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:11px;color:#94a3b8;margin-top:2px;">Revenue Generated</div> </div> <div style="width:1px;height:32px;background:rgba(255,255,255,0.15);"></div> <div style="text-align:center;"> <div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#fff;">6</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:11px;color:#94a3b8;margin-top:2px;">Countries</div> </div> </div> </div>  <div style="background:#fff;border-radius:0 0 16px 16px;padding:28px 28px 32px;border:1px solid #e2e8f0;border-top:none;box-shadow:0 8px 32px rgba(6,5,75,0.08);"> <h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#06054B;margin:0 0 20px;">Get a custom growth audit</h3> <div id="vg-cta-form-container"> <form id="vg-lead-form" onsubmit="return handleFormSubmit(event)" style="display:flex;flex-direction:column;gap:14px;"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> <div> <label style="font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;color:#06054B;display:block;margin-bottom:5px;">Name *</label> <input type="text" name="name" required onfocus="pushFormFocus('name')" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Nunito Sans',sans-serif;font-size:14px;color:#06054B;box-sizing:border-box;transition:border-color 0.2s;" onfocusin="this.style.borderColor='#9431ff'" onfocusout="this.style.borderColor='#e2e8f0'" /> </div> <div> <label style="font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;color:#06054B;display:block;margin-bottom:5px;">Work Email *</label> <input type="email" name="email" required onfocus="pushFormFocus('email')" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Nunito Sans',sans-serif;font-size:14px;color:#06054B;box-sizing:border-box;transition:border-color 0.2s;" onfocusin="this.style.borderColor='#9431ff'" onfocusout="this.style.borderColor='#e2e8f0'" /> </div> </div> <div> <label style="font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;color:#06054B;display:block;margin-bottom:5px;">Company *</label> <input type="text" name="company" required onfocus="pushFormFocus('company')" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Nunito Sans',sans-serif;font-size:14px;color:#06054B;box-sizing:border-box;transition:border-color 0.2s;" onfocusin="this.style.borderColor='#9431ff'" onfocusout="this.style.borderColor='#e2e8f0'" /> </div> <div> <label style="font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;color:#06054B;display:block;margin-bottom:5px;">3 core problems you'd want us to take a look at</label> <textarea name="message" rows="3" onfocus="pushFormFocus('message')" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-family:'Nunito Sans',sans-serif;font-size:14px;color:#06054B;box-sizing:border-box;resize:vertical;transition:border-color 0.2s;" onfocusin="this.style.borderColor='#9431ff'" onfocusout="this.style.borderColor='#e2e8f0'"></textarea> </div> <button type="submit" style="width:100%;padding:14px 32px;background:#9431ff;color:#fff;font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;border:none;border-radius:100px;cursor:pointer;transition:all 0.2s;margin-top:4px;box-shadow:0 4px 16px rgba(148,49,255,0.3);" onmouseover="this.style.background='#7a28d6';this.style.boxShadow='0 6px 24px rgba(148,49,255,0.4)'" onmouseout="this.style.background='#9431ff';this.style.boxShadow='0 4px 16px rgba(148,49,255,0.3)'">Book Your Free Discovery Call</button> </form> </div>  <div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;"> <div style="display:flex;align-items:center;gap:5px;"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> <span style="font-family:'Nunito Sans',sans-serif;font-size:12px;color:#64748b;">No commitment</span> </div> <div style="display:flex;align-items:center;gap:5px;"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> <span style="font-family:'Nunito Sans',sans-serif;font-size:12px;color:#64748b;">Response within 24hrs</span> </div> </div>  <div id="vg-thank-you" style="display:none;text-align:center;padding:24px 0;"> <svg width="40" height="40" viewBox="0 0 48 48" fill="none" style="margin-bottom:12px;"> <circle cx="24" cy="24" r="24" fill="#f0fdf4"/> <path d="M14 24l7 7 13-13" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h3 style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 6px;">We've received your details</h3> <p style="font-family:'Nunito Sans',sans-serif;font-size:14px;color:#64748b;margin:0;">We'll reach out within 24 hours.</p> </div> </div> </div> </div> </div> </section>    <section class="vg-section" style="background:#fff;padding:80px 0;"> <div style="max-width:800px;margin:0 auto;padding:0 24px;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">FAQ</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#06054B;margin:0 0 32px;letter-spacing:-0.48px;line-height:38px;">Common Questions</h2> <details style="border:1px solid #e2e8f0;border-radius:12px;padding:0;margin-bottom:12px;background:#fff;"> <summary style="padding:20px 24px;font-family:'Montserrat',sans-serif;font-size:16px;font-weight:600;color:#06054B;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;"> What is the GTM DataLayer? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-left:16px;transition:transform 0.2s;"><polyline points="6 9 12 15 18 9"/></svg> </summary> <div style="padding:0 24px 20px;font-family:'Nunito Sans',sans-serif;font-size:15px;line-height:1.7;color:#06054B;">A JavaScript object (window.dataLayer) that acts as the communication bridge between your website/app and Google Tag Manager. When user actions push events to the DataLayer, GTM forwards them to analytics, ad platforms, and marketing tools.</div> </details> <details style="border:1px solid #e2e8f0;border-radius:12px;padding:0;margin-bottom:12px;background:#fff;"> <summary style="padding:20px 24px;font-family:'Montserrat',sans-serif;font-size:16px;font-weight:600;color:#06054B;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;"> Why 16 screens specifically? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9431ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-left:16px;transition:transform 0.2s;"><polyline points="6 9 12 15 18 9"/></svg> </summary> <div style="padding:0 24px 20px;font-family:'Nunito Sans',sans-serif;font-size:15px;line-height:1.7;color:#06054B;">These were the screens where meaningful user actions happen: landing pages, product views, search, cart, checkout, account, and engagement screens. Each screen had multiple events (page views, clicks, form submissions, purchases) that needed to be captured.</div> </details> </div> </section>    <section class="vg-section" style="background:#f8f9fa;padding:80px 0;"> <div style="max-width:1200px;margin:0 auto;padding:0 24px;"> <p style="font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;margin:0 0 8px;letter-spacing:0.04em;">More Work</p> <h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#06054B;margin:0 0 32px;letter-spacing:-0.48px;line-height:38px;">Related Case Studies</h2> <div class="vg-grid-3" style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;"> <a href="https://www.velocitygrowth.ae/case-studies/events-taxonomy-superapp-uae" style="text-decoration:none;"> <div class="vg-card" style="background:#fff;border-radius:16px;padding:28px;border:1px solid #e5e7eb;"> <div style="display:flex;gap:8px;margin-bottom:12px;"> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:600;background:#f3e8ff;color:#7c3aed;">Spotlight</span> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:500;background:#f1f5f9;color:#64748b;">UAE</span> </div> <h3 style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 8px;line-height:1.3;">A Leading SuperApp, UAE</h3> <div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;color:#9431ff;margin:12px 0 4px;">43</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:13px;color:#64748b;">Key Events Defined</div> <p style="font-family:'Nunito Sans',sans-serif;font-size:14px;color:#64748b;margin:12px 0 0;line-height:1.5;">Events taxonomy across 8 business lines for a SuperApp.</p> </div> </a> <a href="https://www.velocitygrowth.ae/case-studies/offline-conversion-tracking-events-uae" style="text-decoration:none;"> <div class="vg-card" style="background:#fff;border-radius:16px;padding:28px;border:1px solid #e5e7eb;"> <div style="display:flex;gap:8px;margin-bottom:12px;"> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:600;background:#f3e8ff;color:#7c3aed;">Spotlight</span> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:500;background:#f1f5f9;color:#64748b;">UAE</span> </div> <h3 style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 8px;line-height:1.3;">A Major Events Platform, UAE</h3> <div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;color:#9431ff;margin:12px 0 4px;">113%</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:13px;color:#64748b;">ROAS Improvement</div> <p style="font-family:'Nunito Sans',sans-serif;font-size:14px;color:#64748b;margin:12px 0 0;line-height:1.5;">Offline conversion tracking revealing 113% higher true ROAS.</p> </div> </a> <a href="https://www.velocitygrowth.ae/case-studies/crm-teardown-fashion-ecommerce-kuwait" style="text-decoration:none;"> <div class="vg-card" style="background:#fff;border-radius:16px;padding:28px;border:1px solid #e5e7eb;"> <div style="display:flex;gap:8px;margin-bottom:12px;"> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:600;background:#f3e8ff;color:#7c3aed;">Spotlight</span> <span style="padding:4px 10px;border-radius:100px;font-family:'Nunito Sans',sans-serif;font-size:11px;font-weight:500;background:#f1f5f9;color:#64748b;">Kuwait</span> </div> <h3 style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#06054B;margin:0 0 8px;line-height:1.3;">A Fast-Growing Fashion E-Commerce, Kuwait</h3> <div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;color:#9431ff;margin:12px 0 4px;">21</div> <div style="font-family:'Nunito Sans',sans-serif;font-size:13px;color:#64748b;">Critical CRM Issues</div> <p style="font-family:'Nunito Sans',sans-serif;font-size:14px;color:#64748b;margin:12px 0 0;line-height:1.5;">CRM teardown + 150-event taxonomy for a Kuwaiti fashion platform.</p> </div> </a> </div> <div style="text-align:center;margin-top:40px;"> <a href="https://www.velocitygrowth.ae/case-studies" style="display:inline-flex;align-items:center;gap:8px;font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:#9431ff;text-decoration:none;padding:12px 28px;border:2px solid #9431ff;border-radius:100px;transition:all 0.2s;" onmouseover="this.style.background='#9431ff';this.style.color='#fff'" onmouseout="this.style.background='transparent';this.style.color='#9431ff'">View All Case Studies <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a> </div> </div> </section>