diff --git a/Common/BlazorServerCommon_NET8.csproj b/Common/BlazorServerCommon_NET8.csproj
index 978d8b4..25de54a 100644
--- a/Common/BlazorServerCommon_NET8.csproj
+++ b/Common/BlazorServerCommon_NET8.csproj
@@ -23,7 +23,7 @@
     <None Include="wwwroot\interop.js" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="Syncfusion.Blazor" Version="31.1.17" />
+    <PackageReference Include="Syncfusion.Blazor" Version="32.1.19" />
   </ItemGroup>
   
   
diff --git a/Common/BlazorWasmCommon_NET8.csproj b/Common/BlazorWasmCommon_NET8.csproj
index e644f3e..3e3a18f 100644
--- a/Common/BlazorWasmCommon_NET8.csproj
+++ b/Common/BlazorWasmCommon_NET8.csproj
@@ -17,7 +17,7 @@
 	<ItemGroup>
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
-		<PackageReference Include="Syncfusion.Blazor" Version="31.1.17" />
+		<PackageReference Include="Syncfusion.Blazor" Version="32.1.19" />
 	</ItemGroup>
 
 	<ItemGroup>
diff --git a/Server/Components/App.razor b/Server/Components/App.razor
index b62bd94..4f65a2b 100644
--- a/Server/Components/App.razor
+++ b/Server/Components/App.razor
@@ -1,4 +1,5 @@
 ﻿@page "/"
+@inject NavigationManager Urihelper
 <!DOCTYPE html>
 <html lang="en">
 
@@ -7,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
     <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
     <script>
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -15,27 +17,56 @@
             }); 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-WLQL39J');</script>
-    <!-- End Google Tag Manager -->
+        })(window, document, 'script', 'dataLayer', 'GTM-P3WXFWCW');
+    </script>
+    <!-- Load GTM-W8WD8WN on user interaction -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const events = ["mousemove", "scroll", "keydown", "touchstart"];
+            function loadGTM() {
+                events.forEach(event => document.removeEventListener(event, loadGTM));
+                (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-W8WD8WN');
+            }
+            events.forEach(event => document.addEventListener(event, loadGTM, { once: true }));
+        });
+    </script>
     <base href="/" />
    <meta charset="UTF-8" />
    <title>Mind Map Maker-Syncfusion Blazor Components Showcase App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="The showcase sample application has been built using blazor platform to create diagrams like mind map chart.">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+   <link href=@Urihelper.Uri rel="canonical" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link href="_content/Syncfusion.Blazor/styles/fluent.css" rel="stylesheet">
 
    <link href="assets/db-icons1/style.css" rel="stylesheet" />
    <link href="assets/dbstyle/diagrambuilder.css" rel="stylesheet" />
-   <script src="_content/BlazorServerCommon_NET8/interop.js" async type="text/javascript"></script> 
-   <link href="_content/Syncfusion.Blazor/styles/fluent.css" rel="stylesheet">
+   <script src="_content/BlazorServerCommon_NET8/interop.js" async type="text/javascript"></script>
    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <HeadOutlet @rendermode="@InteractiveServer" />
 </head>
 
 <body>
     <Routes @rendermode="@InteractiveServer" />
+    <!-- Google Tag Manager (noscript) -->
+    <!--Page Load-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P3WXFWCW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!--Interaction-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <div id="blazor-error-ui">
         <environment include="Staging,Production">
             An error has occurred. This application may no longer respond until reloaded.
diff --git a/WASM/MindMap/Components/App.razor b/WASM/MindMap/Components/App.razor
index 0c80af8..3488096 100644
--- a/WASM/MindMap/Components/App.razor
+++ b/WASM/MindMap/Components/App.razor
@@ -1,4 +1,5 @@
 ﻿@page "/"
+@inject NavigationManager Urihelper
 <!DOCTYPE html>
 <html lang="en">
 
@@ -7,13 +8,44 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Mind Map Maker-Syncfusion Blazor Components Showcase App</title>
     <base href="/" />
+    <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
+    <script>
+        (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-P3WXFWCW');
+    </script>
+    <!-- Load GTM-W8WD8WN on user interaction -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const events = ["mousemove", "scroll", "keydown", "touchstart"];
+            function loadGTM() {
+                events.forEach(event => document.removeEventListener(event, loadGTM));
+                (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-W8WD8WN');
+            }
+            events.forEach(event => document.addEventListener(event, loadGTM, { once: true }));
+        });
+    </script>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+    <link href=@Urihelper.Uri rel="canonical" />
+    <link href="_content/Syncfusion.Blazor/styles/fluent.css" rel="stylesheet">
     <link href="assets/db-icons1/style.css" rel="stylesheet" />
     <link href="assets/dbstyle/diagrambuilder.css" rel="stylesheet" />
     <script src="_content/BlazorWasmCommon_NET8/interop.js"></script>
-    <link href="_content/Syncfusion.Blazor/styles/fluent.css" rel="stylesheet">
     <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
     <HeadOutlet @rendermode="@InteractiveWebAssembly" />
 </head>
@@ -31,6 +63,16 @@
         }
     </style>
     <Routes @rendermode="@InteractiveWebAssembly" />
+    <!-- Google Tag Manager (noscript) -->
+    <!--Page Load-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P3WXFWCW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!--Interaction-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <div id="blazor-error-ui">
         An unhandled error has occurred.
         <a href="" class="reload">Reload</a>
