@agence-creaweb/next-ads-manager v1.0.0

@agencecreaweb/next-ads-manager

Un package pour intégrer facilement des publicités gérées via le dashboard AgenceCreaWeb dans vos applications Next.js.

Installation

npm install @agencecreaweb/next-ads-manager

Configuration

1. Ajoutez les variables d'environnement spécifiques au système de publicités dans votre .env.local :

# Variables pour le système de publicités (différentes de votre Supabase principal)
NEXT_PUBLIC_ADS_SUPABASE_URL="https://xxx.supabase.co"
NEXT_PUBLIC_ADS_SUPABASE_KEY="votre-clé-anon-ads"

2. Dans votre fichier app/providers.tsx ou équivalent :

import { createAdsProvider } from '@next-ads-manager';

const { AdSlot } = createAdsProvider({
  supabaseUrl: process.env.NEXT_PUBLIC_ADS_SUPABASE_URL!,
  supabaseAnonKey: process.env.NEXT_PUBLIC_ADS_SUPABASE_KEY!
});

export { AdSlot };

Utilisation

Dans vos composants :

import { AdSlot } from '@/providers'; // ou le chemin où vous avez exporté AdSlot

export default function Page() {
  return (
    <div>
      <h1>Ma page</h1>
      
      {/* Emplacement publicitaire en haut */}
      <AdSlot 
        position="header"
        siteId="votre-site-id"
        className="my-4" // optionnel
      />
      
      {/* Contenu de la page */}
      
      {/* Emplacement publicitaire dans la sidebar */}
      <AdSlot 
        position="sidebar"
        siteId="votre-site-id"
      />
    </div>
  );
}

Props

AdSlot

• position (string, requis) : Position de l'emplacement publicitaire (ex: "header", "sidebar", "footer")
• siteId (string, requis) : ID de votre site dans le dashboard de publicités
• className (string, optionnel) : Classes CSS à appliquer au conteneur

Fonctionnalités

• Affichage automatique des publicités selon leur position
• Gestion des dates de début et de fin
• Support des publicités HTML et images
• Configuration responsive
• Tracking automatique des vues et clics
• Gestion des priorités d'affichage

Notes

• Les publicités sont gérées via le dashboard AgenceCreaWeb
• Les statistiques sont automatiquement collectées
• Le composant est "client-side" uniquement
• Utilise une base de données Supabase dédiée aux publicités (différente de celle de votre application)
• Les clés Supabase fournies doivent être celles du système de publicités, pas celles de votre application

Sécurité

• Les clés Supabase utilisées sont spécifiques au système de publicités
• Seules les publicités actives sont accessibles via les RLS
• Les statistiques sont collectées de manière anonyme
• Aucun accès en écriture n'est possible sur les publicités via le client