added Google Tag Manager

.env.example

@@ -6,4 +6,7 @@ ENTITY_ID=https://saml.example.com/entityid
 # Base64 encoded value of public key `cat public.crt | base64`
 PUBLIC_KEY=
 # Base64 encoded value of private key `cat key.pem | base64`
-PRIVATE_KEY=
+PRIVATE_KEY=
+
+# Google Tag Manager ID
+NEXT_PUBLIC_GTM_ID=

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

package-lock.json

@@ -7,9 +7,10 @@
       "name": "fake",
       "dependencies": {
         "next": "12.1.0",
-        "node-forge": "^1.2.1",
+        "node-forge": "1.2.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-gtm-module": "2.0.11",
         "xml-crypto": "2.1.3",
         "xml2js": "0.4.23",
         "xmlbuilder": "15.1.1"
@@ -18,6 +19,7 @@
         "@types/node": "17.0.8",
         "@types/node-forge": "1.0.0",
         "@types/react": "17.0.38",
+        "@types/react-gtm-module": "2.0.1",
         "@types/xml-crypto": "1.4.2",
         "@types/xml2js": "0.4.9",
         "autoprefixer": "10.4.2",
@@ -467,6 +469,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-gtm-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz",
+      "integrity": "sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg==",
+      "dev": true
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3281,6 +3289,11 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-gtm-module": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
+      "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4258,6 +4271,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-gtm-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz",
+      "integrity": "sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg==",
+      "dev": true
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -6286,6 +6305,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-gtm-module": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
+      "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw=="
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -9,9 +9,10 @@
   },
   "dependencies": {
     "next": "12.1.0",
-    "node-forge": "^1.2.1",
+    "node-forge": "1.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-gtm-module": "2.0.11",
     "xml-crypto": "2.1.3",
     "xml2js": "0.4.23",
     "xmlbuilder": "15.1.1"
@@ -20,6 +21,7 @@
     "@types/node": "17.0.8",
     "@types/node-forge": "1.0.0",
     "@types/react": "17.0.38",
+    "@types/react-gtm-module": "2.0.1",
     "@types/xml-crypto": "1.4.2",
     "@types/xml2js": "0.4.9",
     "autoprefixer": "10.4.2",

pages/_app.tsx

@@ -1,8 +1,15 @@
 import 'styles/globals.css';
 import type { AppProps } from 'next/app';
 import Layout from 'components/Layout';
+import TagManager from 'react-gtm-module';
+import { useEffect } from 'react';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    if (process.env.NEXT_PUBLIC_GTM_ID) {
+      TagManager.initialize({ gtmId: process.env.NEXT_PUBLIC_GTM_ID });
+    }
+  }, []);
   return (
     <Layout>
       <Component {...pageProps} />