acw-ads-manager
v1.1.46
Published
A Next.js package for managing advertisements
Readme
acw-ads-manager
Un package pour intégrer facilement des publicités gérées via le dashboard AgenceCreaWeb dans vos applications Next.js.
Version actuelle : 1.1.40
Prérequis
- React 18 ou supérieur
- Next.js 13 ou supérieur
- Node.js 16 ou supérieur
Installation
npm install acw-ads-managerConfiguration
1. Variables d'environnement
Ajoutez les variables d'environnement spécifiques au système de publicités dans votre .env :
# 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"
NEXT_PUBLIC_ADS_SITE_NAME="nom-de-votre-site"
NEXT_PUBLIC_ADS_SITE_URL="https://votre-site.com"2. Configuration du Provider
Dans votre fichier app/providers.tsx :
'use client';
import { AdsProvider } from 'acw-ads-manager';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<AdsProvider
supabaseUrl={process.env.NEXT_PUBLIC_ADS_SUPABASE_URL!}
supabaseAnonKey={process.env.NEXT_PUBLIC_ADS_SUPABASE_KEY!}
siteName={process.env.NEXT_PUBLIC_ADS_SITE_NAME!}
siteUrl={process.env.NEXT_PUBLIC_ADS_SITE_URL!}
>
{children}
</AdsProvider>
);
}⚠️ Notes importantes :
- La directive
'use client'est nécessaire car le Provider utilise des fonctionnalités React qui ne sont disponibles que dans les Client Components. - Utilisez directement le composant
AdsProviderimporté. Ne pas appelercreateAdsProvider().
Ensuite, ajoutez le Provider dans votre app/layout.tsx :
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="fr">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}3. Utilisation du composant AdSlot
Dans vos composants :
'use client'
import { AdSlot } from 'acw-ads-manager';
export default function Page() {
return (
<div>
<h1>Ma page</h1>
{/* Emplacement publicitaire en haut */}
<AdSlot
position="header"
className="my-4" // optionnel
/>
{/* Contenu de la page */}
{/* Emplacement publicitaire dans la sidebar */}
<AdSlot
position="sidebar"
/>
</div>
);
}4. Utilisation du hook useAds
Le hook useAds vous permet d'accéder au contexte des publicités dans vos composants client :
'use client'
import { useAds } from 'acw-ads-manager';
export function MyComponent() {
const { supabase, siteName, siteUrl } = useAds();
// Utilisez les valeurs du contexte ici
return (
<div>
{/* Votre composant */}
</div>
);
}⚠️ Note : Le hook useAds ne peut être utilisé que dans des composants clients (avec la directive 'use client') et à l'intérieur du AdsProvider.
Props
AdSlot
position(string, requis) : Position de l'emplacement publicitaire (ex: "header", "sidebar", "footer")className(string, optionnel) : Classes CSS à appliquer au conteneur
Positions Disponibles
| Position | Description | Taille Recommandée | Usage |
|----------|-------------|-------------------|-------|
| header | En haut du site | 728x90px ou 970x90px | Bannière principale |
| footer | En bas du site | 728x90px | Bannière de fin de page |
| sidebar | Barre latérale | 300x250px ou 300x600px | Publicité rectangulaire |
| content_top | Au-dessus du contenu | 728x90px | Bannière avant l'article |
| content_bottom | Sous le contenu | 728x90px | Bannière après l'article |
| content_middle | Au milieu du contenu | 300x250px | Publicité dans le texte |
| popup | Fenêtre popup | 600x400px | Publicité interstitielle |
| sticky_bottom | Fixe en bas | 728x90px | Bannière toujours visible |
| sticky_sidebar | Fixe dans la sidebar | 300x600px | Publicité qui suit le scroll |
| mobile_top | En haut sur mobile | 320x100px | Bannière mobile |
| mobile_bottom | En bas sur mobile | 320x50px | Bannière mobile fixe |
Types de Publicités
| Type | Description |
|------|-------------|
| banner | Bannière image simple avec lien |
| html | Code HTML personnalisé |
| responsive | Bannière adaptative |
Configuration des Images
La configuration des images accepte les paramètres suivants :
interface ImageConfig {
width: number; // Largeur en pixels
height: number; // Hauteur en pixels
fit?: 'cover' | 'contain' | 'fill' | 'none'; // Mode d'ajustement
position?: 'center' | 'top' | 'bottom' | 'left' | 'right'; // Position
responsive?: boolean; // Adaptation responsive
}Structure d'une Publicité
interface Advertisement {
id: string;
site_id: string;
name: string;
title: string;
description: string;
type: 'banner' | 'html' | 'responsive';
position: string;
status: 'active' | 'paused' | 'draft' | 'ended';
start_date: string;
end_date: string;
priority: number;
content: {
html?: string; // Pour type='html'
image_url?: string; // Pour type='banner'
destination_url?: string;
imageConfig: ImageConfig;
};
created_at: string;
updated_at: string;
}Notes
- Les publicités sont gérées via le dashboard AgenceCreaWeb
- Les statistiques sont automatiquement collectées
- Le composant est "client-side" uniquement (utilisez 'use client')
- Utilise une base de données Supabase dédiée aux publicités
- Les clés Supabase fournies doivent être celles du système de publicités
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
- Les politiques RLS garantissent que :
- Seules les publicités actives et dans leur période de validité sont accessibles
- Les statistiques peuvent être enregistrées mais pas modifiées
- Les sites publicitaires sont en lecture seule