@openeventkit/event-site 2.0.116 → 2.0.118

package/gatsby-browser.js

@@ -1,10 +1,11 @@
 import * as Sentry from "@sentry/gatsby";
 import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
 import ReduxWrapper from "./src/state/ReduxWrapper";
-
-import AnalyticsManager from "./src/utils/analytics/AnalyticsManager";
-import GoogleTagManagerProvider from "./src/utils/analytics/providers/GoogleTagManagerProvider";
-
+import CookieManager from "./src/utils/cookies/CookieManager";
+import KlaroProvider from "./src/utils/cookies/providers/KlaroProvider";
+import cookieServices from "./src/utils/cookies/services";
+import TagManager from "./src/utils/tag-manager/TagManager";
+import GoogleTagManagerProvider from "./src/utils/tag-manager/providers/GoogleTagManagerProvider";
 import smoothscroll from "smoothscroll-polyfill";
 import "what-input";
 
@@ -18,17 +19,23 @@ import "./src/utils/fontAwesome";
 import colors from "data/colors.json";
 import marketingSettings from "data/marketing-settings.json";
 
-// smooth scroll polyfill needed for Safari
-smoothscroll.polyfill();
-
-const googleTagManagerProvider = new GoogleTagManagerProvider();
-const analyticsManager = new AnalyticsManager(googleTagManagerProvider);
-
 export const wrapRootElement = ReduxWrapper;
 
 export const onClientEntry = () => {
-  // var set at document level
-  // prevents widget color flashing from defaults to fetched by widget from marketing api
+  // smooth scroll polyfill needed for Safari
+  smoothscroll.polyfill();
+
+  // Initialize TagManager and add GoogleTagManagerProvider
+  const tagManager = new TagManager();
+  const googleTagManagerProvider = new GoogleTagManagerProvider();
+  tagManager.addProvider(googleTagManagerProvider);
+
+  // Initialize Cookie Manager with Klaro provider
+  const klaroProvider = new KlaroProvider();
+  const cookieManager = new CookieManager(klaroProvider, cookieServices);
+  cookieManager.show();
+
+  // Apply colors
   Object.entries(colors).forEach(([key, value]) => {
     document.documentElement.style.setProperty(`--${key}`, value);
     document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
@@ -40,7 +47,7 @@ export const onClientEntry = () => {
 
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;
-  if(GATSBY_SENTRY_DSN) {
+  if (GATSBY_SENTRY_DSN) {
     console.log("INIT SENTRY ....");
     // sentry init
     Sentry.init({
@@ -61,12 +68,12 @@ export const onClientEntry = () => {
               return frame;
             }
             const isComponentFrame = /component---src-pages-(\w*)-js(-\w*).js/.test(frame.filename);
-            if(isComponentFrame){
-              frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/,'$1.js')
+            if (isComponentFrame) {
+              frame.filename = frame.filename.replace(/(component---src-pages-(\w*)-js)(-\w*).js$/, '$1.js');
             }
             const isAppFrame = /app(-\w*).js/.test(frame.filename);
-            if(isAppFrame){
-              frame.filename = frame.filename.replace(/app(-\w*).js$/,'app.js')
+            if (isAppFrame) {
+              frame.filename = frame.filename.replace(/app(-\w*).js$/, 'app.js');
             }
             return frame;
           }
@@ -76,4 +83,4 @@ export const onClientEntry = () => {
     });
     window.Sentry = Sentry;
   }
-};
+};

package/gatsby-config.mjs

@@ -53,10 +53,13 @@ const manifestPlugin = faviconAsset ? [
 
 const googleTagManagerPlugin = process.env.GATSBY_GOOGLE_TAGMANAGER_ID ? [
   {
-    resolve: "gatsby-plugin-google-tagmanager",
+    resolve: require.resolve("./plugins/gatsby-plugin-google-tagmanager"),
     options: {
       id: process.env.GATSBY_GOOGLE_TAGMANAGER_ID,
-      includeInDevelopment: true
+      includeInDevelopment: true,
+      // defer script tags loading to after consent is given
+      // managed by Klaro cookie manager
+      deferLoading: true
     }
   }
 ] : [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.116",
+  "version": "2.0.118",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -29,6 +29,7 @@
     "ably": "^1.2.34",
     "assert": "^2.1.0",
     "attendee-to-attendee-widget": "3.1.0",
+    "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
     "babel-preset-gatsby": "^3.13.2",
@@ -53,7 +54,6 @@
     "gatsby": "^5.13.5",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-decap-cms": "^4.0.4",
-    "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.12.3",
@@ -74,6 +74,7 @@
     "immutability-helper": "2.9.1",
     "immutable": "^5.0.0-beta.5",
     "jsdom": "^24.1.0",
+    "klaro": "^0.7.21",
     "lite-schedule-widget": "3.0.3",
     "live-event-widget": "4.0.2",
     "lodash": "^4.17.19",
@@ -127,7 +128,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.35",
+    "summit-registration-lite": "5.0.36",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",
@@ -138,6 +139,7 @@
     "video.js": "^7.8.2",
     "videojs-mux": "^3.1.0",
     "videojs-youtube": "^2.6.1",
+    "web-vitals": "^1.1.2",
     "what-input": "^5.2.10",
     "xmlhttprequest": "^1.8.0",
     "yup": "^0.32.11"

package/plugins/gatsby-plugin-google-tagmanager/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [
+    {
+      "test": ["**/gatsby-browser.js"],
+      "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
+    }
+  ]
+}