Le site public
Ce que fait le site de l'agence : la page d'accueil, les annonces et leurs filtres, la page de bien avec sa pièce mise en scène, les biens enregistrés et la comparaison, les demandes de visite, le formulaire de contact, les moteurs de recherche et les balises marketing.
Pour le pack Full Stack
Pages
Chaque page existe en anglais sous /en et en arabe sous /ar. Le site n'a ni compte ni connexion.
| Page | Chemin | Ce qu'elle affiche |
|---|---|---|
| Accueil | /en | Une recherche rattachée à la photo du hero (acheter ou louer, zone, type, budget), les biens à la une choisis par l'agence dans son tableau de bord, les types de bien avec leur nombre, un avant-après d'une pièce mise en scène par IA, achat et location côte à côte, les quartiers, la présentation de l'agence, les locations les plus récentes, les questions fréquentes et un bandeau de contact. |
| Biens à vendre, à louer | /en/properties?purpose=sale, /en/properties?purpose=rent | Les annonces, avec filtres, tri et pages. |
| Un bien | /en/properties/the-terrace-residence | Les photos, le prix et les faits clés, la description et les équipements, la pièce mise en scène, le quartier, des biens similaires et une demande de visite. |
| Biens enregistrés | /en/saved | Les biens que le visiteur a enregistrés, conservés dans son navigateur. |
| Comparer | /en/compare | Jusqu'à trois biens enregistrés côte à côte. |
| Notre agence | /en/agency | L'histoire de l'agence, son slogan et sa description issus du tableau de bord. |
| Contact | /en/contact | Les coordonnées de l'agence et le formulaire de contact. |
| Politique de confidentialité | /en/privacy | Texte de template à réécrire avant la mise en ligne. |
Les annonces
- Des filtres par zone (quartier), prix, chambres, type de bien (
apartment,villa,townhouse) et équipements, conservés dans l'adresse : une recherche peut donc être partagée, actualisée et parcourue avec précédent et suivant. - Un tri par plus récent, par prix croissant ou par prix décroissant, et des pages de six biens.
- Seuls les biens publiés apparaissent. Les locations affichent leur prix annuel ; chaque prix est le code de la devise suivi du montant, comme
AED 4,850,000.
La page de bien
- Une grille de photos avec une visionneuse utilisable au clavier, le prix et les faits clés (chambres, salles de bain, surface en mètres carrés, parking, ameublement, espace extérieur), la description et les équipements.
- Mise en scène virtuelle : quand l'agence a approuvé un aperçu mis en scène pour l'affichage public, un curseur déplaçable compare la pièce vide à la pièce meublée, avec la mention meublée par IA. Un seul aperçu public par bien.
- Le quartier : une photo de la zone et une courte description. Le site n'affiche pas de carte ; l'emplacement est indiqué comme approximatif, sauf si l'agence l'a défini comme exact.
- Jusqu'à trois biens similaires, et un bouton pour poser une question sur le bien depuis la page de contact (
/contact?property=<slug>).
Demandes de visite
Le visiteur indique un nom, un e-mail, un téléphone optionnel, une date souhaitée et une heure, et un message optionnel. Les heures sont proposées toutes les demi-heures de 09:00 à 18:00 dans le fuseau horaire de l'agence (Asia/Dubai), au moins une heure à l'avance. La demande est présentée comme en attente de confirmation, avec sa référence, jamais comme un rendez-vous réservé, et elle arrive dans les Visites du tableau de bord avec une notification.
Le formulaire de contact
Acheter ou louer, une zone souhaitée, un budget et un message, avec le nom, l'e-mail et le téléphone optionnel du visiteur, et le consentement à la politique de confidentialité. Ouvert depuis un bien, il porte ce bien. Chaque envoi devient une demande dans le tableau de bord, avec une notification.
Les deux formulaires contiennent un champ caché qui piège les robots, n'envoient la même demande qu'une seule fois et acceptent cinq envois par adresse en dix minutes.
Biens enregistrés et comparaison
Un visiteur enregistre des biens et en compare jusqu'à trois côte à côte sans compte ; un quatrième est refusé avec une annonce. Les deux listes sont conservées dans le navigateur du visiteur et n'atteignent jamais l'API.
Moteurs de recherche
- Chaque page définit son propre titre, sa description, son adresse canonique et la langue alternative, construits à partir de
NEXT_PUBLIC_SITE_URL. Une page de bien utilise le titre et la description SEO propres au bien et sa photo de couverture pour le partage. /sitemap.xmlliste chaque page publique dans les deux langues et chaque bien publié ;/robots.txty renvoie. Les biens enregistrés et la comparaison sont marquésnoindex.
Balises d'analyse et de suivi
Six réseaux sont branchés. Activez-en un en mettant son identifiant dans .env (avec Docker Compose, dans le .env à côté de docker-compose.yml) puis reconstruisez ; un identifiant laissé vide ne charge aucun script.
| Variable | Réseau |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook et Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
| Événement | Quand |
|---|---|
page_view | Chaque changement de route |
view_property | Une page de bien est affichée |
save_property | Un bien est enregistré |
viewing_request | Une demande de visite est reçue |
contact_submit | Le formulaire de contact est reçu |
- Si GA4 tourne dans votre conteneur Tag Manager, laissez l'identifiant GA4 vide, sinon chaque session est comptée deux fois.
NEXT_PUBLIC_ANALYTICS_CURRENCY(AEDpar défaut) est envoyée avec chaque prix suivi, etNEXT_PUBLIC_ANALYTICS_DEBUG=trueenregistre chaque événement dans la console du navigateur.- Les balises se chargent dès que la page se charge. Si vous servez des visiteurs dans l'UE ou au Royaume-Uni, placez d'abord devant eux une bannière de consentement.
Comment s'organise le code du site
Inclus avec votre achat. Connectez-vous pour le lire, ou ouvrez-le dans votre téléchargement.
La structure du code et les conventions à respecter quand vous le modifiez.