@speedkit/cli 2.48.0 → 2.49.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.49.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.48.0...v2.49.0) (2024-07-26)
+
+
+### Features
+
+* **customer-config:** add soft navigation tracking ([e473277](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/e4732778c3a33046b2d602743b22b8e3e4e8ec73))
+
 # [2.48.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.47.1...v2.48.0) (2024-07-26)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/2.48.0 linux-x64 node-v20.16.0
+@speedkit/cli/2.49.0 linux-x64 node-v20.16.0
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND

package/dist/services/customer-config/customer-config-service-model.d.ts

@@ -35,6 +35,7 @@ export interface CustomerConfigSettings {
     useScrapingBee?: boolean;
     withGoogleOptimize?: boolean;
     activateCfRocketLoaderWorkaround?: boolean;
+    hasSoftNavigations?: boolean;
     isShopify?: boolean;
     isShopware?: boolean;
     isSalesforce?: boolean;

package/dist/services/customer-config/customer-config-service.js

@@ -161,7 +161,7 @@ class CustomerConfigService {
         }
     }
     async getConfigSettings() {
-        let { production, staging, subRouteScope, includeServiceWorker, activateImageOptimisation, removeLazyLoading, addPreRendering, supportShadowDomInPreRendering, shadowDomCustomElementPrefix, activateRumTracking, useGATracking, useScrapingBee, withGoogleOptimize, activateCfRocketLoaderWorkaround, isShopify, isShopware, isSalesforce, isPlentymarkets, shopifyId, } = {};
+        let { production, staging, subRouteScope, includeServiceWorker, activateImageOptimisation, removeLazyLoading, addPreRendering, supportShadowDomInPreRendering, shadowDomCustomElementPrefix, activateRumTracking, useGATracking, useScrapingBee, withGoogleOptimize, activateCfRocketLoaderWorkaround, hasSoftNavigations, isShopify, isShopware, isSalesforce, isPlentymarkets, shopifyId, } = {};
         this.appName = await this.cli.prompt(`Enter SK App Name:`, {
             validator: (input) => /^[\da-z]+(?:-[\da-z]+)*$/.test(input) ? "" : "No valid kebab-case",
             defaultAnswer: this.appName,
@@ -216,8 +216,11 @@ class CustomerConfigService {
         }
         useScrapingBee = await this.cli.confirm("Do customer responses differ geo-location-based (ScrapingBee will be needed to fetch documents)?", false);
         activateRumTracking = await this.cli.confirm("Activate RUM Tracking?");
-        if (activateRumTracking && !isShopify) {
-            useGATracking = await this.cli.confirm("Add Tracking based on Google Analytics' DataLayer?");
+        if (activateRumTracking) {
+            if (!isShopify) {
+                useGATracking = await this.cli.confirm("Add Tracking based on Google Analytics' DataLayer?");
+            }
+            hasSoftNavigations = await this.cli.confirm("Add Tracking for Soft Navigations?", false);
         }
         withGoogleOptimize = await this.cli.confirm("Is Google Optimize being used?", false);
         activateCfRocketLoaderWorkaround = isShopify
@@ -239,6 +242,7 @@ class CustomerConfigService {
             useScrapingBee,
             withGoogleOptimize,
             activateCfRocketLoaderWorkaround,
+            hasSoftNavigations,
             isShopify,
             isShopware,
             isSalesforce,

package/dist/services/customer-config/templates/config_loadHandler.js.hbs

@@ -1,4 +1,7 @@
 import { BaseBundle } from 'rum/BaseBundle';
+{{#if hasSoftNavigations}}
+import { HistoryApiPlugin } from 'rum/HistoryApiPlugin';
+{{/if}}
 {{#if useGATracking}}
 import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
 {{/if}}
@@ -7,69 +10,76 @@ import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
   if (window !== window.top) {
     return;
   }
+{{#if hasSoftNavigations}}
+
+  var softLcpPending = false;
+  var latestUrl = location.href;
+{{/if}}
 
   window.SpeedKit = window.SpeedKit || {};
   SpeedKit.rumPlugins = SpeedKit.rumPlugins || [];
   SpeedKit.rumPlugins.push(
     new BaseBundle(),
+{{#if hasSoftNavigations}}
+    new HistoryApiPlugin(), // Soft Navigation Tracking using History API
+{{/if}}
 {{#if useGATracking}}
     new GAEcommerceTrackingPlugin(),
 {{/if}}
 
 {{#if addPreRendering}}
-  {
-    key: "isPreRendered",
-    type: "PiDimension",
-    on: "load",
-    set: function () {
-      return !!document.querySelector(".speed-kit-pre-rendered");
+    {
+      key: "isPreRendered",
+      type: "PiDimension",
+      on: "load",
+      set: function () {
+        return !!document.querySelector(".speed-kit-pre-rendered");
+      },
     },
-  },
-  {
-    on: onPrerenderReady,
-    track: function (controller, custom, event) {
-      var measure = performance.measure("sk-prerender-observe-runtime", {
-        start: "sk-prerender-observe-start",
-        end: "sk-prerender-observe-end",
-      });
-      var timing = {
-        start: measure.startTime,
-        duration: measure.duration,
-        url: window.location.href,
-        element: event?.detail?.element,
-      };
-      controller.trackCustomEvent(
-        "skPrerenderReady",
-        JSON.stringify(timing),
-        timing.duration,
-      );
+    {
+      on: onPrerenderReady,
+      track: function (controller, custom, event) {
+        var measure = performance.measure("sk-prerender-observe-runtime", {
+          start: "sk-prerender-observe-start",
+          end: "sk-prerender-observe-end",
+        });
+        var timing = {
+          start: measure.startTime,
+          duration: measure.duration,
+          url: window.location.href,
+          element: event?.detail?.element,
+        };
+        controller.trackCustomEvent(
+          "skPrerenderReady",
+          JSON.stringify(timing),
+          timing.duration,
+        );
+      },
     },
-  },
-  {
-    on: onPrerenderReady,
-    track: function (controller) {
-      var measure = performance.measure(
-        "sk-prerender-observe-change-detection",
-        {
-          start: "sk-prerender-change-detection-start",
-          end: "sk-prerender-change-detection-end",
-        },
-      );
-      var timing = {
-        start: measure.startTime,
-        duration: measure.duration,
-        url: window.location.href,
-      };
-
-      controller.trackCustomEvent(
-        "skPrerenderChangeDetection",
-        JSON.stringify(timing),
-        timing.duration,
-      );
+    {
+      on: onPrerenderReady,
+      track: function (controller) {
+        var measure = performance.measure(
+          "sk-prerender-observe-change-detection",
+          {
+            start: "sk-prerender-change-detection-start",
+            end: "sk-prerender-change-detection-end",
+          },
+        );
+        var timing = {
+          start: measure.startTime,
+          duration: measure.duration,
+          url: window.location.href,
+        };
+
+        controller.trackCustomEvent(
+          "skPrerenderChangeDetection",
+          JSON.stringify(timing),
+          timing.duration,
+        );
+      },
     },
-  },
 {{/if}}
-
     {
       key: 'language',
       type: 'SessionDimension',
@@ -312,6 +322,93 @@ import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
       },
     },
   {{/if}}
+{{/if}}
+{{#if hasSoftNavigations}}
+    {
+      on: "softNavigation",
+      track: (controller) => {
+        var onlyHashChanged =
+          latestUrl.split("#")[0] === location.href.split("#")[0];
+        latestUrl = location.href;
+
+        if (onlyHashChanged) {
+          controller.trackCustomEvent("hashChanged", location.href, Date.now());
+          return;
+        }
+
+        controller.trackCustomEvent("softNav", location.href, Date.now());
+        var navStartMark = "soft-nav_" + location.pathname;
+        performance.mark(navStartMark);
+
+        // Only capture soft LCP on following pages/page types:
+        // * <add>
+        // TODO: update list
+
+        // TODO: update exemplary url pattern to match pages/page types to capture
+        if (location.href.indexOf("/p/")) {
+          softLcpPending = true;
+        }
+
+        var softNavigationPerformanceObserver = new PerformanceObserver(
+          (entries, observer) => {
+            // TODO: update exemplary selectors within this block
+
+            if (!document.querySelector(".productBasicInfo")) {
+              return;
+            }
+
+            var imageEntries = Array.from(entries.getEntries()).filter(
+              (item) =>
+                item.name.indexOf("/img/produkte/") > -1 &&
+                item.name.indexOf("/img/produkte/15_") === -1,
+            );
+            if (!imageEntries || imageEntries.length < 1) {
+              return;
+            }
+
+            var element = document.querySelector(
+              ".productBasicInfo .carousel__img-wrapper img",
+            );
+            if (!element) {
+              return;
+            }
+            var imageUrl = element.currentSrc || element.srcset || "";
+
+            var image = imageEntries.filter((entry) => {
+              var urlObj = new URL(entry.name);
+              return imageUrl.indexOf(urlObj.pathname) > -1;
+            })[0];
+            if (!softLcpPending || !image) {
+              return;
+            }
+
+            var measure = performance.measure("lcp_" + location.pathname, {
+              start: navStartMark,
+              end: image.responseEnd,
+            });
+
+            var timing = {
+              start: measure.startTime,
+              duration: measure.duration,
+              image: image.name,
+              url: window.location.href,
+            };
+            controller.trackCustomEvent(
+              "softNavLcp",
+              JSON.stringify(timing),
+              Date.now(),
+            );
+            softLcpPending = false;
+            softNavigationPerformanceObserver.disconnect();
+          },
+        );
+
+        softNavigationPerformanceObserver.observe({
+          buffered: true,
+          type: "resource",
+        });
+      },
+    },
 {{/if}}
   );
 {{#if isShopify}}

package/oclif.manifest.json

@@ -712,5 +712,5 @@
       ]
     }
   },
-  "version": "2.48.0"
+  "version": "2.49.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "2.48.0",
+  "version": "2.49.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"