diff --git a/v3/src/components/CookieConsent.astro b/v3/src/components/CookieConsent.astro index 912e8920..7e1b145e 100644 --- a/v3/src/components/CookieConsent.astro +++ b/v3/src/components/CookieConsent.astro @@ -3,21 +3,27 @@ import 'vanilla-cookieconsent/dist/cookieconsent.css'; import '../assets/styles/ccElegantBlack.css'; --- - diff --git a/v3/src/components/CookieConsentConfig.ts b/v3/src/components/CookieConsentConfig.ts index 41fe8335..a73c21bb 100644 --- a/v3/src/components/CookieConsentConfig.ts +++ b/v3/src/components/CookieConsentConfig.ts @@ -11,6 +11,12 @@ import ko from './cookie/ko.json'; import zhCN from './cookie/zh-CN.json'; import zhTW from './cookie/zh-TW.json'; +declare global { + interface Window { + loadGoogleAnalytics?: () => void; + } +} + export const config: CookieConsentConfig = { guiOptions: { consentModal: { @@ -37,12 +43,14 @@ export const config: CookieConsentConfig = { ga4: { label: 'Google Analytics 4', + // Defined by Analytics.astro, which only declares the loader and never calls + // it, so Google is contacted for the first time here -- after consent. onAccept: () => { - // TODO: load ga4 - }, - onReject: () => { - console.log('ga4 rejected'); + window.loadGoogleAnalytics?.(); }, + // Nothing to undo: rejecting means the loader was never called, and the + // cookies matched below are erased by the library itself. + onReject: () => {}, cookies: [ { name: /^_ga/, diff --git a/v3/src/components/common/Analytics.astro b/v3/src/components/common/Analytics.astro index a1a553dd..c4d8ba02 100644 --- a/v3/src/components/common/Analytics.astro +++ b/v3/src/components/common/Analytics.astro @@ -1,13 +1,29 @@ --- -import { GoogleAnalytics } from '@astrolib/analytics'; import { ANALYTICS } from 'astrowind:config'; + +const gaId = ANALYTICS?.vendors?.googleAnalytics?.id ? String(ANALYTICS.vendors.googleAnalytics.id) : ''; + +// Nothing is loaded here. This only defines the loader; the analytics service in +// CookieConsentConfig calls it once the visitor accepts that category, so no Google +// script runs and no _ga cookie is set before consent is given. +const loader = ` +window.loadGoogleAnalytics = function () { + if (window.__gaLoaded) return; + window.__gaLoaded = true; + + var s = document.createElement('script'); + s.async = true; + s.src = 'https://www.googletagmanager.com/gtag/js?id=${gaId}'; + document.head.appendChild(s); + + window.dataLayer = window.dataLayer || []; + window.gtag = function () { + window.dataLayer.push(arguments); + }; + window.gtag('js', new Date()); + window.gtag('config', '${gaId}'); +}; +`; --- -{ - ANALYTICS?.vendors?.googleAnalytics?.id ? ( - - ) : null -} +{gaId ?