feat(nextjs): add analytics & seo

og tag & images

Author: macojaune

apps/nextjs/public/omasla-og-image.png

@@ -1,45 +1,52 @@
-import type { Metadata, Viewport } from "next";
-import { cn } from "@oyo/ui";
-import { ThemeProvider, ThemeToggle } from "@oyo/ui/theme";
-import { Toaster } from "@oyo/ui/toast";
-import { GeistMono } from "geist/font/mono";
-import { GeistSans } from "geist/font/sans";
+import type { Metadata, Viewport } from "next"
+import Script from "next/script"
+import { GeistMono } from "geist/font/mono"
+import { GeistSans } from "geist/font/sans"
 
-import { TRPCReactProvider } from "~/trpc/react";
-import { ConvexClientProvider } from "./convex-client-provider";
-import "~/app/globals.css";
+import { cn } from "@oyo/ui"
+import { ThemeProvider, ThemeToggle } from "@oyo/ui/theme"
+import { Toaster } from "@oyo/ui/toast"
 
-import { env } from "~/env";
+import { TRPCReactProvider } from "~/trpc/react"
+import { ConvexClientProvider } from "./convex-client-provider"
 
-const title = "O Mas la? - Trouve tes groupes a po préférés sans effort";
+import "~/app/globals.css"
+
+import { env } from "~/env"
+
+const title = "O Mas la? - Trouve tes groupes a po préférés sans effort"
 const description =
   "La solution pour suivre tes groupes de caranaval préférés, fini les dimanches soirs à courir" +
-  " inutilement dans Pointe-à-pitre";
+  " inutilement dans Pointe-à-pitre"
+const metadataBase = new URL(
+  env.VERCEL_ENV === "production"
+    ? "https://omasla.fr"
+    : "http://localhost:3000",
+)
+
 export const metadata: Metadata = {
-  metadataBase: new URL(
-    env.VERCEL_ENV === "production"
-      ? "https://turbo.t3.gg"
-      : "http://localhost:3000",
-  ),
+  metadataBase,
   title,
   description,
   openGraph: {
     title,
     description,
     siteName: "O Mas La ?",
+    images: [{ url: `${metadataBase}/omasla-og-image.png` }],
   },
   twitter: {
     card: "summary_large_image",
     creator: "@macojaune",
+    images: [`${metadataBase}/omasla-og-image.png`],
   },
-};
+}
 
 export const viewport: Viewport = {
   themeColor: [
     { media: "(prefers-color-scheme: light)", color: "white" },
     { media: "(prefers-color-scheme: dark)", color: "black" },
   ],
-};
+}
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
@@ -51,6 +58,11 @@ export default function RootLayout(props: { children: React.ReactNode }) {
           GeistMono.variable,
         )}
       >
+        <Script
+          src="https://analytics.marvinl.com/script.js"
+          data-website-id="638989fa-9ab3-4a30-b342-0c9d4103f87f"
+          defer
+        />
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <ConvexClientProvider>
             <TRPCReactProvider>{props.children}</TRPCReactProvider>
@@ -59,5 +71,5 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         </ThemeProvider>
       </body>
     </html>
-  );
+  )
 }

apps/nextjs/src/app/layout.tsx

@@ -75,8 +75,8 @@ export default function HomePage() {
 
       {/* How it Works Section */}
       <section className="py-20">
-        <div className="container mx-auto px-4">
-          <h2 className="mb-16 text-center text-4xl font-bold">
+        <div className="container mx-auto flex flex-col items-center gap-16 px-4">
+          <h2 className="text-center text-4xl font-bold">
             Comment ça marche ?
           </h2>
           <div className="grid gap-8 md:grid-cols-3">
@@ -110,6 +110,12 @@ export default function HomePage() {
               </Card>
             ))}
           </div>
+          <Link href="/map">
+            <Button size="lg" variant="outline" className="text-white">
+              <MapPin className="mr-2 h-6 w-6" />
+              Accède à la carte
+            </Button>
+          </Link>
         </div>
       </section>
 

apps/nextjs/src/app/page.tsx

