feat: Move Google Tag Manager ID to env variable

Author: oSumAtrIX

.env

@@ -0,0 +1,2 @@
+RV_API_URL=https://api.revanced.app
+RV_GOOGLE_TAG_MANAGER_ID=

.env.example

@@ -4,6 +4,6 @@ node_modules
 /public
 /.svelte-kit
 /package
-!.env.example
+.env
 /_docs_src
 /static/docs

.gitignore

@@ -1,17 +1,17 @@
 import { browser } from '$app/environment';
 import { RV_API_URL } from '$env/static/public';
 
-const URL_KEY = 'revanced_api_url';
+export const default_api_url = RV_API_URL;
 
-export const default_base_url = RV_API_URL;
+const URL_KEY = 'revanced_api_url';
 
 // Get base URL
 export function api_base_url(): string {
 	if (browser) {
-		return localStorage.getItem(URL_KEY) || default_base_url;
+		return localStorage.getItem(URL_KEY) || default_api_url;
 	}
 
-	return default_base_url;
+	return default_api_url;
 }
 
 // (re)set base URL.

src/data/api/settings.ts

@@ -9,7 +9,7 @@
 	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
 
-	import * as settings from '$data/api/settings';
+	import { api_base_url, set_api_base_url, default_api_url } from '$data/api/settings';
 	import RouterEvents from '$data/RouterEvents';
 
 	import { useQueryClient } from '@tanstack/svelte-query';
@@ -28,15 +28,15 @@
 		reload();
 	}
 
-	let url = settings.api_base_url();
+	let url = api_base_url();
 
 	function save() {
-		settings.set_api_base_url(url);
+		set_api_base_url(url);
 		reload();
 	}
 
 	function reset() {
-		url = settings.default_base_url;
+		url = default_api_url;
 	}
 
 	let menuOpen = false;

src/layout/Navbar/NavHost.svelte

@@ -24,6 +24,8 @@
 	import RouterEvents from '$data/RouterEvents';
 	import { events as themeEvents } from '$util/themeEvents';
 
+	import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
+
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {
@@ -36,24 +38,38 @@
 	let showConsentModal = false;
 	let allowAnalytics = false;
 
+	function enableAnalytics() {
+		window.dataLayer = window.dataLayer || [];
+		function gtag() {
+			dataLayer.push(arguments);
+		}
+		gtag('js', new Date());
+		gtag('config', RV_GOOGLE_TAG_MANAGER_ID);
+		var s = document.createElement('script');
+		s.src = `https://www.googletagmanager.com/gtm.js?id=${RV_GOOGLE_TAG_MANAGER_ID}`;
+		document.head.append(s);
+	}
+
 	function rememberChoice(allow: boolean) {
 		localStorage.setItem('analytics', allow.toString());
 		showConsentModal = false;
 		allowAnalytics = allow;
+
+		if (allowAnalytics) enableAnalytics();
 	}
 
 	onMount(() => {
-		new DateTriggerEventHandler(themeEvents);
-
-		// Check if the user has already decided.
 		// Check if the user has already decided
 		const hasDecided = localStorage.getItem('analytics') !== null;
 		if (hasDecided) {
 			allowAnalytics = localStorage.getItem('analytics') === 'true';
+			if (allowAnalytics) enableAnalytics();
 		} else {
 			showConsentModal = true;
 		}
 
+		new DateTriggerEventHandler(themeEvents);
+
 		isRestoring.set(true);
 		const [unsubscribe, promise] = persistQueryClient({
 			queryClient,
@@ -79,26 +95,18 @@
 	);
 </script>
 
-<svelte:head>
-	{#if allowAnalytics}
-		<!-- Google Tag Manager -->
-		<script>
-			allowAnalytics = localStorage.getItem('analytics') === 'true';
-			if (allowAnalytics) {
-				(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', 'GTM-MQ6K849');
-			}
-		</script>
-	{/if}
-</svelte:head>
+{#if allowAnalytics}
+	<!-- Google Tag Manager (noscript) -->
+	<noscript>
+		<!-- svelte-ignore a11y-missing-attribute -->
+		<iframe
+			src="https://www.googletagmanager.com/ns.html?id={RV_GOOGLE_TAG_MANAGER_ID}"
+			height="0"
+			width="0"
+			style="display: none; visibility: hidden"
+		></iframe>
+	</noscript>
+{/if}
 
 <QueryClientProvider client={queryClient}>
 	<NavHost />
@@ -123,15 +131,3 @@
 	</div>
 	<!-- <Footer> -->
 </QueryClientProvider>
-{#if allowAnalytics}
-	<!-- Google Tag Manager (noscript) -->
-	<noscript>
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<iframe
-			src="https://www.googletagmanager.com/ns.html?id=GTM-MQ6K849"
-			height="0"
-			width="0"
-			style="display: none; visibility: hidden"
-		></iframe>
-	</noscript>
-{/if}