diff --git a/webapp/server/AppointmentPlanner/AppointmentPlanner.csproj b/webapp/server/AppointmentPlanner/AppointmentPlanner.csproj
index 89b4d7d..0b8a174 100644
--- a/webapp/server/AppointmentPlanner/AppointmentPlanner.csproj
+++ b/webapp/server/AppointmentPlanner/AppointmentPlanner.csproj
@@ -7,13 +7,13 @@
   </PropertyGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Syncfusion.Blazor.Buttons" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Charts" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Grid" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Navigations" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Notifications" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Schedule" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Themes" Version="31.1.17" />
+		<PackageReference Include="Syncfusion.Blazor.Buttons" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Charts" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Grid" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Navigations" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Notifications" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Schedule" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Themes" Version="32.1.19" />
 	</ItemGroup>
 
 </Project>
diff --git a/webapp/server/AppointmentPlanner/Components/App.razor b/webapp/server/AppointmentPlanner/Components/App.razor
index ef97db6..46b855c 100644
--- a/webapp/server/AppointmentPlanner/Components/App.razor
+++ b/webapp/server/AppointmentPlanner/Components/App.razor
@@ -1,8 +1,10 @@
-﻿<!DOCTYPE html>
+﻿@inject NavigationManager Urihelper
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
-        <!-- Google Tag Manager -->
+    <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
     <script>
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -20,6 +22,7 @@
     <meta name="description" content="Appointment Planner is a single page application for demonstrating Syncfusion Blazor Components features in a real-world scenario with dashboard like layout." />
     <title>Appointment Planner - Syncfusion Blazor Components Showcase App</title>
     <base href="/" />
+    <link href=@Urihelper.Uri rel="canonical" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap.css" rel="stylesheet" />
@@ -57,7 +60,14 @@
 <body class="e-app-mainpage">
     <Routes @rendermode="@InteractiveServer" />
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe></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 hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - AppointmentPlanner"></div>
     <script src="_framework/blazor.web.js"></script>
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/AppointmentPlanner.Client.csproj b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/AppointmentPlanner.Client.csproj
index 45e325e..4a5a8ff 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/AppointmentPlanner.Client.csproj
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/AppointmentPlanner.Client.csproj
@@ -10,13 +10,13 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
-		<PackageReference Include="Syncfusion.Blazor.Buttons" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Charts" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Grid" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Navigations" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Notifications" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Schedule" Version="31.1.17" />
-		<PackageReference Include="Syncfusion.Blazor.Themes" Version="31.1.17" />
+		<PackageReference Include="Syncfusion.Blazor.Buttons" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Charts" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Grid" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Navigations" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Notifications" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Schedule" Version="32.1.19" />
+		<PackageReference Include="Syncfusion.Blazor.Themes" Version="32.1.19" />
   </ItemGroup>
 
 </Project>
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
index eea71a6..8138e3f 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
@@ -1,8 +1,10 @@
-﻿<!DOCTYPE html>
+﻿@inject NavigationManager Urihelper
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
     <script>
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -11,13 +13,33 @@
             }); 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>
+	<!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="description" content="Appointment Planner is a SPA for demonstrating Syncfusion Blazor WebAssembly Components features in a real-world scenario with dashboard like layout." />
     <title>Appointment Planner | Blazor WebAssembly showcase app | Syncfusion</title>
     <base href="/" />
+    <link href=@Urihelper.Uri rel="canonical" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap.css" rel="stylesheet" />
@@ -54,7 +76,14 @@
 
 <body>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe></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) -->
     <Routes @rendermode="@InteractiveWebAssembly" />
     <div hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - AppointmentPlanner"></div>
