Improvements to source code, AI integrations, and minor bug fixes

Author: arsari

.gitignore

@@ -1,4 +1,5 @@
 assets/js/function.js
 assets/js/config.js
 server/.env
+server/credentials.json
 server/node_modules/

assets/css/chatbot.css

@@ -1,5 +1,6 @@
 :root {
   --primary-color: purple;
+  --secondary-color: rgb(200, 146, 200);
   --text-color: #ffffff;
   --border-color: #dddddd;
 }
@@ -25,8 +26,8 @@
   position: fixed;
   bottom: 100px;
   right: 40px;
-  width: 320px;
-  max-height: 500px;
+  width: 400px;
+  max-height: 600px;
   background: var(--text-color);
   border: 1px solid var(--border-color);
   border-radius: 8px;
@@ -79,7 +80,7 @@
 }
 
 .user-message {
-  background-color: var(--primary-color);
+  background-color: var(--secondary-color);
   color: var(--text-color);
   align-self: flex-end;
   margin-left: auto;
@@ -120,3 +121,21 @@
 #send-btn:hover {
   background-color: red;
 }
+
+@media screen and (min-width: 320px) and (max-width: 550px) {
+  .chat-toggle {
+    bottom: 70px;
+    right: 15px;
+    img {
+      width: 80px;
+      height: 85px;
+    }
+  }
+  .chatbot-widget {
+    width: 96%;
+    max-height: 750px;
+    bottom: 60px;
+    right: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+}

assets/css/style.css

@@ -992,24 +992,63 @@ aside {
   text-align: justify;
 }
 
-@media screen and (min-width: 320px) and (max-width: 1280px) {
+@media screen and (min-width: 320px) and (max-width: 550px) {
   .github-badges {
     display: inline-block;
     margin: auto 0;
   }
   .flex {
-    flex-wrap: wrap;
     margin: 15px 10px 0;
   }
   .button {
-    margin: 0 auto 10px;
+    margin: 0 5px 10px;
   }
   main {
     margin: 0 10px 65px;
     font-size: 90%;
   }
   footer {
-    font-size: 10px;
+    font-size: 0.5rem;
+  }
+  .container {
+    display: flex;
+  }
+  .ecommerce-modal-content {
+    width: 80%;
+  }
+  .ecommerce-btn {
+    left: 88%;
+    margin: 20px 0 0 -40%;
+  }
+  .ecommerce-btn2 {
+    left: 88%;
+    margin: 1px 0 0 -40%;
+  }
+  .cookie-consent-banner {
+    padding-top: 50px;
+  }
+  .text-consent-banner {
+    width: 70%;
+  }
+}
+
+@media screen and (min-width: 551px) and (max-width: 1280px) {
+  .github-badges {
+    display: inline-block;
+    margin: auto 0;
+  }
+  .flex {
+    margin: 15px 10px 0;
+  }
+  .button {
+    margin: 0 5px 10px;
+  }
+  main {
+    margin: 0 10px 65px;
+    font-size: 90%;
+  }
+  footer {
+    font-size: 0.8rem;
   }
   .container {
     display: flex;

assets/js/config.min.js

@@ -82,7 +82,7 @@
         language_code: "en-US",
         page_author: "Arturo Santiago-Rivera",
         page_category: "home",
-        page_name: "Web Analytics Implementation - Internal Page",
+        page_name: "Web Analytics Implementation - Homepage",
         page_title: document.querySelector("title").innerText,
       };
       window.dataLayer = window.dataLayer || [];
@@ -112,7 +112,7 @@
     </script>
     <!--END: Google Tag Manager-->
     <!--Amplitude Script Loader-->
-    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.3-min.js.gz"></script>
+    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.12-min.js.gz"></script>
     <!--END: Amplitude Script Loader-->
     <!--Mixpanel Script Loader-->
     <script type="text/javascript">
@@ -290,13 +290,13 @@
           return event;
         },
       });
