菜单
Set up Google Analytics 4 with DSGVO-compliant cookie consent banner. Use when analytics tracking is needed. Triggers on "analytics", "GA4", "Google Analytics", "cookie consent", "tracking".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build pages by installing shadcnblocks sections and implementing i18n. Use for each page after branding is defined. Takes page route and list of sections to install. Installs sections in order, creates page file, extracts text to de.json/en.json, and adds useTranslations.
Add smooth scrolling for same-page anchor links only. Uses JavaScript to handle
Add cinematic lerp-based smooth scrolling for all scroll inputs (mouse wheel, trackpad, touch). Creates butter-smooth momentum scrolling like premium agency websites. Works alongside existing smooth-scroll anchor links.
Define brand styling for website projects. Updates globals.css with CSS color variables (oklch format), typography (h1-h6, p, a, blockquote), and container styles. Use at the start of a project after sitemap is created. Requires primary, secondary, and accent colors plus font choice.
Add elegant page transition overlay using 3 staggered color layers. Overlay covers screen during navigation and reveals once new page is loaded. Use during /init or standalone.
Configure footer navigation links for SEO completeness. Sets up all pages (Homepage, Services, About, Contact, Impressum, Datenschutz) in organized groups. Dynamically finds footer*.tsx component. Updates i18n with all footer keys.
| name | cookies-analytics |
| description | Set up Google Analytics 4 with DSGVO-compliant cookie consent banner. Use when analytics tracking is needed. Triggers on "analytics", "GA4", "Google Analytics", "cookie consent", "tracking". |
Set up GA4 with DSGVO-compliant cookie consent.
Create components/cookie-consent.tsx:
'use client'
import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
export function CookieConsent() {
const [showBanner, setShowBanner] = useState(false)
useEffect(() => {
const consent = localStorage.getItem('cookie-consent')
if (!consent) setShowBanner(true)
}, [])
const acceptAll = () => {
localStorage.setItem('cookie-consent', 'all')
setShowBanner(false)
loadAnalytics()
}
const acceptEssential = () => {
localStorage.setItem('cookie-consent', 'essential')
setShowBanner(false)
}
if (!showBanner) return null
return (
<div className="fixed bottom-0 left-0 right-0 bg-background border-t p-4 z-50">
<div className="container flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-muted-foreground">
Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.{' '}
<a href="/datenschutz" className="underline">Mehr erfahren</a>
</p>
<div className="flex gap-2">
<Button variant="outline" onClick={acceptEssential}>
Nur notwendige
</Button>
<Button onClick={acceptAll}>
Alle akzeptieren
</Button>
</div>
</div>
</div>
)
}
function loadAnalytics() {
// Load GA4 script dynamically
const script = document.createElement('script')
script.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`
script.async = true
document.head.appendChild(script)
window.dataLayer = window.dataLayer || []
function gtag(...args: any[]) { window.dataLayer.push(args) }
gtag('js', new Date())
gtag('config', process.env.NEXT_PUBLIC_GA_ID)
}
Add to .env.local:
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
Add to app/layout.tsx:
import { CookieConsent } from '@/components/cookie-consent'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<CookieConsent />
</body>
</html>
)
}
Add to layout or a provider:
'use client'
import { useEffect } from 'react'
export function AnalyticsProvider({ children }) {
useEffect(() => {
const consent = localStorage.getItem('cookie-consent')
if (consent === 'all') {
loadAnalytics()
}
}, [])
return <>{children}</>
}
Add to Datenschutz page:
### Google Analytics
Diese Website verwendet Google Analytics 4, einen Webanalysedienst der Google LLC.
Die Nutzung erfolgt nur nach Ihrer ausdrücklichen Einwilligung.
**Verarbeitete Daten:**
- IP-Adresse (anonymisiert)
- Besuchte Seiten
- Verweildauer
- Geräte- und Browserinformationen
**Rechtsgrundlage:** Art. 6 Abs. 1 lit. a DSGVO (Einwilligung)
Sie können Ihre Einwilligung jederzeit widerrufen, indem Sie die Cookies in Ihrem Browser löschen.