3. Technická řešení
Konkrétní kód, konfigurace a postupy.
3.1 GA4 + GTM pro Next.js App Router
Next.js 15 App Router + next/script. Vytvoříte app/layout.tsx a vložíte následující:
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
{/* Google Tag Manager */}
<Script id="gtm" strategy="afterInteractive">
{`(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>
{/* GTM noscript fallback */}
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style={{display:'none',visibility:'hidden'}}/>
</noscript>
{children}
</body>
</html>
);
}
Uvnitř GTM pak nakonfigurujeme GA4 tag, conversion events (booking_started, booking_completed, whatsapp_click, language_switched) a enhanced ecommerce.
3.2 Hotjar setup
// components/Hotjar.tsx
'use client';
import Script from 'next/script';
export default function Hotjar() {
return (
<Script id="hotjar" strategy="afterInteractive">
{`(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:HOTJAR_ID,hjsv:6};a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}
</Script>
);
}
Heatmapy na všech apartmán-stránkách + funnel recording (home → apartment → booking).
3.3 Booking engine — srovnání
| Řešení | Cena/měs | Pro | Proti | Doporučení |
|---|
| Beds24 | €15–25 | Extrémně flexibilní, 100+ channels, API, custom skripty, silný channel manager | Strmá učící křivka, UI jako z roku 2010 | ★ Doporučujeme pro 4 apartmány |
| Lodgify | €35–95 | Krásné UI, WordPress/Next.js widgety, direct booking engine, vlastní web builder | Dražší, méně flexibilní channels | Alternativa pokud chcete vše z jednoho místa |
| Smoobu | €24–70 | Německá kvalita, skvělé pro DACH trh, lokalizace, Booking.com direct | Menší ekosystém integrací | Pokud cílíte primárně na DE/AT/CH |
| SiteMinder | €100+ | Enterprise grade, 450+ channels, perfektní pro hotely | Drahé, overkill pro 4 apartmány | Overkill |
3.4 URL slugy — refactor
| Současný (BAD) | Nový (GOOD) |
|---|
/apartments/j | /apartments/sea-view-premium-3-bedroom |
/apartments/k | /apartments/family-suite-2-bedroom-pool-view |
/apartments/test-apartman-6 | /apartments/deluxe-studio-beachfront |
/apartments/l | /apartments/penthouse-panoramic-terrace |
Implementace přes next.config.js redirecty (301) pro staré URL → nové, aby nedošlo k SEO ztrátě:
// next.config.js
module.exports = {
async redirects() {
return [
{ source: '/apartments/j', destination: '/apartments/sea-view-premium-3-bedroom', permanent: true },
{ source: '/apartments/k', destination: '/apartments/family-suite-2-bedroom-pool-view', permanent: true },
{ source: '/apartments/test-apartman-6', destination: '/apartments/deluxe-studio-beachfront', permanent: true },
{ source: '/apartments/l', destination: '/apartments/penthouse-panoramic-terrace', permanent: true },
];
},
};
3.5 Schema.org markup (JSON-LD)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LodgingBusiness",
"@id": "https://marisolay.com/#business",
"name": "Marisolay Luxury Apartments",
"description": "4 luxusní apartmány v Sveti Vlas, Bulharsko. Výhled na moře, bazén, Matterport 3D prohlídky.",
"url": "https://marisolay.com",
"telephone": "+359-XXX-XXX-XXX",
"priceRange": "€115–€175",
"image": "https://marisolay.com/og-image.jpg",
"address": {
"@type": "PostalAddress",
"streetAddress": "Sveti Vlas",
"addressLocality": "Sveti Vlas",
"addressRegion": "Burgas",
"postalCode": "8256",
"addressCountry": "BG"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 42.7140,
"longitude": 27.7571
},
"amenityFeature": [
{ "@type": "LocationFeatureSpecification", "name": "Free WiFi", "value": true },
{ "@type": "LocationFeatureSpecification", "name": "Swimming Pool", "value": true },
{ "@type": "LocationFeatureSpecification", "name": "Sea View", "value": true },
{ "@type": "LocationFeatureSpecification", "name": "Air Conditioning", "value": true }
],
"containsPlace": [
{
"@type": "Accommodation",
"name": "Sea View Premium 3-Bedroom",
"occupancy": { "@type": "QuantitativeValue", "maxValue": 6 },
"floorSize": { "@type": "QuantitativeValue", "value": 95, "unitCode": "MTK" }
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "47"
}
}
</script>
3.6 Sitemap rozšíření: 13 → 40+ URL
- Apartments (4): jeden per apartmán s novým slugem
- Location pages (6):
/sveti-vlas, /sunny-beach-area, /nessebar, /burgas-airport-transfer, /beaches-nearby, /restaurants-guide
- Blog (12+): Content kalendář viz sekce 7
- FAQ (1 hub + 8 kategorií): check-in, cancellation, children, pets, parking, wifi, extras, payments
- Legal (3): terms, privacy, cookies
- 12 jazykových variant × každá URL = zásadní boost indexovatelnosti
3.7 Core Web Vitals audit plán
- Lighthouse CI v GitHub Actions — každý deploy
- Image optimization: všechny fotky přes
next/image, AVIF + WebP, priority na hero
- LCP cíl: < 2,5 s (teď pravděpodobně 3,5+ kvůli Matterport iframes)
- Font loading:
next/font s display: swap + preload latin subset
- Matterport / YouTube: lazy-load s facade (klik → iframe)
- INP cíl: < 200 ms — redukce third-party JS