@@ -0,0 +1,86 @@
+# Politique de confidentialité de O Mas La?
+
+La présente Politique de confidentialité décrit la façon dont vos informations personnelles sont recueillies, utilisées et partagées lorsque vous vous rendesur omasla.fr (le « Site ») 
+
+## INFORMATIONS PERSONNELLES RECUEILLIES
+Lorsque vous vous rendez sur le Site, nous recueillons automatiquement certaines informations concernant votre appareil, notamment des informations sur votre navigateur web, votre adresse IP, votre fuseau horaire et certains des cookies qui sont installés sur votre appareil. En outre, lorsque vous
+parcourez le Site, nous recueillons des informations sur les pages web que vous consultez, les sites web ou les termes de recherche qui vous ont permis d'arriver sur le Site, ainsi que des informations sur la manière dont vous interagissez avec le Site. Nous désignons ces informations
+collectées automatiquement sous l'appellation « Informations sur l'appareil ».
+Nous recueillons les Informations sur l'appareil à l'aide des technologies suivantes :
+FICHIERS TÉMOINS (COOKIES)
+Voici une liste de fichiers témoins que nous utilisons. Nous les avons énumérés ici pour que vous ayez la possibilité de choisir si vous souhaitez les
+autoriser ou non.
+_session_id, identificateur unique de session, permet à Shopify de stocker les informations relatives à votre session (référent, page de renvoi, etc.).
+_shopify_visit, aucune donnée retenue, persiste pendant 30 minutes depuis la dernière visite. Utilisé par le système interne de suivi des statistiques du
+fournisseur de notre site web pour enregistrer le nombre de visites.
+_shopify_uniq, aucune donnée retenue, expire à minuit (selon l’emplacement du visiteur) le jour suivant. Calcule le nombre de visites d’une boutique par
+client unique.
+cart, identificateur unique, persiste pendant 2 semaines, stocke l’information relative à votre panier d’achat.
+_secure_session_id, identificateur unique de session
+storefront_digest, identificateur unique, indéfini si la boutique possède un mot de passe, il est utilisé pour savoir si le visiteur actuel a accès.
+- Les « fichiers journaux » suivent l'activité du Site et recueillent des données telles que votre adresse IP, le type de navigateur que vous utilisez, votre
+fournisseur d'accès Internet, vos pages référentes et de sortie, et vos données d'horodatage (date et heure).
+- Les « pixels invisibles », les « balises » et les « pixels » sont des fichiers électroniques qui enregistrent des informations sur la façon dont vous parcourele Site.
+[[INSÉRER LES DESCRIPTIONS DES AUTRES TYPES DE TECHNOLOGIES DE SUIVI QUE VOUS UTILISEZ]]
+Par ailleurs, lorsque vous effectuez ou tentez d'effectuer un achat par le biais du Site, nous recueillons certaines informations vous concernant,
+notamment votre nom, votre adresse de facturation, votre adresse d'expédition, vos informations de paiement (y compris vos numéros de cartes de créd[[INSÉRER LES AUTRES MOYENS DE PAIEMENT ACCEPTÉS, LE CAS ÉCHÉANT]], votre adresse e-mail et votre numéro de téléphone. Ces informations
+collectées automatiquement sont désignées par l’appellation « Informations sur la commande ».
+[[INSÉRER TOUTES LES AUTRES INFORMATIONS QUE VOUS RECUEILLEZ, LE CAS ÉCHÉANT : DONNÉES HORS LIGNE, DONNÉES/LISTES ACHETÉES À DES FINDE MARKETING]]
+Lorsque nous utilisons l'expression « Informations personnelles » dans la présente Politique de confidentialité, nous faisons allusion à la fois aux
+Informations sur l'appareil et aux Informations sur la commande.
+COMMENT UTILISONS-NOUS VOS INFORMATIONS PERSONNELLES ?
+En règle générale, nous utilisons les Informations sur la commande que nous recueillons pour traiter toute commande passée par le biais du Site (y
+compris pour traiter vos informations de paiement, organiser l'expédition de votre commande et vous fournir des factures et/ou des confirmations de
+compris pour traiter vos informations de paiement, organiser lexpédition de votre commande et vous fournir des factures et/ou des confirmations de
+commande). En outre, nous utilisons ces Informations sur la commande pour :
+communiquer avec vous ;
+évaluer les fraudes ou risques potentiels ; et
+lorsque cela correspond aux préférences que vous nous avez communiquées, vous fournir des informations ou des publicités concernant nos produits ouservices.
+[[INSÉRER LES AUTRES UTILISATIONS QUI SONT FAITES DES INFORMATIONS SUR LA COMMANDE]]
+Nous utilisons les Informations sur l'appareil (en particulier votre adresse IP) que nous recueillons pour évaluer les fraudes ou risques potentiels et, de
+manière plus générale, pour améliorer et optimiser notre Site (par exemple, en générant des analyses sur la façon dont nos clients parcourent et
+interagissent avec le Site, et pour évaluer la réussite de nos campagnes de publicité et de marketing).
+[[INSÉRER LES AUTRES UTILISATIONS QUI SONT FAITES DES INFORMATIONS SUR L'APPAREIL, NOTAMMENT EN MATIÈRE DE PUBLICITÉ ET DE RECIBLAGE]PARTAGE DE VOS INFORMATIONS PERSONNELLES
+Nous partageons vos Informations personnelles avec des tiers qui nous aident à les utiliser aux fins décrites précédemment. Par exemple, nous utilisonsShopify pour héberger notre boutique en ligne – pour en savoir plus sur l'utilisation de vos Informations personnelles par Shopify, veuillez consulter la
+page suivante : https://www.shopify.fr/legal/confidentialite. Nous utilisons également Google Analytics pour mieux comprendre comment nos clients
+utilisent le Site – pour en savoir plus sur l'utilisation de vos Informations personnelles par Google, veuillez consulter la page suivante :
+https://www.google.com/intl/fr/policies/privacy/. Vous pouvez aussi désactiver Google Analytics ici : https://tools.google.com/dlpage/gaoptout.
+Enfin, il se peut que nous partagions aussi vos Informations personnelles pour respecter les lois et règlementations applicables, répondre à une
+assignation, à un mandat de perquisition ou à toute autre demande légale de renseignements que nous recevons, ou pour protéger nos droits.
+[[INCLURE LE PARAGRAPHE SUIVANT SI VOUS UTILISEZ LE MARKETING DE RELANCE OU LA PUBLICITÉ CIBLÉE]]
+PUBLICITÉ COMPORTEMENTALE
+Comme indiqué ci-dessus, nous utilisons vos Informations personnelles pour vous proposer des publicités ciblées ou des messages de marketing qui,
+selon nous, pourraient vous intéresser. Pour en savoir plus sur le fonctionnement de la publicité ciblée, vous pouvez consulter la page d'information de laNetwork Advertising Initiative (NAI) à l'adresse suivante : http://www.networkadvertising.org/understanding-online-advertising/how-does-it-work.
+Vous pouvez refuser la publicité ciblée ici :
+[[
+INCLURE LES LIENS DE DÉSACTIVATION DES SERVICES UTILISÉS.
+QUELQUES LIENS COURANTS :
+FACEBOOK – https://www.facebook.com/settings/?tab=ads
+GOOGLE – https://www.google.com/settings/ads/anonymous
+BING – https://about.ads.microsoft.com/fr-fr/ressources/politiques/annonces-personnalisees
+]]
+En outre, vous pouvez refuser certains de ces services en vous rendant sur le portail de désactivation de Digital Advertising Alliance à l'adresse suivante :
+https://optout.aboutads.info/?c=3&lang=fr.
+NE PAS SUIVRE
+Veuillez noter que nous ne modifions pas la collecte de données de notre Site et nos pratiques d'utilisation lorsque nous détectons un signal « Ne pas
+suivre » sur votre navigateur.
+[[INCLURE LE PARAGRAPHE SUIVANT SI VOUS VOUS SITUEZ EN EUROPE OU SI VOTRE BOUTIQUE A DES CLIENTS EN EUROPE]]
+VOS DROITS
+Si vous êtes résident(e) européen(ne), vous disposez d'un droit d'accès aux informations personnelles que nous détenons à votre sujet et vous pouvez
+demander à ce qu'elles soient corrigées, mises à jour ou supprimées. Si vous souhaitez exercer ce droit, veuillez nous contacter au moyen des
+coordonnées précisées ci-dessous.
+Par ailleurs, si vous êtes résident(e) européen(ne), notez que nous traitons vos informations dans le but de remplir nos obligations contractuelles à votreégard (par exemple si vous passez une commande sur le Site) ou de poursuivre nos intérêts commerciaux légitimes, énumérés ci-dessus. Veuillez
+également noter que vos informations seront transférées hors de l'Europe, y compris au Canada et aux États-Unis.
+RÉTENTION DES DONNÉES
+Lorsque vous passez une commande par l'intermédiaire du Site, nous conservons les Informations sur votre commande dans nos dossiers, sauf si et
+jusqu'à ce que vous nous demandiez de les supprimer.
+[[INSÉRER LE PARAGRAPHE SUIVANT EN CAS D'OBLIGATION D'ÂGE MINIMUM]]
+MINEURS
+Le Site n'est pas destiné aux individus de moins de [[INSÉRER L'ÂGE]].
+CHANGEMENTS
+Nous pouvons être amenés à modifier la présente politique de confidentialité de temps à autre afin d'y refléter, par exemple, les changements apportés ànos pratiques ou pour d'autres motifs opérationnels, juridiques ou réglementaires.
+NOUS CONTACTER
+Pour en savoir plus sur nos pratiques de confidentialité, si vous avez des questions ou si vous souhaitez déposer une réclamation, veuillez nous contacterpar e-mail à contact@marvinl.com, ou par courrier à l'adresse suivante :
+5 rue des suisses, Paris, Paris, 75014, France
+Propulsé par Shopify
+www.shopify.fr