@speedkit/cli 2.47.1 → 2.49.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [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)
+
+
+### Features
+
+* **config-wizard:** add support for scrapingbee ([c8fe5a1](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/c8fe5a1b45c06fc373cbf868ef6fb6204cadc0fc))
+* **config-wizard:** add support for scrapingbee ([1286550](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/1286550a41fd48a0effee9c4c8f5b424dc8cb864))
+* **config-wizard:** add support for scrapingbee ([f1a6ba3](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/f1a6ba3dcf42ee5715943e5c7a923464c81b77db))
+
 ## [2.47.1](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v2.47.0...v2.47.1) (2024-07-24)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/2.47.1 linux-x64 node-v20.15.1
+@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

@@ -32,8 +32,10 @@ export interface CustomerConfigSettings {
     shadowDomCustomElementPrefix?: string;
     activateRumTracking?: boolean;
     useGATracking?: boolean;
+    useScrapingBee?: boolean;
     withGoogleOptimize?: boolean;
     activateCfRocketLoaderWorkaround?: boolean;
+    hasSoftNavigations?: boolean;
     isShopify?: boolean;
     isShopware?: boolean;
     isSalesforce?: boolean;

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

@@ -24,5 +24,6 @@ export declare class CustomerConfigService {
     private downloadAndSaveFile;
     private getConfigSettings;
     handleDocumentHandler({ addPreRendering }: CustomerConfigSettings): Promise<void>;
+    logWarnings(configSettings: CustomerConfigSettings): Promise<void>;
     generateConfig(): Promise<void>;
 }

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, 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,
@@ -214,9 +214,13 @@ class CustomerConfigService {
                 shadowDomCustomElementPrefix = await this.cli.prompt("Please specify the prefix of the custom elements used (e.g. o2 uses tef-): ", { defaultAnswer: "custom-" });
             }
         }
+        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
@@ -235,8 +239,10 @@ class CustomerConfigService {
             shadowDomCustomElementPrefix,
             activateRumTracking,
             useGATracking,
+            useScrapingBee,
             withGoogleOptimize,
             activateCfRocketLoaderWorkaround,
+            hasSoftNavigations,
             isShopify,
             isShopware,
             isSalesforce,
@@ -269,6 +275,16 @@ class CustomerConfigService {
     `);
         }
     }
+    async logWarnings(configSettings) {
+        if (configSettings.useScrapingBee) {
+            this.cli.writeWarning(`
+      ⚠️ MANUAL ACTION NEEDED ⚠️
+
+      Remember to set it up the variation in the orestes config.
+      See more info here: https://www.notion.so/baqend/How-to-use-Scraping-Bee-in-the-orestes-config-b94d8571e1a04c9e8310810df55a9a62
+    `);
+        }
+    }
     async generateConfig() {
         this.cli.write("\nLet's generate a config...\n");
         const configSettings = await this.getConfigSettings();
@@ -278,6 +294,7 @@ class CustomerConfigService {
         }
         await this.compileHandlebarsFiles(configSettings);
         await this.handleDocumentHandler(configSettings);
+        await this.logWarnings(configSettings);
         this.cli.writeSuccess("\nConfig generation completed 👏\n");
     }
 }

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

@@ -74,6 +74,18 @@
     split: CURRENT_HOST_CONFIG.split,
     splitTestId: CURRENT_HOST_CONFIG.splitTestId,
     disabled: !CURRENT_HOST_CONFIG.enabled{{#if addPreRendering}} || isTablet(){{/if}},
+{{#if useScrapingBee}}
+    customVariation: [
+      {
+        variationFunction: function (request, device, cookies) {
+          if (device === "desktop") {
+            return "proxycrawl";
+          }
+          return "proxycrawlmobile";
+        },
+      },
+    ],
+{{/if}}
     enabledSites: [
       {
         pathname: [

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

@@ -56,6 +56,13 @@ const config = {
       return `Tablet viewport is unsupported: ${url}`;
     }
 
+    {{/if}}
+    {{#if useScrapingBee}}
+      // dynamically blacklist not 200 status codes from ScrapingBee
+      const spbStatusCode = headers["Spb-initial-status-code"];
+      if (spbStatusCode && spbStatusCode !== "200") {
+        return `initial status code unequal to 200 received from scrapingbee: ${url} ${spbStatusCode}`;
+      }
     {{/if}}
     return false;
   },

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.47.1"
+  "version": "2.49.0"
 }

package/package.json

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