-      amplitude.add(enrichEventsPlugin()); // amplitude enrich plugin call
-      amplitude.init(config.AMPLITUDE_KEY, userInit, {
+      window.amplitude.add(enrichEventsPlugin()); // amplitude enrich plugin call
+      window.amplitude.init(insightTool.AMPLITUDE_KEY, userInit, {
         autocapture: { elementInteractions: false },
       }); // amplitude init statement
 
       /* Mixpanel Init */
-      mixpanel.init(config.MIXPANEL_KEY); // mixpanel init statement
+      mixpanel.init(insightTool.MIXPANEL_KEY); // mixpanel init statement
       mixpanel.identify(userInit); // mixpanel user identify
       mixpanel.people.set({ logged_in: localStorage.logged }); // mixpanel user properties
       mixpanel.register({
@@ -308,7 +308,9 @@
 
       /* Heap Analytics Init */
       const heapAppId =
-        tealiumEnv !== "prod" ? config.HEAP_DEV_KEY : config.HEAP_PROD_KEY;
+        tealiumEnv !== "prod"
+          ? insightTool.HEAP_DEV_KEY
+          : insightTool.HEAP_PROD_KEY;
       heap.load(heapAppId);
       heap.identify(userInit);
       heap.addUserProperties({ logged_in: localStorage.logged });
@@ -378,8 +380,8 @@ <h1>
         <h2>
           A playground for experimenting with analytics implementation on a web
           app tracked on Google Analytics 4 (GA4) through GTM, Adobe Analytics
-          (AA) via Tealium iQ, Amplitude Analytics, and Mixpanel Product
-          Analytics.
+          (AA) via Tealium iQ, Amplitude Analytics, Mixpanel Product Analytics,
+          New Relic LogRocket and TrackingPlan.
         </h2>
         <h3>
           Adobe Data Collection (Launch), Heap Analytics, and LaunchDarkly are
@@ -433,7 +435,7 @@ <h3>
           <i class="fa-solid fa-check icon"></i>
         </a>
         <a
-          id="intlink2"
+          id="iframelink"
           name="action"
           class="button n-item"
           href="public/iframe-parent.html"
@@ -1291,7 +1293,7 @@ <h2>We value your privacy</h2>
       </section>
     </main>
     <footer></footer>
-    <!-- Chatbot TStructure -->
+    <!-- Chatbot Structure -->
     <button
       id="chat-toggle"
       class="chat-toggle hidden"
@@ -1308,7 +1310,7 @@ <h2>We value your privacy</h2>
     </button>
     <div id="chatbot-widget" class="chatbot-widget hidden">
       <div class="chatbot-header">
-        <span>Chatbot</span>
+        <span>AnalyticsWeb Assistant</span>
         <button
           id="close-chat"
           class="close-btn"

assets/js/function.min.js

@@ -1,19 +1,28 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description"
-      content="Playground to explore web analytics implementation on a web app using various analytics tools." />
+    <meta
+      name="description"
+      content="Playground to explore web analytics implementation on a web app using various analytics tools."
+    />
     <meta name="author" content="Arturo Santiago-Rivera" />
     <meta name="author_email" content="asantiago@arsari.com" />
-    <meta http-equiv='cache-control' content='no-cache'>
-    <meta http-equiv='expires' content='0'>
-    <meta http-equiv='pragma' content='no-cache'>
-    <link rel="shortcut icon" type="image/x-icon" sizes="16x16" href="../favicon.ico" />
-    <link rel='canonical' href='https://arsari.github.io/AnalyticsWeb' />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache" />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      sizes="16x16"
+      href="../favicon.ico"
+    />
+    <link rel="canonical" href="https://arsari.github.io/AnalyticsWeb" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+    />
     <link rel="stylesheet" href="../assets/css/style.css" />
     <title>AnalyticsWeb | Child iFrame Page</title>
     <script type="text/javascript" src="../assets/js/newRelic.js"></script>
@@ -60,30 +69,29 @@
       function sendTrackingEventParent(eventName, eventData) {
         try {
           const postObject = {
-            event: 'iframeEvent',
+            event: "iframeEvent",
             name: eventName,
             data: eventData,
           };
-          window.parent.postMessage(postObject, '*');
+          window.parent.postMessage(postObject, "*");
         } catch (e) {
-          console.error('Error sending message to parent', e);
+          console.error("Error sending message to parent", e);
         }
       }
 
-      const elAction = document.getElementById('thankButton');
-      elAction.addEventListener('click', () => {
-        document.getElementById('thankMessage').style.display = 'block';
-        elAction.style.display = 'none';
-        sendTrackingEventParent('iframe_button_click', {
+      const elAction = document.getElementById("thankButton");
+      elAction.addEventListener("click", () => {
+        document.getElementById("thankMessage").style.display = "block";
+        elAction.style.display = "none";
+        sendTrackingEventParent("iframe_button_click", {
           button_text: elAction.innerText,
           tag_name: elAction.tagName,
         });
         setTimeout(() => {
-          document.getElementById('thankMessage').style.display = 'none';
-          elAction.style.display = 'block';
+          document.getElementById("thankMessage").style.display = "none";
+          elAction.style.display = "block";
         }, 1000);
       });
     </script>
   </body>
-
-</html>
+</html>

index.html

@@ -49,8 +49,8 @@
         e_timestamp: String(new Date().getTime()), // milliseconds
         language_code: "en-US",
         page_author: "Arturo Santiago-Rivera",
-        page_category: "iframe",
-        page_name: "Web Analytics Implementation - Internal Page",
+        page_category: "internal",
+        page_name: "Web Analytics Implementation - iFrame Page",
         page_title: document.querySelector("title").innerText,
       };
       window.dataLayer = window.dataLayer || [];
@@ -80,8 +80,8 @@
     </script>
     <!--End Google Tag Manager-->
     <!--Amplitude Script Loader-->
-    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.3-min.js.gz"></script>
-    <!--End Amplitude Script Loader-->
+    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.12-min.js.gz"></script>
+    <!--END: Amplitude Script Loader-->
     <!--Mixpanel Script Loader-->
     <script type="text/javascript">
       (function (f, b) {
@@ -259,12 +259,12 @@
         },
       });
       amplitude.add(enrichEventsPlugin()); // amplitude enrich plugin call
-      amplitude.init(config.AMPLITUDE_KEY, userInit, {
+      amplitude.init(insightTool.AMPLITUDE_KEY, userInit, {
         autocapture: { elementInteractions: false },
       }); // amplitude init statement
 
       /* Mixpanel Init */
-      mixpanel.init(config.MIXPANEL_KEY); // mixpanel init statement
+      mixpanel.init(insightTool.MIXPANEL_KEY); // mixpanel init statement
       mixpanel.identify(userInit); // mixpanel user identify
       mixpanel.people.set({ logged_in: false }); // mixpanel user properties
       mixpanel.register({
@@ -276,30 +276,24 @@
 
       /* Heap Analytics Init */
       const heapAppId =
-        tealiumEnv !== "prod" ? config.HEAP_DEV_KEY : config.HEAP_PROD_KEY;
+        tealiumEnv !== "prod"
+          ? insightTool.HEAP_DEV_KEY
+          : insightTool.HEAP_PROD_KEY;
       heap.load(heapAppId);
       heap.identify(userInit);
       heap.addUserProperties({ logged_in: localStorage.logged });
     </script>
     <!-- END Tracking Variables Setup -->
     <!-- Tracking Plan Loader -->
-    <script type="text/javascript" src="assets/js/trackingplan.js"></script>
+    <script type="text/javascript" src="../assets/js/trackingplan.js"></script>
     <!-- END: Tracking Plan Loader -->
   </head>
 
   <body>
     <!-- utag data object message -->
     <script type="text/javascript">
       const utag_data = {
-        author_email: "asantiago@arsari.com",
-        content_group: "Implementation",
-        content_type: "Playground",
-        e_timestamp: String(new Date().getTime()), // milliseconds
-        language_code: "en-US",
-        page_author: "Arturo Santiago-Rivera",
-        page_category: "iframe",
-        page_name: "Web Analytics Implementation - Internal Page",
-        page_title: document.querySelector("title").innerText,
+        ...INIT_PROPERTIES,
         // user properties
         custom_user_id: userInit,
         logged_in: localStorage.logged ?? false,