feature(website): add google tag manager tracking (#678)

shared/locales/de/website-privacy.json

@@ -31,7 +31,7 @@
 		"title": "Cookies und Tracking-Tools",
 		"section-1": {
 			"title": "Cookies und Tracking-Tools",
-			"content": "<p>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.</p><p>Wir verwenden die folgenden Cookies:</p><ul><li>Google Analytics Tracking (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Google Tag Manager (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Twitter Conversion Tracking (<a href=\"https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html\" target=\"_blank\">more</a>)</li><li>Facebook Conversion Tracking (<a href=\"https://www.facebook.com/business/learn/facebook-ads-pixel\" target=\"_blank\">more</a>)</li><li>LinkedIn Conversion Tracking (<a href=\"https://www.linkedin.com/legal/privacy-policy\" target=\"_blank\">more</a>)</li></ul>"
+			"content": "<p>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.</p><p>Wenn du zustimmst, benutzen wir die folgenden Tools, die Cookies verwenden, um das Nutzerverhalten zu analysieren:</p><ul><li>Google Analytics Tracking (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Google Tag Manager (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Twitter Conversion Tracking (<a href=\"https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html\" target=\"_blank\">more</a>)</li><li>Facebook Conversion Tracking (<a href=\"https://www.facebook.com/business/learn/facebook-ads-pixel\" target=\"_blank\">more</a>)</li><li>LinkedIn Conversion Tracking (<a href=\"https://www.linkedin.com/legal/privacy-policy\" target=\"_blank\">more</a>)</li></ul>"
 		},
 		"section-2": {
 			"title": "Wie Social Income Cookies verwendet",

shared/locales/en/website-privacy.json

@@ -30,7 +30,7 @@
 		"title": "Cookies and tracking",
 		"section-1": {
 			"title": "Cookies and tracking tools",
-			"content": "<p>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.</p><p>We use the following cookies:</p><ul><li>Google Analytics Tracking (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Google Tag Manager (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Twitter Conversion Tracking (<a href=\"https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html\" target=\"_blank\">more</a>)</li><li>Facebook Conversion Tracking (<a href=\"https://www.facebook.com/business/learn/facebook-ads-pixel\" target=\"_blank\">more</a>)</li><li>LinkedIn Conversion Tracking (<a href=\"https://www.linkedin.com/legal/privacy-policy\" target=\"_blank\">more</a>)</li></ul>"
+			"content": "<p>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.</p><p>If you give consent, we will use the following tools that utilize cookies to analyze user behavior:</p><ul><li>Google Analytics Tracking (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Google Tag Manager (<a href=\"https://policies.google.com/privacy\" target=\"_blank\">more</a>)</li><li>Twitter Conversion Tracking (<a href=\"https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html\" target=\"_blank\">more</a>)</li><li>Facebook Conversion Tracking (<a href=\"https://www.facebook.com/business/learn/facebook-ads-pixel\" target=\"_blank\">more</a>)</li><li>LinkedIn Conversion Tracking (<a href=\"https://www.linkedin.com/legal/privacy-policy\" target=\"_blank\">more</a>)</li></ul>"
 		},
 		"section-2": {
 			"title": "How Social Income uses cookies",

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) {
 			<Analytics />
 			{allowTracking ? (
 				<>
+					<GoogleTagManager />
 					<FacebookTracking />
 					<LinkedInTracking />
 					<AnalyticsProvider sdk={initializeAnalytics(app)}>{children}</AnalyticsProvider>

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');
 		}
 	}, []);
 

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 = `
+				<iframe 
+					src='https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}'
+					height='0'
+					width='0'
+					style='display:none;visibility:hidden'/>
+			`;
+			console.debug('Enabled Google Tag Manager tracking');
+		}
+	}, []);
+
+	return null;
+}

website/src/components/tracking/linkedin-tracking.tsx

@@ -5,7 +5,6 @@ import { useEffect } from 'react';
 export function LinkedInTracking() {
 	useEffect(() => {
 		if (process.env.NEXT_PUBLIC_LINKEDIN_TRACKING_ID) {
-			console.debug('Enabling LinkedIn tracking');
 			// @ts-ignore
 			window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
 			// @ts-ignore
@@ -15,6 +14,8 @@ export function LinkedInTracking() {
 			scriptElement.async = true;
 			scriptElement.src = 'https://snap.licdn.com/li.lms-analytics/insight.min.js';
 			document.head.appendChild(scriptElement);
+
+			console.debug('Enabled LinkedIn tracking');
 		}
 	}, []);