From dc17ac1ff1332a58bd9463bc29204b523ee41899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20K=C3=BCndig?= Date: Wed, 13 Dec 2023 11:40:53 +0700 Subject: [PATCH] feature(website): add google tag manager tracking (#678) --- shared/locales/de/website-privacy.json | 2 +- shared/locales/en/website-privacy.json | 2 +- website/src/app/context-providers.tsx | 2 ++ .../components/tracking/facebook-tracking.tsx | 4 +-- .../tracking/google-tag-manager.tsx | 30 +++++++++++++++++++ .../components/tracking/linkedin-tracking.tsx | 3 +- 6 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 website/src/components/tracking/google-tag-manager.tsx diff --git a/shared/locales/de/website-privacy.json b/shared/locales/de/website-privacy.json index c963b4c25..d3b48cec7 100644 --- a/shared/locales/de/website-privacy.json +++ b/shared/locales/de/website-privacy.json @@ -31,7 +31,7 @@ "title": "Cookies und Tracking-Tools", "section-1": { "title": "Cookies und Tracking-Tools", - "content": "

Wie fast jede andere Webseite, verwendet auch die Webseite von Social Income Cookies. Cookies sind kleine Textdateien mit ID-Tags, die im Browser-Verzeichnis deines Computers oder in Unterordnern von Programmdaten gespeichert werden. Cookies werden erstellt, wenn du über deinen Browser eine Webseite besuchst. Sie werden etwa verwendet, um deine Bewegungen innerhalb der Webseite zu verfolgen, und dir so zum Beispiel zu helfen, deinen Besuch der Webseite dort fortzusetzen, wo du ihn abgebrochen hast. Sie können sich an deine registrierte Anmeldung, eine Themenauswahl, Präferenzen und andere Anpassungsfunktionen erinnern.

Wir verwenden die folgenden Cookies:

" + "content": "

Wie fast jede andere Webseite, verwendet auch die Webseite von Social Income Cookies. Cookies sind kleine Textdateien mit ID-Tags, die im Browser-Verzeichnis deines Computers oder in Unterordnern von Programmdaten gespeichert werden. Cookies werden erstellt, wenn du über deinen Browser eine Webseite besuchst. Sie werden etwa verwendet, um deine Bewegungen innerhalb der Webseite zu verfolgen, und dir so zum Beispiel zu helfen, deinen Besuch der Webseite dort fortzusetzen, wo du ihn abgebrochen hast. Sie können sich an deine registrierte Anmeldung, eine Themenauswahl, Präferenzen und andere Anpassungsfunktionen erinnern.

Wenn du zustimmst, benutzen wir die folgenden Tools, die Cookies verwenden, um das Nutzerverhalten zu analysieren:

" }, "section-2": { "title": "Wie Social Income Cookies verwendet", diff --git a/shared/locales/en/website-privacy.json b/shared/locales/en/website-privacy.json index 6e3e5f1e3..e43e99281 100644 --- a/shared/locales/en/website-privacy.json +++ b/shared/locales/en/website-privacy.json @@ -30,7 +30,7 @@ "title": "Cookies and tracking", "section-1": { "title": "Cookies and tracking tools", - "content": "

Like any other website, Social Income’s website uses cookies. Cookies are usually small text files with ID tags that are stored on your computer's browser directory or program data subfolders. Cookies are created when you use your browser to visit a website and are used to keep track of your movements within the site, help you resume where you left off, remember your registered login, theme selection, preferences, and other customization functions.

We use the following cookies:

" + "content": "

Like any other website, Social Income’s website uses cookies. Cookies are usually small text files with ID tags that are stored on your computer's browser directory or program data subfolders. Cookies are created when you use your browser to visit a website and are used to keep track of your movements within the site, help you resume where you left off, remember your registered login, theme selection, preferences, and other customization functions.

If you give consent, we will use the following tools that utilize cookies to analyze user behavior:

" }, "section-2": { "title": "How Social Income uses cookies", diff --git a/website/src/app/context-providers.tsx b/website/src/app/context-providers.tsx index d7b5916dc..e5d8ca928 100644 --- a/website/src/app/context-providers.tsx +++ b/website/src/app/context-providers.tsx @@ -2,6 +2,7 @@ import { CURRENCY_COOKIE, LANGUAGE_COOKIE, REGION_COOKIE } from '@/app/[lang]/[region]'; import { FacebookTracking } from '@/components/tracking/facebook-tracking'; +import { GoogleTagManager } from '@/components/tracking/google-tag-manager'; import { LinkedInTracking } from '@/components/tracking/linkedin-tracking'; import { useCookieState } from '@/hooks/useCookieState'; import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion } from '@/i18n'; @@ -75,6 +76,7 @@ function AnalyticsProviderWrapper({ children }: PropsWithChildren) { {allowTracking ? ( <> + {children} diff --git a/website/src/components/tracking/facebook-tracking.tsx b/website/src/components/tracking/facebook-tracking.tsx index c5c399a69..081afab1e 100644 --- a/website/src/components/tracking/facebook-tracking.tsx +++ b/website/src/components/tracking/facebook-tracking.tsx @@ -5,8 +5,6 @@ import { useEffect } from 'react'; export function FacebookTracking() { useEffect(() => { if (process.env.NEXT_PUBLIC_FACEBOOK_TRACKING_ID) { - console.debug('Enabling Facebook tracking'); - const fbeventsScript = ` !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? @@ -21,6 +19,8 @@ export function FacebookTracking() { const scriptElement = document.createElement('script'); scriptElement.textContent = fbeventsScript; document.head.appendChild(scriptElement); + + console.debug('Enabled Facebook tracking'); } }, []); diff --git a/website/src/components/tracking/google-tag-manager.tsx b/website/src/components/tracking/google-tag-manager.tsx new file mode 100644 index 000000000..0a42e68f6 --- /dev/null +++ b/website/src/components/tracking/google-tag-manager.tsx @@ -0,0 +1,30 @@ +'use client'; + +import { useEffect } from 'react'; + +export function GoogleTagManager() { + useEffect(() => { + if (process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID) { + const gtmScript = ` + (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': + new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], + j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= + 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); + })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');`; + const scriptElement = document.createElement('script'); + scriptElement.textContent = gtmScript; + document.head.appendChild(scriptElement); + + document.body.appendChild(document.createElement('noscript')).innerHTML = ` +